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

编程入门行业动态更新时间:2024-10-22 10:48:07

实践任务1：利用 HBuilderX制作产品展示模块+实践任务2：利用 HBuilderX制作公司网站<a href=https://www.elefans.com/category/jswz/34/1769812.html style= 首页+实践任务3：利用 HBuilderX制作公司网站首页实现固定侧边菜单"/>

实践任务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 html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="../css/2.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"></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><ul><li><a href="">苹果测试全新M芯片Mac Pro：处理器性能可达M2 Max四倍<span>2022-10</span></a></li><li><a href="">苹果首席产品设计师将于2023年离职<span>2022-10</span></a></li><li><a href="">iPhone15 Ultra最新消息动态：将采用钛金属外壳<span>2022-10</span></a></li><li><a href="">iPad已经告别了Lightning，iPhone还会远吗？<span>2022-10</span></a></li><li><a href="">2007款未拆封激活的初代iPhone，于日前LCG(伦敦资本集团)拍卖成功<span>2022-10</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></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;
}