实践任务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;
}
运行界面：
扫一扫
4854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
