AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目

2024-05-13 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目

任务一：

任务1:建立站点并完成页面整体布局

任务2:制作网页头部和导航

任务3:制作banner和最新更新栏目

任务4:制作苹果之家栏目

任务5:制作Apple独家栏目

任务6:制作底部版权区域与CSS代码优化

注:代码统一并在本文章末尾展示

任务二：

本任务要求制作苹果官方网站的头部和导航部分，效果如图所示：

注：分析苹果官方网站的头部效果，网页的头部分为上下两行。第一行通栏显示，其内容居中显示，内部包含欢迎词和菜单两个模块，第二行内容是也居中显示，内 部包含logo和搜索框两模块，logo中包含图片、标题和文本；搜索框模块中包含一个 单行文本框和一个按钮。

任务三：

制作banner和最新更新栏目，效果如图：

由此分析思路展示为：

任务四：

本任务制作苹果官方网站的苹果之家栏目，效果如图所示:

作相关任务分析为：

任务五：

本任务要求制作苹果官方网站的Apple独家栏目，效果如图示：

任务分析如图：

任务六：

制作底部版权区域与CSS代码优化：

CSS代码优化的意义：

1、可以减少占用网页字节，在同等条件下缩短浏览器下载CSS 代码时间，相当于加快网页打开速度。

2、简化和标准化CSS代码让CSS代码减少，也便于日后维护。

3、使自己的CSS代码更加专业。

CSS代码优化的方法：

1、缩写CSS代码 在CSS代码中margin、padding、font、border等属性均可以用一行来代替很多行设置。

2、当多个元素属性相同时，可以同时设定多个元素的属性

3、尽可能多地重用CSS代码，尽可能少地增加新代码

4、删除空白和换行是将网站正式发布前的操作。对于脱离了开发阶段，要应用在网络上的CSS 而言，删除空白和换行可以减少CSS占用网页字节。

源代码：

1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
  </head>
  <body>
    <header>
      <div class="top">
        <div class="box">
          <div class="welcome">
            <div class="topnav">欢迎访问Apple官网！</div>
            <div class="topnav">
              <ul>
                <li><a href="#">手机版</a></li>
                <li><a href="#">收藏本站</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="logo-search box">
          <div class="logo">
            <img src="../img/苹果logo.jpg" alt="Apple官网" />
            <h2>Apple官网</h2>
            <p>在线选购，享受免费送货、Specialist 专家支持、免息分期等服务。</p>
          </div>
          <div class="search">
            <form>
              <input type="text" placeholder="请输入产品关键词" class="input_text" />
              <input type="submit" value="检索" class="input_submit" />
            </form>
          </div>
        </div>
      </div>
    </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">商店</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">Apple配件</a></li>
        <li><a href="#">技术支持</a></li>
      </ul>
    </nav>
    <main>
      <section class="rowone box">
        <div class="banner">
          <img src="../img/14pro1.PNG" />
          <div>"IPhone14"：IPhone的巅峰之作</div>
          <ul class="bt">
            <li class="current"></li>
            <li></li>
            <li></li>
          </ul>

        </div>
        <div class="news">
          <h2><span>新品发布</span><a href="#">"IPhone14"IPhone的巅峰之作</a></h2>
          <p>iPhone 14搭载苹果A15六核处理器，后置摄像头为1200万像素主镜头+1200 万像素超广角镜头，前置摄像头为1200万像素，支持光像引擎、深度融合技术、智能HDR4、人像模式等功能。
          </p>
          <ul>
            <li><a href="">苹果测试全新M芯片Mac Pro：性能可达M2 Max四倍<span></span></a></li>
            <li><a href="">苹果首席产品设计师将于2023年离职<span></span></a></li>
            <li><a href="">iPhone15 Ultra最新消息动态：将采用钛金属外壳<span></span></a></li>
            <li><a href="">iPad已经告别了Lightning，iPhone还会远吗？<span></span></a></li>
            <li><a href="">2007款未拆封激活的初代iPhone，于日前LCG(伦敦资本集团)拍卖成功<span></span></a></li>
          </ul>
        </div>
      </section>
      <section class="rowtwo box">
        <div class="tit">
          <h2>苹果之家</h2>
          <a href="#">更多产品</a>
        </div>
        <div class="rowtwoL">
          <img src="../img/大尺寸苹果.jpeg" />
          <h3>美国高科技公司</h3>
          <p>Apple Inc是美国高科技公司，由乔布斯、韦恩等人于1976年4月1日创立为美国苹果电脑公司，2007年1月9日更名苹果公司，总部位于加利福尼亚州的库比蒂诺。</p>
          <a href="#">点击查看</a>
        </div>
        <div class="rowtwoR">
          <ul>
            <li><a href="#">
                <span><b>08</b>2022-09</span>
                <h3>iPhone14Pro实力出圈</h3>
                <p>灵动iPhone新玩法，全新登场的灵动岛功能，为拯救生命而设计，尽显 Apple 创新本色。</p>
              </a></li>
            <li><a href="#">
                <span><b>07</b>2022-06</span>
                <h3>MacBook Air别看轻，别轻看。</h3>
                <p>超薄进化新形态M2芯片强势驱动，从午夜到星光，四色同辉，为地球设想的设计。</p>
              </a></li>
            <li><a href="#">
                <span><b>26</b>2022-10</span>
                <h3>iPad可圈可点可画心</h3>
                <p>全面屏，色调鲜明。论做事，身手利落。搞创作，活灵活现。动笔记、打个字，动呲打呲。</p>
              </a></li>
            <li><a href="#">
                <span><b>08</b>2022-09</span>
                <h3>AirPods Pro重塑新声</h3>
                <p>H2 芯片，沉浸感拉满。惊人的科技，静悄悄，超高水平操控力，调音以你为准。</p>
              </a></li>
            <li><a href="#">
                  <span><b>08</b>2022-09</span>
                  <h3>Watch越野越心驰</h3>
                  <p>先锋工艺开新路。强硬坚固，不止肉眼可见。指南针，新装上阵。大海里，开辟新大陆。</p>
                </a></li>
            <li><a href="#">
                <span><b>01</b>2021-11</span>
                <h3>HomePod mini智能家居的进阶之门。</h3>
                <p>声音底气十足，有头脑的助理，智能家居的管家，iPhone 的默契拍档，隐私安全的保镖。</p>
              </a></li>
          </ul>
        </div>
      </section>
      <section class="rowthree box">
        <div class="tit">
          <h2>Apple独家</h2>
          <a href="#">更多产品</a>


        </div>
        <div class="rowthreeL">
          <a href="#"><img src="../img/14pro1.PNG"/><span>iPhone</span></a>
        </div>
        <div class="rowthreeR">

          <ul>
            <li><a href="#"><img src="../img/mac.jpg" alt="#" width="220"
                  height="170" /><span>Mac</span></a></li>
            <li><a href="#"><img src="../img/ipad.png" alt="#" width="200"
                  height="200" /><span>iPad</span></a></li>
            <li><a href="#"><img src="../img/airpods.jpg" alt="#" width="200"
                  height="200" /><span>Airpods</span></a></li>
            <li><a href="#"><img src="../img/watch.png" alt="#" width="200"
                  height="179" /><span>Watch</span></a></li>
            <li><a href="#"><img src="../img/macstudio.jpg" alt="#" width="200"
                  height="180" /><span>Macstudio</span></a></li>
            <li><a href="#"><img src="../img/homepodmini.png" alt="#" width="200"
                  height="200" /><span>Homepodmini</span></a></li>

          </ul>
        </div>
      </section>
    </main>
    <footer>
      <ul>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">Airpods</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">Macstudio</a></li>
        <li><a href="#">Homepodmini</a></li>
      </ul>
      <div class="copyright">
        <p>Copyright&copy;2020-2024 Apple官网 版权所有</p>
        <p>声明：本网站文章图片均来源于网络转载，如有侵犯版权权益，请告知我们并予以删除</p>
      </div>
    </footer>
  </body>
</html>

style.css


* {
  padding: 0;
  margin: 0;
}

body {
  font: 14px "华文细黑";
  background-color: #f6f6f6;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  color: #B40404;
}
.box {
  width: 1170px;
  margin: auto;
}

.welcome {
  float: left;
}

.topnav {
  float: right;
}

.topnav li {
  float: left;
}

.topnav li a {
  display: block;
  color: #000000;
  padding: 0 10px;
}

.logo-search {
  padding: 5px 0;
}

.logo-search::after {
  display: block;
  content: "";
  clear: both;
}

.logo {
  float: left;
  width: 500px;
}

.logo img {
  width: 120px;
  float: left;
  margin-right: 10px;
}

.logo h2 {
  font-size: 24px;
  color: #840404;
  margin-top: 15px;
}

.logo p {
  margin-top: 4px;
  color: #000000;
  8181
}

.search {
  float: right;
  margin-top: 26px;
}

.search input.input_text {
  border: 0;
  line-height: 36px;
  height: 36px;
  width: 300px;
  background: #f3f3f3;
  float: left;
  text-indent: 1em;
}

.search input.input_submit {
  border: 0;
  background-color: #B40404;
  color: #ffffff;
  line-height: 36px;
  font-size: 15px;
  width: 100px;
  cursor: pointer;
  letter-spacing: 10px;
}

/*导航样式*/
nav {
  width: 100%;
  height: 50px;
  background-color: #840404;
  margin-bottom: 20px;
}

nav ul {
  width: 1170px;
  margin: 0 auto;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  line-height: 50px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  padding: 0 48px;
}

nav li a:hover {
  background-color: #ff6600;
}
/*底部样式*/
footer{
  padding-top: 30px;
  margin-top: 20px;
  background-color: #333;
  border-top: solid 5px #ff6600;
}
footer ul{
  width: 665px;
  height: 40px;
  margin: auto;
}
footer ul li{
  width: 110px;
  float: left;
  text-align: center;
  border-right: 1px solid #d8d8d8;
}
footer li:last-child{border-right: none;}
footer ul li a{
  color: #fff;
}
.copyright{
  text-align: center;
  color: #fff;
  padding-bottom: 30px;
}

index.css

/*rowone部分样式*/
.rowone{
  background: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
}
.rowone::after{
  content: "";
  display: block;
  clear: both;
}
.banner{
  width: 680px;
  float: left;
  position: relative;
}
.banner img{
  width: 500px;
  height: 500px;
  display: block;
}
.banner div{
  width: 660px;
  height: 33px;
  line-height: 33px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  bottom: 0;
  padding-left: 20px;
}
.bt{
  position: absolute;
  bottom: 10px;
  right: 30px;
}
.bt li{
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  float: left;
  margin-left: 10px;
}
li.current{
  background-color: #ff6600;
}
.news{
  width: 430px;
  float: right;
}
.news h2{
  margin-bottom: 15px;
}
.news h2 span{
  float: left;
  font-size: 12px;
  border: #ff6600 1px solid;
  padding: 0 5px;
  border-radius: 3px;
  color: #ff6600;
  margin: 5px 8px 0 0;
}
.news p{
  line-height: 25px;
  height: 50px;
  text-align: justify;
  margin-bottom: 10px;
  color: #888;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news ul{
  border-top: #ddd 1px solid;
  padding-top: 10px;
}
.news ul li{
  font-size: 15px;
  line-height: 35px;
  list-style: square inside;
}
.news ul li span{
  float: right;
}
/*rowtwo部分样式*/
.rowtwo{
  background-color: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
}
.rowtwo::after{
  display: block;
  content: "";
  clear:both;
}
.tit{
  height: 30px;
  border-bottom:#dddddd solid 1px;
  color: #b40404;
  margin-bottom: 20px;
}
.tit h2{
  width: 100px;
  line-height: 28px;
  float: left;
  text-align: center;
  color: #b40404;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #b40404;
}
.tit a{
  float: right;
}
.rowtwoL{
  width: 340px;
  float: left;
}
.rowtwoL img{
  width: 340px;
  height: 160px;
}
.rowtwo h3{
  color: #b40404;
  font-size: 16px;
  margin: 10px 0;
}
.rowtwoL p{
  font-size: 14px;
  color: #888;
  line-height: 25px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3 ;
  overflow: hidden;
}
.rowtwoL a{
  display: block;
  margin: 16px auto;
  border: 1px solid #ddd;
  color: #999;
  letter-spacing: 2px;
  border-radius: 2px;
  line-height: 45px;
  text-align: center;
}
.rowtwoL a:hover{
  background-color: #b40404;
  color: #ffffff;
}
.rowtwoR{
  width:830px;
  float: left;
}
.rowtwoR ul li{
  width: 365px;
  float: left;
  margin-bottom: 20px;
  border: #ddd 1px solid;
  padding: 15px;
  margin-left: 15px;
}
.rowtwoR ul li span{
  width: 70px;
  height: 70px;
  font-size: 12px;
  text-align: center;
  background: #ababab;
  color: #fff;
  float: left;
  margin-right: 10px;
}
.rowtwoR ul li span b{
  display: block;
  font-size: 16px;
  margin-top: 16px;
}
.rowtwoR ul li h3{
  font-weight: normal;
}
.rowtwoR ul li p{
  font-size: 14px;
  color: #888;
  line-height: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.rowtwoR ul li a:hover span{
  background-color: #b40404;
  color:#ffffff;
}
.rowtwoR ul li a:hover h3{
  color: #b40404;
}
/*rowthree部分样式*/
.rowthree{
  background-color: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
}
.rowthree::after{
  display: block;
  content: "";
  clear: both;
}
.rowthreeL{
  width: 430px;
  float: left;
}
.rowthreeL img{
  width: 400px;
  height: 400px;
}
.rowthreeL span{
  display: block;
  width: 430px;
  line-height: 30px;
  text-align: center;
  
}
.rowthreeR{
  width: 740px;
  float: left;
}
.rowthreeR li{
  width: 220px;
  float: left;
  margin-left: 20px;
}
.rowthreeR li span{
  display: block;
  width: 220px;
  line-height: 30px;
  text-align: center;
}

注：左端img应插入相关图片，相应尺寸可在css代码中作显示修改。如有调试问题可翻阅前篇文章。

完整效果展示：

注：声明：本网站文章图片均来源于网络转载，如有侵犯版权权益，请告知我们并予以删除。


文章标签：
前端开发
关键词：
CSS网页
网页CSS
导航CSS
CSS导航
CSS项目
听风者i
目录
相关文章
土木林森
|
3月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元：CSS3的革新特性如何重塑我们的网页视觉体验？
【8月更文挑战第26天】随着Web技术的发展，CSS3为前端开发带来了众多激动人心的新特性，极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2，详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进，展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
土木林森
51 1
游客fz577umxdejsg
|
3月前
|
前端开发
导航新风尚：CSS梯形设计，让网站菜单不再单调！
导航新风尚：CSS梯形设计，让网站菜单不再单调！
游客fz577umxdejsg
65 0
游客qeoynko2nmbgk
|
2月前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
游客qeoynko2nmbgk
51 1
疯狂的猿
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
疯狂的猿
53 1
简单几行代码CSS实现网页自动打文字效果
游客zi3qmblbcdexu
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
74 9
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
72 0
土木林森
|
3月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力：从基础到实战，打造灵动响应式网页！
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位，包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素；百分比和em/rem利于构建响应式布局；视窗单位适合全屏设计；fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
土木林森
58 4
游客fz577umxdejsg
|
3月前
|
前端开发
导航栏也时尚：CSS缩放动画，让导航链接在鼠标经过时绽放！
导航栏也时尚：CSS缩放动画，让导航链接在鼠标经过时绽放！
游客fz577umxdejsg
36 1
游客fz577umxdejsg
|
3月前
|
前端开发
一键复制：期末大作业常用的CSS动画导航效果！
一键复制：期末大作业常用的CSS动画导航效果！
游客fz577umxdejsg
28 1
土木林森
|
3月前
|
前端开发 开发者
CSS样式覆盖规则详解，让你的网页更加出彩！
【8月更文挑战第23天】在Web前端开发中，理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时，哪些规则生效？本文通过实例解析这些规则。简单案例中，`.error`类选择器优先级高于`p`标签，文字显示红色。复杂案例涉及`.important`类与`!important`关键字，此时文字变为绿色。另外，内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
土木林森
94 0

热门文章

最新文章

  • 1
    Css基本样式————字体
  • 2
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3实现时间轴效果
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    65
  • 2
    技术心得：xpath、CSS定位方法
    40
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    153
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    68
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    138
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    43
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    66
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    147
  • 9
    使用HTML和CSS创建响应式表格
    160
  • 10
    常见的css优化方案都有那些
    48

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 《如何制作一个水平仪》
  • 宏光S导航安装教程

    • 相关实验场景

    更多
  • 1分钟制作专属的RFID安全标签
  • 收银台的场景化界面实践
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • 制作开放场景
    • 下一篇
    阿里云OSS设置跨域访问