实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目

最新推荐文章于 2022-12-12 11:17:48 发布

听风者i

最新推荐文章于 2022-12-12 11:17:48 发布

阅读量996

点赞数 7

分类专栏： HBuilderX 文章标签： css 前端 web html 1024程序员节

本文链接：https://blog.csdn.net/weixin_67632468/article/details/127701168

版权

HBuilderX 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

任务一：

任务1:建立站点并完成页面整体布局
任务2:制作网页头部和导航
任务3:制作banner和最新更新栏目
任务4:制作苹果之家栏目
任务5:制作Apple独家栏目
任务6:制作底部版权区域与CSS代码优化
注:代码统一并在本文章末尾展示

任务二：

本任务要求制作苹果官方网站的头部和导航部分，效果如图所示：
在这里插入图片描述
注：分析苹果官方网站的头部效果，网页的头部分为上下两行。第一行通栏显示，其内容居中显示，内部包含欢迎词和菜单两个模块，第二行内容是也居中显示，内部包含logo和搜索框两模块，logo中包含图片、标题和文本；搜索框模块中包含一个单行文本框和一个按钮。

任务三：

制作banner和最新更新栏目，效果如图：
本任务要求制作传统文化网站的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&copy;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代码中作显示修改。如有调试问题可翻阅前篇文章。

完整效果展示：

在这里插入图片描述
注：声明：本网站文章图片均来源于网络转载，如有侵犯版权权益，请告知我们并予以删除。

听风者i

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
2
评论
实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目

实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
复制链接

扫一扫