admin管理员组文章数量:1655803
任务一:
任务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©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独家栏目 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729703529a1210508.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论