实践任务1：利用 HBuilderX制作产品展示模块+实践任务2：利用 HBuilderX制作公司网站首页+实践任务3：利用 HBuilderX制作公司网站首页实现固定侧边菜单-阿里云开发者社区

实践任务1：制作产品展示模块

创建一个产品展示product.html网页，在网页展示推荐产品的信息，包含产品图片、名称和规格说明，网页效果如图所示。本任务利用盒子模型来实现四个产品图的展示，使用盒子模型的属性来设置商品元素的间距和填充等细节。产品展示版块宽度为700px，高度280px，标题高度为50px，图片宽度为150px，高度150px，图片的边框为1px，计算图片与图片之间的间距，使四张图平均分布。

注：可根据个人兴趣，稍作修改

<!DOCTYPE htm
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    a{text-decoration: none;
    color: #000;}
    .product{
      margin: auto;
      width: 700px;
      height: 280;
      border: 1px dotted #d1d1d1;
    }
    .product h2{
      line-height: 50px;
      margin-left: 18px;
    }
    .product li{
      width: 152px;
      font-size: 14px;
      float: left;
      margin-left: 18px;
    }
    .product li img{
      width: 200px;
      height: 360px;
      border: 1px solid #E4E4E4;
    }
    .product li span{
      color:#cc0000;
    }
    </style>
  </head>
  <body>
    <section class="product">
      <h2>产品展示</h2>
      <ul>
        <li><a href="#">
        <img src="img/xsmax.jpg"alt =""/>
            <p>IPhone XS Max<br /><span>发布时间：2018年9月21日</span></p>
        </a></li>
        <li><a href="#">
        <img src="img/12.jpg"alt =""/>
            <p>IPhone 12<br /><span>发布时间：2020年10月14日</span></p>
        </a></li>
        <li><a href="#">
        <img src="img/13.jpg"alt =""/>
            <p>IPhone 13<br /><span>发布时间：2021年9月15日</span></p>
        </a></li><li><a href="#">
        <img src="img/14pro.jpg"alt =""/>
            <p>IPhone 14 Pro<br /><span>发布时间：2022年9月8日</span></p>
        </a></li>
      </ul>
    </section>
  </body>
</html>

运行结果：

实践任务2：制作公司网站首页

公司网站首页包含头部logo、导航栏、图片横幅、网页主体部分和网页底部，其中网页主体部分又包含产品展示、新闻中心和公司简介等信息，网页效果如图所示。本任务要求结合盒子模型，使用文档流、浮动等知识点来实现首页的多行多列布局。

注：可根据个人兴趣，稍作修改

2.html

<!DOCTYPE htm
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    a{text-decoration: none;
    color: #000;}
    .product{
      margin: auto;
      width: 700px;
      height: 280;
      border: 1px dotted #d1d1d1;
    }
    .product h2{
      line-height: 50px;
      margin-left: 18px;
    }
    .product li{
      width: 152px;
      font-size: 14px;
      float: left;
      margin-left: 18px;
    }
    .product li img{
      width: 200px;
      height: 360px;
      border: 1px solid #E4E4E4;
    }
    .product li span{
      color:#cc0000;
    }
    </style>
  </head>
  <body>
    <section class="product">
      <h2>产品展示</h2>
      <ul>
        <li><a href="#">
        <img src="img/xsmax.jpg"alt =""/>
            <p>IPhone XS Max<br /><span>发布时间：2018年9月21日</span></p>
        </a></li>
        <li><a href="#">
        <img src="img/12.jpg"alt =""/>
            <p>IPhone 12<br /><span>发布时间：2020年10月14日</span></p>
        </a></li>
        <li><a href="#">
        <img src="img/13.jpg"alt =""/>
            <p>IPhone 13<br /><span>发布时间：2021年9月15日</span></p>
        </a></li><li><a href="#">
        <img src="img/14pro.jpg"alt =""/>
            <p>IPhone 14 Pro<br /><span>发布时间：2022年9月8日</span></p>
        </a></li>
      </ul>
    </section>
  </body>
</html>

2.css

*{margin: 0;padding: 0;}
body{front-size: 14px;front-family:"微软雅黑";}
a{ text-decoration: none;color: #000000;}
ul{list-style: none;}
header{height: 60px;width: 1170px;margin: 5px auto;}
.logo{float:left;}
.topnav{float:right;}
.topnav li{float:left;}
.topnav li a{ display: block;line-height: 60px;color:#000000;padding: 0 10px;}
nav{
  width: 100%;
    height: 40px;
  background-color: #0072c6;
  

}
    nav ul{
    list-style: none;
      width: 1170px;
    margin: 0 auto;
  }
  nav ul li {
    float:left;
    
  }
  nav ul li a{
    text-decoration: none;
    display:block;
    padding: 0 48px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
  }
  nav ul li a:hover{
    background-color: orange;
  }
.banner{height: 640px; width:1170px;margin: 10px auto;}
.banner img{height:640px;width:1170px;}

main{width:1170px;margin: 10px auto;}
 .product{
          width:725px;
          height: 280px;
                 float: left;
         border-right:#D1D1D1 1px solid;
        }
        .product h2{
          line-height: 50px;
         
        }
        .product li{
          font-size: 14px;
          float:left;
          width: 152px;
          margin-left: 18px;
          
        }
      .product li img{
        width: 200px;
        height: 360px;
        border:1px solid #e4e4e4 ;
      }
            .product li span{
        color:#CC0000;
      }
      .news {
        width: 400px;
        margin-left: 30px;
        float: right;
      }
      .news h2{
        front-size:20px;
        line-height: 50px;
      }
      .news img{
      width: 15px;
      height: 15px;
      }
      .news li{
        line-height: 50px;
        border-bottom: 1px dotted #D1D1D1;
        list-style: url(../img/新闻.jpg)inside;
      }
      .news li:last-child{
        border: none;
      }
      .news li span{
        float: right;
      }
      .news li a{
        color: #000000;
        text-decoration: none;
      }
           .news li a:hover{
         color:#FFA550;
       }
       .about{
          width: 1170px;
        margin:  auto;
        clear: both;
       }
       .about h2{
         margin: 20px 0;
       }
       .about img{
         width: 60px;
         height: 60px;
         float:left;
         border:#0072C6 solid 1px;
         padding: 6px;
         margin-right: 40px;
       }
       .about p {
         text-indent: 2em;
         line-height:40px;
         color: #666666;
         font-size: 14px;
         text-align: justify;
       }
       .about p a{
         font-weight: bold;
         margin: 0 10px;
         
       }
       .about p a:hover {
         text-decoration: underline;
       }
       
footer{
  padding: 40px;
  background-color: #f6f6f6;
}
.footnav{
  width: 1170px;
  margin: 0 auto;
}
.footnav ul{
  width: 1170px;
  height: 40px;
  margin: auto;
}
.footnav li{
  width: 109px;
  float: left;
  text-align: center;
  border-right: 1px solid #d8d8d8;
}
.footnav li:last-child{
  border-right: none;
}
.footnav li a{
  color: #888888;
  
}
.copyright{
  text-align: center;
  color: #888888;
  padding-bottom: 40px;
  margin: 10px auto;
}

运行界面：

实践任务3 公司网站首页实现固定侧边菜单：

在任务2完成的公司网站首页左侧放置一个固定的侧边菜单，显示“意见反馈”超链接和“关注我们”菜单，鼠标停留在“关注我们”上，在其右侧显示二维码图片，页面效果如图所示。

注：可根据个人兴趣，稍作修改

3.html


 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/3.css">
  </head>
  <body>
  <header>
    <div class="logo">
      <img src="../img/苹果logo.jpg" alt="#" width="60" height="60">
      </div>
      <div class="topnav">
        <ul>
          <li>
            <a href="#">手机版</a>
          </li>
          <li>
            <a href="#">收藏本站</a>
          </li>
        </ul> 
      </div>
  </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">产品中心</a></li>
        <li><a href="#">新闻中心</a></li>
        <li><a href="#">人才招聘</a></li>
        <li><a href="#">会员注册</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    <div class="banner">
      <img src="../img/大尺寸苹果.jpeg" ><span>One More Thing<span>
    </div>
    <main> 
      <section class="product">
        <h2>主要产品</h2>
        <ul>
          <li><a href="#">
          <img src="../img/xsmax.jpg"alt =""/>
              <p>IPhone XS Max<br /><span>发布时间：2018年9月21日</span></p>
          </a></li>
          <li><a href="#">
          <img src="../img/12.jpg" alt =""/>
              <p>IPhone 12<br /><span>发布时间：2020年10月14日</span></p>
          </a></li>
          <li><a href="#">
          <img src="../img/13.jpg""alt =""/>
              <p>IPhone 13<br /><span>发布时间：2021年9月15日</span></p>
          </a></li><li><a href="#">
          <img src="../img/14pro.jpg"alt =""/>
              <p>IPhone 14 Pro<br /><span>发布时间：2022年9月8日</span></p>
          </a></li>
        </ul>
      </section>
      <section class="news">
        <h2>新闻中心</h2><a href="#">更多文章</a>
        <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>
        
      </section>
      <section class="about">
        <h2>One More Thing</h2>
        <img src="../img/苹果logo.jpg">
                <p>苹果公司（Apple Inc. ）是美国高科技公司。苹果营收达到3658亿美元，   由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。
        苹果公司1980年12月12日公开招股上市，2012年创下6235亿美元的市值记录，截至2014年6月，苹果公司已经连续三年成为全球市值最大公司。当地时间2020年8月19日，苹果公司市值首次突破2万亿美元。 苹果公司在2016年世界500强排行榜中排名第9名。 [2]  2013年9月30日，在宏盟集团的“全球最佳品牌”报告中，苹果公司超过可口可乐成为世界最有价值品牌。2014年，苹果品牌超越谷歌（Google），成为世界最具价值品牌。2021年《财富》世界500强排行榜第6名。北京时间2022年1月4日凌晨2点45分左右，美国科技巨头苹果的股价达到了182.88美元，市值第一次站上了三万亿美元的台阶，这不仅是全球首个3万亿市值，也相当于全球第五大经济体的GDP体量，仅次于美国、中国、日本及德国。 
        2022年8月31日，苹果隐私主管 Jane Horvath 将离开公司，加入一家律师事务所。 
        据美国《华尔街日报》网站2022年10月22日报道，苹果公司负责工业设计的主管即将离职，这标志着其负责设计iPhone、Mac和其他流行消费产品标志性外观的部门的又一重大人员流失。<a href="#">查看详细
                  <a href="#">查看详情</a></p>
              </section>
    </main>
    <footer>
      <div class="footnav">
        <ul>
          <li><a href="#">公司简介</a></li>
          <li><a href="#">产品中心</a></li>
          <li><a href="#">新闻中心</a></li>
          <li><a href="#">会员注册</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">手机版</a></li>
        </ul>
        </div>
      <div class="copyright">
        Copyright&copy; 信息来源网络 仅供参考；
        </div>
    </footer>
    <div class="sidemenu">
      <ul>
        <li><a href="#"></a>点赞收藏</li>
        <li class="gz">关注动态<img src="../img/二维码1.jpg"></li>
      </ul>
    </div>
  </body>
</html>

3.css

* {
  margin: 0;
  padding: 0;
}

body {
  front-size: 14px;
  front-family: "微软雅黑";
}

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

ul {
  list-style: none;
}

header {
  height: 60px;
  width: 1170px;
  margin: 5px auto;
}

.logo {
  float: left;
}

.topnav {
  float: right;
}

.topnav li {
  float: left;
}

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

nav {
  width: 100%;
  height: 40px;
  background-color: #0072c6;


}

nav ul {
  list-style: none;
  width: 1170px;
  margin: 0 auto;
}

nav ul li {
  float: left;

}

nav ul li a {
  text-decoration: none;
  display: block;
  padding: 0 48px;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
}

nav ul li a:hover {
  background-color: orange;
}

.banner {
  height: 640px;
  width: 1170px;
  margin: 10px auto;
  position: relative;
}

.banner img {
  height: 640px;
  width: 1170px;
}

.banner span {
  font-size: 50px;
  font-weight: bolder;
  color: #0072c6;
  position: absolute;
  top: 100px;
  left: 60px;
}

main {
  width: 1170px;
  margin: 10px auto;
}

.product {
  width: 725px;
  height: 280px;
  float: left;
  border-right: #D1D1D1 1px solid;
  position: relative;
}

.product h2 {
  line-height: 50px;
}

.product>a {
  position: absolute;
  top: 15px;
  right: 30px;
  width: 90px;
  text-align: center;
  line-height: 12px;
  background-color: #0072C6;
  color: #ffffff;
}

.product li {
  font-size: 14px;
  float: left;
  width: 152px;
  margin-left: 18px;
  position: relative;
}

.product strong {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 0 10px;
  background-color: indianred;
  color: #ffffff;
  font-weight: 400;
  font-style: italic;
}

.product li img {
  width: 200px;
  height: 360px;
  border: 1px solid #e4e4e4;
}

.product li span {
  color: #CC0000;
}

.news {
  width: 400px;
  margin-left: 30px;
  float: right;
  position: relative;
}

.news h2 {
  front-size: 20px;
  line-height: 50px;
}

.news>a {
  position: absolute;
  top: 15px;
  right: 0px;
  width: 90px;
  text-align: center;
  line-height: 12px;
  background-color: #0072C6;
  color: #ffffff;
}

.news li {
  line-height: 50px;
  border-bottom: 1px dotted #D1D1D1;
  list-style-image: url("../img/新闻.jpg")
}
}

.news li:last-child {
  border: none;
}

.news li span {
  float: right;
}

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

.news li a:hover {
  color: #FFA550;
}

.about {
  width: 1170px;
  margin: auto;
  clear: both;
}

.about h2 {
  margin: 20px 0;
}

.about img {
  width: 200px;
  height: 200px;
  float: left;
  border: #0072C6 solid 1px;
  padding: 6px;
  margin-right: 40px;
}

.about p {
  text-indent: 2em;
  line-height: 40px;
  color: #666666;
  font-size: 14px;
  text-align: justify;
}

.about p a {
  font-weight: bold;
  margin: 0 10px;

}

.about p a:hover {
  text-decoration: underline;
}
}

footer {
  padding: 40px;
  background-color: #f6f6f6;
}

.footnav {
  width: 1170px;
  margin: 0 auto;
}

.footnav ul {
  width: 1170px;
  height: 40px;
  margin: auto;
}

.footnav li {
  width: 109px;
  float: left;
  text-align: center;
  border-right: 1px solid #d8d8d8;
}

.footnav li:last-child {
  border-right: none;
}

.footnav li a {
  color: #888888;

}

.copyright {
  text-align: center;
  color: #888888;
  padding-bottom: 40px;
  margin: 10px auto;
}

.sidemenu {
  position: fixed;
  top: 50%;
  left: 5px;
  margin-top: -50px;
}

.sidemenu li {
  width: 50px;
  height: 50px;
  background-color: #999;
  color: #ffffff;
  list-style: none;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  border-bottom: dotted #ffffff 1px;
}

.sidemenu li a {
  color: #ffffff;
  text-decoration: none;
}

.sidemenu li:hover {
  cursor: pointer;
  background-color: orange;
}

.gz {
  position: relative;
}

.gz img {
  position: absolute;
  top: 0;
  left: 60px;
  display: none;
}

.gz:hover img {
  display: block;
}

实践任务1：利用 HBuilderX制作产品展示模块+实践任务2：利用 HBuilderX制作公司网站首页+实践任务3：利用 HBuilderX制作公司网站首页实现固定侧边菜单

实践任务1：制作产品展示模块

运行结果：

实践任务2：制作公司网站首页

运行界面：

实践任务3 公司网站首页实现固定侧边菜单：

运行界面：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

实践任务1：利用 HBuilderX制作产品展示模块+实践任务2：利用 HBuilderX制作公司网站首页+实践任务3： 利用 HBuilderX制作公司网站首页实现固定侧边菜单

实践任务1：制作产品展示模块

运行结果：

实践任务2：制作公司网站首页

运行界面：

实践任务3 公司网站首页实现固定侧边菜单：

运行界面：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

实践任务1：利用 HBuilderX制作产品展示模块+实践任务2：利用 HBuilderX制作公司网站首页+实践任务3：利用 HBuilderX制作公司网站首页实现固定侧边菜单