实践任务：项目介绍与项目准备+制作网页头部和导航+制作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代码中作显示修改。如有调试问题可翻阅前篇文章。

完整效果展示：

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

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

任务一：

任务二：

任务三：

任务四：

任务五：

任务六：

源代码：

完整效果展示：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

任务一：

任务二：

任务三：

任务四：

任务五：

任务六：

源代码：

完整效果展示：

热门文章

最新文章

相关课程

相关电子书

相关实验场景