admin管理员组文章数量:1655534
实践任务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© 信息来源于网络 仅供参考
</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© 信息来源网络 仅供参考;
</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制作公司网站首页实现固定侧边菜单 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729704266a1210573.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论