Web小轩：第一次做淘宝主页

最新推荐文章于 2022-12-25 00:00:00 发布
最新推荐文章于 2022-12-25 00:00:00 发布
阅读量2.4k 收藏 73
点赞数 20
分类专栏： html css 网页仿写 文章标签： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyx990404/article/details/93048422
版权
css 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏
网页仿写
1 篇文章 0 订阅
订阅专栏

第一次做淘宝首页

一.页面目标（静态）

在这里插入图片描述
在这里插入图片描述

二.所需知识

（1）html

网页标题，图片
标题文字
在html中引用外部css文件
html标签

h1-- h6：1–6级标题

a：超链接

span：行级元素容器

div：块级元素容器

ul – li：无序列表（前面带黑点）

ol – li：有序列表（可自选排序类型）

img：图片引用

br：换行

p：分段

css选择器

（2）CSS

装饰工具：

padding：内边距（border内）

margin：外边距（border外）

border：边框样式（边框粗细，边框样式，边框颜色）

border-radius：边框圆角（4个参数从左上角逆时针开始依次）

display：容器类型（block（块级），inline（行级），inline-block（行级块），none（不显示））

position：定位（relation（在父级做参照），absolute（子集根据父级的绝对位置），fixed（固定于页面位置，做悬浮窗用））

left，right，top，bottom：与position连用，确定元素位置

float：浮动（一般用于确定两栏，三栏布局，有left，right两个值）

height：容器高度

width：容器宽度

background-color：背景颜色

color：字体颜色

font-size：字体大小

font-weight：字体粗细

line-height：字体上下所占距离

text-align: （参数center可以使文字在容器中左右居中）

vertical-align：一般在含图片的元素中使用，使图片旁的文字与图片底部有一定距离

选择器：（优先级由低到高）

通配符选择器：* （权重0）

标签/伪元素选择器：span，div，img / ::before ::after（权重1）

class选择器：class=“name” .name（权重10）

id选择器：id=“name” #name（权重100）

组合使用时，优先级按所有权重计算和来确定

三.代码过程

（1）网页标题部分

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分：
淘宝网 - 淘！我喜欢
css初始化：（一般企业开发都是引用reset文件做css初始化）
/* 初始化 */
/* padding，margin，字体颜色和字体样式初始化 */
*{
	padding: 0;
	margin: 0;
	color: #123;
	font-family: arial;/* 字体样式 */
}
/* 把ul中li的黑点去掉 */
ul{
	list-style: none;/* 列表样式 */
}
/* 把a标签默认的下划线和蓝色字体去掉 */
a{
	text-decoration: none;/* 文本装饰 */
}

（2）网页上方导航栏

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分
	<!-- 网页上方导航栏 -->
		<div class="wrapper1">
			<div class="content">
				<ul class="box1"><!-- 左侧4个目录 -->
					<li class="select1">
						<a href="#">
							<span>中国大陆</span>
							<img src="xsj.png"/>
						</a>
					</li>
					<li class="select2">
						<a href="#">亲，请登录</a>
					</li>
					<li class="select3">
						<a href="#">免费注册</a>
					</li>
					<li class="select4">
						<a href="#">手机逛淘宝</a>
					</li>
				</ul>
				<ul class="box2"><!-- 右侧4个目录 -->
					<li class="select1">
						<a class="text1" href="#">
							<img src="daohang.png" />
							<span>网址导航</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
					<li class="select2">
						<a href="#">
							<span>联系客服</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
					<li class="select3">
						<a href="#">
							<span>卖家中心</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
					<li class="select4">
						<a href="#">
							<span>商品分类</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
					<li class="select5">
						<a href="#">
							<img class="picture1" src="收藏.png" /><img class="picture2" src="收藏2.png" />
							<span>收藏夹</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
					<li class="select6">
						<a href="#">
							<img src="购物车.png" />
							<span>购物车</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
					<li class="select7">
						<a href="#">
							<span>我的淘宝</span>
							<img class="special" src="xsj.png" />
						</a>
					</li>
				</ul>
			</div>
		</div>
css部分
/* 网页上方导航栏部分 */
/* 最上侧菜单栏底色和高度 */
.wrapper1{
	height: 30px;
	background-color: #f5f5f5;
}
/* 两边留白自适应大小 */
.wrapper1 .content{
	margin: 0 auto;
	height: 30px;
	width: 1200px;
	font-size: 12px;
}
/* 左侧菜单栏项水平展示，设定盒间距离，设定高度 */
.box1 li{
	float: left;
	margin: 0 10px 0 10px;
	height: 30px;
}
/* 左侧文字上下居中 */
.box1 .select2 a,
.box1 .select3 a,
.box1 .select4 a{
	line-height: 30px;
}
/* 鼠标放在a标签上字体变红 */
.box1 .select2 a:hover,
.box1 .select3 a:hover,
.box1 .select4 a:hover{
	color: #f40;
}
/* 特殊设定首个文字效果（因为其a标签中有图片） */
.box1 .select1 a span{
	display: inline-block;
	height: 30px;
	line-height: 30px;
}
/* 设定下箭头图片大小，边距，以及左侧文字相对图片的悬浮位置 */
.box1 .select1 a img{
	padding: 8px 0 7px 0;
	height: 15px;
	width: 15px;
	vertical-align: -11px;
}
/* 右侧菜单栏项水平展示 */
.box2 li{
	float: right;
	margin: 0 10px 0 10px;
	height: 30px;
}
/* 使文字居中 */
.box2 li a span{
	display: inline-block;
	line-height: 30px;	
}
/* 粗设图片大小 */
.box2 li a img{
	height: 10px;
	width: 10px;
}
/* 对于下箭头图片要另设大小和边距 */
.box2 li a .special{
	padding: 8px 0 7px 0;
	height: 15px;
	width: 15px;
	vertical-align: -11px;
}
/* 收藏夹的红色星星图片先不显示 */
.box2 li a .picture2{
	display: none;
}
/* 鼠标放在字上字体变色 */
.box2 li a span:hover{
	color: #f40;
}
/* 鼠标放在a标签上黑星星消失 */
.box2 li a:hover>.picture1{
	display: none;
}
/* 鼠标放在a标签上红星星出现 */
.box2 li a:hover>.picture2{
	display: inline;
}

（3）搜索栏部分

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分
		<!-- 搜索栏部分 -->
		<div class="wrapper2">
			<div class="content">
				<span class="part1"><!-- 淘宝logo部分 -->
					<img src="taobao-logo.png"/>
				</span>
				<!-- <div class="a1">
					<ul>
						<li>&nbsp;宝贝&nbsp;</li>
						<li>&nbsp;天猫&nbsp;</li>
						<li>&nbsp;店铺&nbsp;</li>
					</ul>
				</div> -->
				<span class="part2"><!-- 搜索栏 -->
					<span class="text1"><!-- 搜索栏上方三个选项 -->
						<ul>
							<li><a href="#">宝贝</a></li>
							<li><a href="#">天猫</a></li>
							<li><a href="#">店铺</a></li>
						</ul>
					</span>
					<span class="search">
						<img class="picture1" src="fdj.png" /><!-- 搜索栏前方放大镜图片 -->
						<input/><!-- 搜索栏主体 -->
						<img class="picture2" src="xj.png" /><!-- 搜索栏后方照相机图片 -->
						<span><a href="#">搜索</a></span><!-- 搜索栏后方的"搜索"字 -->
					</span>
					<span class="text2"><!-- 搜索栏下方的商品名 -->
						<ul>
							<li><a href="#">新款连衣裙&nbsp;</a></li>
							<li><a href="#">四件套&nbsp;</a></li>
							<li class="special"><a href="#">潮流T恤&nbsp;</a></li>
							<li><a href="#">时尚女鞋&nbsp;</a></li>
							<li><a href="#">短裙&nbsp;</a></li>
							<li><a href="#">半身裙&nbsp;</a></li>
							<li><a href="#">男士外套&nbsp;</a></li>
							<li><a href="#">墙纸&nbsp;</a></li>
							<li><a href="#">行车记录仪&nbsp;</a></li>
							<li><a href="#">新款男鞋&nbsp;</a></li>
							<li><a href="#">耳机&nbsp;</a></li>
							<li><a href="#">时尚女包&nbsp;</a></li>
							<li><a href="#">沙发&nbsp;</a></li>
						</ul>
					</span>
				</span>
				<span class="part3"><!-- 手机淘宝二维码 -->
					<div>手机淘宝</div>
					<img src="ewm.png"/>
				</span>
			</div>
		</div>
css部分
/* 搜索栏部分 */
/* 为搜索栏部分创建空间 */
.wrapper2{
	height: 120px;
	background-color: #fff;
	overflow: hidden;
}
/* 两边留白自适应大小 */
.wrapper2 .content{
	margin: 0 auto;
	width: 1200px;
	height: 120px;
}
/* 左侧图片容器设置参数 */
.wrapper2 .content .part1{
	float: left;
	display: inline-block;
	padding: 30px 23px 30px 23px;
	width: 144px;
	height: 60px;
}
/* 设置图片参数 */
.wrapper2 .content .part1 img{
	width: 144px;
	height: 60px;
}
/* 设置中间搜索栏部分容器参数 */
.wrapper2 .content .part2{
	display: inline-block;
	height: 100px;
	width: 672px;
	margin-left: 78px;
	padding-top: 20px;
}
/* 设置搜索栏上方文字容器参数 */
.wrapper2 .content .part2 .text1{
	display: inline-block;
	height: 20px;
	width: 652px;
	margin-left: 20px;
	margin-bottom: -4px;/* 去掉span之间默认的4px间距 */
}
/* 设置单个文字容器参数 */
.wrapper2 .content .part2 .text1 ul li{
	float: left;
	display: inline-block;
	height: 20px;
	width: 40px;
}
/* 设置文字样式 */
.wrapper2 .content .part2 .text1 ul li a{
	display: inline-block;
	height: 20px;
	width: 40px;
	line-height: 20px;
	text-align: center;
	font-size: 14px;
	color: #f40;
}
/* 设置鼠标键入后文字样式 */
.wrapper2 .content .part2 .text1 ul li a:hover{
	height: 20px;
	width: 40px;
	color: #fff;
	border-radius: 4px 4px 0 0;
	background-image: linear-gradient(to right,#ff6f06 0,#ff5000 100%);/* 渐变色 */
}
/* 设置中间搜索栏部分容器样式 */
.wrapper2 .content .part2 .search{
	display: inline-block;
	height: 34px;
	width: 640px;
	border: 2px solid #f40;
	border-radius: 17px 17px 17px 17px;
}
/* 设置左侧放大镜图片参数 */
.wrapper2 .content .part2 .search .picture1{
	float: left;
	padding: 7px 0 7px 6px;
	height: 22px;
	width: 22px;
}
/* 设置中间搜索栏样式 */
.wrapper2 .content .part2 .search input{
	float: left;
	margin: 1px 0 1px 0;
	height: 32px;
	width: 500px;
	border: #fff;
}
/* 设置右侧照相机图片参数 */
.wrapper2 .content .part2 .search .picture2{
	padding: 7px 15px 7px 15px;
	height: 22px;
	width: 22px;
}
/* 设置“搜索”文字容器样式 */
.wrapper2 .content .part2 .search span{
	float: right;
	display: inline-block;
	height: 20px;
	padding: 7px 14px 7px 14px;
	background-image: linear-gradient(to right,#ff6f06 0,#ff5000 100%);/* 渐变色 */
	border-radius: 0 15px 15px 0;
}
/* 设置“搜索”文字样式 */
.wrapper2 .content .part2 .search span a{
	line-height: 20px;
	font-size: 16px;
	color: #fff;
}
/* 设置搜索栏下方一排文字容器参数 */
.wrapper2 .content .part2 .text2{
	display: inline-block;
	height: 20px;
	width: 652px;
	margin-left: 20px;
}
/* 文字横置 */
.wrapper2 .content .part2 .text2 ul li{
	float: left;
}
/* 文字大小 */
.wrapper2 .content .part2 .text2 ul li a{
	font-size: 12px;
}
/* 第三个特殊红色 */
.wrapper2 .content .part2 .text2 ul .special a{
	color: #f40;
}
/* 鼠标键入后文字变红 */
.wrapper2 .content .part2 .text2 ul li a:hover{
	color: #f40;
}
/* 设置右侧二维码容器参数 */
.wrapper2 .content .part3{
	float: right;
	margin: 20px 120px 20px 0;
	display: inline-block;
	height: 88px;
	width: 78px;
	text-align: center;
	border: 1px solid #f4f4f4;
}
/* 设置“手机淘宝”文字与其容器参数 */
.wrapper2 .content .part3 div{
	display: inline-block;
	color: #f40;
	font-size: 12px;
	height: 20px;
	width: 52px;
	line-height: 20px;
	text-align: center;
}
/* 设置二维码图片样式 */
.wrapper2 .content .part3 img{
	height: 60px;
	width: 60px;
}

（3）菜单栏部分

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分：
		<!-- 菜单栏部分 -->
		<div class="wrapper3">
			<div class="content">
				<span class="part1">
					<span>主题市场</span>
				</span>
				<span class="part2">
					<ul>
						<li><a href="#" class="a2"><img src="head-out.png" />&nbsp &nbsp天猫&nbsp &nbsp</a></li>
						<li><a href="#" class="a3"><img src="head-out.png" />&nbsp &nbsp聚划算&nbsp &nbsp </a></li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp天猫超市&nbsp &nbsp </a></li>
						<li class="special">&nbsp|&nbsp </li>
						<li><a href="#" class="a3"><img src="head-out.png" />&nbsp &nbsp淘抢购&nbsp &nbsp </a></li>
						<li><a href="#" class="a3"><img src="head-out.png" />&nbsp &nbsp电器城&nbsp &nbsp </a></li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp司法拍卖&nbsp &nbsp </a></li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp中国制造&nbsp &nbsp </a></li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp兴农扶贫&nbsp &nbsp </a></li>
						<li class="special">&nbsp|&nbsp</li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp飞猪旅行&nbsp &nbsp </a></li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp智能生活&nbsp &nbsp </a></li>
						<li><a href="#" class="a4"><img src="head-out.png" />&nbsp &nbsp苏宁易购&nbsp &nbsp </a></li>
						<li>&nbsp <img src="cloud-meetting.gif" /></li><!-- 云栖大会图片 -->
					</ul>
				</span>
			</div>
		</div>
css部分：
/* 菜单栏部分 */
/* 为菜单栏部分创建空间，并设置颜色，设置颜色渐变 */
.wrapper3{
	height: 30px;
	background-color: #ff9000;
	background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
}
/* 两边留白自适应大小 */
.wrapper3 .content{
	margin: 0 auto;
	width: 1200px;
	height: 30px;
}
/* 设置左边“主题市场”部分空间大小，背景颜色和字体中置 */
.wrapper3 .content .part1{
	float: left;
	display: inline-block;
	background-color: #ff5000;
	height: 30px;
	width: 190px;
	text-align: center;
}
/* 设置左边“主题市场”部分字体样式 */
.wrapper3 .content .part1 span{
	width: 190px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}
/* 设置右边部分空间大小 */
.wrapper3 .content .part2{
	display: inline-block;
	height: 30px;
	width: 1010px;
}
/* 横置字体 */
.wrapper3 .content .part2 ul li{
	
	float: left;
	height: 30px;
	line-height: 30px;
	color: #fff;
}
/* 设置右边部分字体样式 */
.wrapper3 .content .part2 ul li a{
	position: relative;
	display: inline-block;
	line-height: 30px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
}
/* 设置鼠标键入显示的图片参数 */
.wrapper3 .content .part2 ul li .a2 img,
.wrapper3 .content .part2 ul li .a3 img,
.wrapper3 .content .part2 ul li .a4 img{
	display: none;
	height: 15px;
	width: 28px;
}

(4)主体功能部分

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分：
<!-- 主体功能部分 -->
<div class="wrapper4">
		<div class="content">
			<!-- part1:"主题市场"导航栏 -->
			<span class="part1">
				<span class="outside">
					<span>
						<a href="#">女装</a> / 
						<a href="#">男装</a> / 
						<a href="#">内衣</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">鞋靴</a> / 
						<a href="#">箱包</a> / 
						<a href="#">配件</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">童装玩具</a> / 
						<a href="#">孕产</a> / 
						<a href="#">用品</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">家电</a> / 
						<a href="#">数码</a> / 
						<a href="#">手机</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">美妆</a> / 
						<a href="#">洗护</a> / 
						<a href="#">保健品</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">珠宝</a> / 
						<a href="#">眼镜</a> / 
						<a href="#">手表</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">运动</a> / 
						<a href="#">户外</a> / 
						<a href="#">乐器</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">游戏</a> / 
						<a href="#">动漫</a> / 
						<a href="#">影视</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">美食</a> / 
						<a href="#">生鲜</a> / 
						<a href="#">零食</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">鲜花</a> / 
						<a href="#">宠物</a> / 
						<a href="#">农资</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">工具</a> / 
						<a href="#">装修</a> / 
						<a href="#">建材</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">家具</a> / 
						<a href="#">家饰</a> / 
						<a href="#">家纺</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">汽车</a> / 
						<a href="#">二手车</a> / 
						<a href="#">用品</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">办公</a> / 
						<a href="#">DIY</a> / 
						<a href="#">五金电子</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">百货</a> / 
						<a href="#">餐厨</a> / 
						<a href="#">家庭保健</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
					<span>
						<a href="#">学习</a> / 
						<a href="#">卡券</a> / 
						<a href="#">本地服务</a>
						<img class="g1" src="right-jt-gr.png"/><img class="g2" src="right-jt-red.png"/>
					</span>
				</span>
			</span>
			<!-- part2:中间图片广告 -->
			<span class="part2">
				<span class="picture1">
					<a href="#"><img src="top-1.jpg" /></a>
				</span>
				<span class="picture2">
					<a href="#"><img src="pic-5.png" /></a>
				</span>
				<span class="picture3">
					<img src="tm.png" />
					<span class="a1">
						&nbsp &nbsp 理想生活上天猫
					</span>
					<span class="a2">
						今日热卖
					</span>
				</span>
				<span class="picture4">
					<a href="#"><img src="logo-1.jpg" /></a>
					<a href="#"><img src="logo-2.jpg" /></a>
					<a href="#"><img src="logo-3.jpg" /></a>
					<a href="#"><img src="logo-4.jpg" /></a>
					<a href="#"><img src="logo-5.jpg" /></a>
					<a href="#"><img src="logo-6.jpg" /></a>
					<a href="#"><img src="logo-7.jpg" /></a>
					<a href="#"><img src="logo-8.jpg" /></a>
					<a href="#"><img src="logo-9.jpg" /></a>
					<a href="#"><img src="logo-10.jpg" /></a>
					<a href="#"><img src="logo-11.jpg" /></a>
					<a href="#"><img src="logo-12.jpg" /></a>
				</span>
				<span class="picture5">
					<a href="#"><img src="pic-6.jpg" /></a>
				</span>
			</span>
			<!-- part3:右侧登陆功能，便捷功能 -->
			<span class="part3">
				<span class="function1">
					<img class="style1" src="tx.png"/>
					<span class="style2">Hi！你好</span>
					<span class="style3"><a href="#"><span class="a1"><img src="jb.png"/></span><span class="a2">领淘金币抵钱</span></a></span>
					<span class="style4"><a href="#"><span class="a1"><img src="hyx.png"/></span><span class="a2">会员俱乐部</span></a></span>
					<span class="style5"><a href="#">登陆</a></span>
					<span class="style6"><a href="#">注册</a></span>
					<span class="style7"><a href="#">开店</a></span>
				</span>
				<span class="function2">
					<a href="#">网上有害信息举报专区&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <img src="point-righ.png" /> </a>
				</span>
				<span class="function3">
					<ul class="up">
						<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>
					<ul class="down">
						<li class="style1"><a href="#">联合国任命马云任数字小组联合主席</a></li>
						<li class="style2"><a href="#">天猫双11全球化时刻</a></li>
						<li class="style2"><a href="#">世界杯球迷生活报告</a></li>
					</ul>
				</span>
				<span class="function4">
					<ul>
						<li class="style1" id="a1"><a href="#">充话费</a></li>
						<li class="style2" id="a2"><a href="#">旅行</a></li>
						<li class="style2" id="a3"><a href="#">车险</a></li>
						<li class="style1" id="a4"><a href="#">游戏</a></li>
						<li class="style1" id="a5"><a href="#">彩票</a></li>
						<li class="style2" id="a6"><a href="#">电影</a></li>
						<li class="style2" id="a7"><a href="#">酒店</a></li>
						<li class="style1" id="a8"><a href="#">理财</a></li>
						<li class="style1" id="a9"><a href="#">找服务</a></li>
						<li class="style2" id="a10"><a href="#">演出</a></li>
						<li class="style2" id="a11"><a href="#">水电煤</a></li>
						<li class="style1" id="a12"><a href="#">火车票</a></li>
					</ul>
				</span>
				<span class="function5">
					<div class="up">
						<h4>
							阿里APP
							<a href>更多 <img class="picture1" src="right-jt-gr.png"/><img class="picture2" src="right-jt-red.png"/></a>
						</h4>
					</div>
					<ul class="down">
						<li><a href="#"><img src="smalllogo1.png" /></a></li>
						<li><a href="#"><img src="smalllogo2.png" /></a></li>
						<li><a href="#"><img src="smalllogo3.png" /></a></li>
						<li><a href="#"><img src="smalllogo4.png" /></a></li>
						<li><a href="#"><img src="smalllogo5.png" /></a></li>
						<li><a href="#"><img src="smalllogo6.png" /></a></li>
						<li><a href="#"><img src="smalllogo7.png" /></a></li>
						<li><a href="#"><img src="smalllogo8.png" /></a></li>
						<li><a href="#"><img src="smalllogo9.png" /></a></li>
						<li><a href="#"><img src="smalllogo10.png" /></a></li>
					</ul>
				</span>
			</span>
            <!-- part4:淘宝头条部分 -->
			<span class="part4">
				<span class="left">
					<img src="tbtt.png" />
					<p>
						让你的生活更有趣
					</p>
				</span>
				<a class="more" href="#">更多 <img class="picture1" src="right-jt-gr.png"/><img class="picture2" src="right-jt-red.png" /></a>
				<div class="right">
					<a href="#">
						<img src="small-mi.png" />
						<span class="a1">【早报】小米今日上市，估值543亿美元</span>
						<span class="a2">爱范儿7月9日早报：小米今日上市，估值543亿美元，公司业务模式惹小米估值争议，逆风而行的小米，股市前途扑朔迷离，机构投资者态度冰火两重天。</span>	
					</a>
				</div>
			</span>
		</div>
	</div>
css部分：
/* 主体功能部分 */
/* 为主体部分创建空间，并设置颜色 */
.wrapper4{
	height: 642px;
	background-color: #f5f5f5;
}
/* 两边留白自适应大小 */
.wrapper4 .content{
	position: relative;
	margin: 0 auto;
	height: 642px;
	width: 1200px;
}
/* part1:"主题市场"导航栏 */
/* 设置导航栏容器参数和边框 */
.wrapper4 .content .part1{
	position: absolute;
	display: inline-block;
	height: 522px;
	width: 188px;
	background-color: #fff;
	border: 1px solid #f40;
}
/* 设置选项容器参数 */
.wrapper4 .content .part1 .outside{
	display: inline-block;
	width: 188px;
	margin: 4px 0;
}
/* 设置美国选项容器参数 */
.wrapper4 .content .part1 .outside span{
	position: relative;
	display: inline-block;
	width: 168px;
	height: 32px;
	line-height: 30px;
	padding-left: 20px;
	padding-right: 0;
}
/* 设置字体 */
.wrapper4 .content .part1 .outside span a{
	display: inline-block;
	font-size: 14px;
	color: #666;
}
/* 设置小箭头图片参数 */
.wrapper4 .content .part1 .outside span img{
	height: 12px;
	width: 6px;
}
/* 鼠标未键入时红箭头不显示 */
.wrapper4 .content .part1 .outside span .g2{
	display: none;
}
/* 鼠标键入后背景改变 */
.wrapper4 .content .part1 .outside span:hover{
	background-color: #ffe4dc;
	color: #ff5000;
}
/* 鼠标键入后字体改变 */
.wrapper4 .content .part1 .outside span a:hover{
	color: #f40;
	text-decoration: underline;
}
/* 鼠标键入后灰色箭头不显示 */
.wrapper4 .content .part1 .outside span:hover>.g1{
	display: none;
}
/* 鼠标键入后红色箭头显示 */
.wrapper4 .content .part1 .outside span:hover>.g2{
	display: inline;
}

/* part2:中间图片广告 */
/* 设置中间图片广告容器参数 */
.wrapper4 .content .part2{
	position: absolute;
	left: 190px;
	display: inline-block;
	margin: 10px;
	width: 695px;
	height: 512px;
}
/* 设置左上角最大图片容器参数 */
.wrapper4 .content .part2 .picture1{
	display: inline-block;
	float: left;
}
/* 设置左上角最大图片参数 */
.wrapper4 .content .part2 .picture1 a img{
	width: 526px;
}
/* 设置右上角图片参数 */
.wrapper4 .content .part2 .picture2 a img{
	float: right;
	padding-bottom: 8px;
}
/* 设置中间天猫图片盒子 */
.wrapper4 .content .part2 .picture3{
	display: inline-block;
	float: left;
	width: 510px;
}
/* 设置"理想生活上天猫"文字参数 */
.wrapper4 .content .part2 .picture3 .a1{
	font-size: 12px;
	color: #666;
	vertical-align: 3px;
}
/* 设置"今日热卖"文字参数 */
.wrapper4 .content .part2 .picture3 .a2{
	position: absolute;
	right: 110px;
	font-size: 12px;
	color: #a1a1a1;
	vertical-align: 3px;
}
/* 设置左下角12宫格图片容器 */
.wrapper4 .content .part2 .picture4{
	display: inline-block;
	width: 526px;
}
/* 设置每张图片参数 */
.wrapper4 .content .part2 .picture4 a img{
	width: 128px;
}


/* part3:右侧登陆功能，便捷功能 */
/* 设置右侧容器参数 */
.wrapper4 .content .part3{
	float: right;
	display: inline-block;
	width: 290px;
	height: 642px;
}
/* 设置登陆功能盒子参数 */
.wrapper4 .content .part3 .function1{
	position: relative;
	display: inline-block;
	width: 290px;
	height: 145px;
	background-image: url(bj.jpg);/* 引用背景图片 */
}
/* 设置你好上方图片参数 */
.wrapper4 .content .part3 .function1 .style1{
	position: absolute;
	top: 8px;
	left: 120px;
}
/* 设置“你好”文字参数 */
.wrapper4 .content .part3 .function1 .style2{
	position: absolute;
	top: 58px;
	left: 120px;
	font-size: 13px;
}
/* 设置中间“领金币”部分容器参数 */
.wrapper4 .content .part3 .function1 .style3{
	position: absolute;
	top: 78px;
	left: 40px;
	height: 18px;
	width: 100px;
	background: #ffe4db;
	border-radius: 10px;
}
/* 设置文字和图片样式 */
.wrapper4 .content .part3 .function1 .style3 .a1{
	vertical-align: -1px;
}
.wrapper4 .content .part3 .function1 .style3 .a2{
	font-size: 13px;
	color: #ff5000;
	line-height: 18px;
	vertical-align: 2px;
}
/* 设置中间“会员俱乐部”部分容器参数 */
.wrapper4 .content .part3 .function1 .style4{
	position: absolute;
	top: 78px;
	left: 160px;
	height: 18px;
	width: 90px;
	background: #ffe4db;
	border-radius: 10px;
}
/* 设置文字和图片样式 */
.wrapper4 .content .part3 .function1 .style4 .a1{
	vertical-align: -3px;
}
.wrapper4 .content .part3 .function1 .style4 .a2{
	font-size: 13px;
	color: #ff5000;
	line-height: 18px;
	vertical-align: 2px;
}
/* 设置“登陆”文字容器样式 */
.wrapper4 .content .part3 .function1 .style5{
	position: absolute;
	top: 108px;
	left: 15px;
	height: 25px;
	width: 92px;
	border-radius: 4px;
    background-image: linear-gradient(to right,#ff5000 0,#ff6f06 100%);
}
/* 设置“登陆”文字样式 */
.wrapper4 .content .part3 .function1 .style5 a{
	float: left;
	height: 25px;
	width: 92px;
	line-height: 25px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
/* 设置“注册”文字容器样式 */
.wrapper4 .content .part3 .function1 .style6{
	position: absolute;
	top: 108px;
	left: 115px;
	height: 25px;
	width: 75px;
	border-radius: 4px;
    background-image: linear-gradient(to right,#ff5000 0,#ff6f06 100%);
}
/* 设置“注册”文字样式 */
.wrapper4 .content .part3 .function1 .style6 a{
	float: left;
	height: 25px;
	width: 75px;
	line-height: 25px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
/* 设置“开店”文字容器样式 */
.wrapper4 .content .part3 .function1 .style7{
	position: absolute;
	top: 108px;
	left: 198px;
	height: 25px;
	width: 75px;
	border-radius: 4px;
    background-image: linear-gradient(to right,#ff5000 0,#ff6f06 100%);
}
/* 设置“开店”文字样式 */
.wrapper4 .content .part3 .function1 .style7 a{
	float: left;
	height: 25px;
	width: 75px;
	line-height: 25px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
/* 设置“举报专区”参数 */
.wrapper4 .content .part3 .function2 a{
	position: relative;
	bottom: 4px;
    padding-left: 82px;
    color: #f40;
    display: block;
    height: 26px;
    line-height: 26px;
    background: #ffe4dd;
    font-size: 12px;
}
/* 设置红色箭头图片参数 */
.wrapper4 .content .part3 .function2 a img{
	height: 12px;
	vertical-align: -3px;
}
/* 设置中间选项栏的容器参数 */
.wrapper4 .content .part3 .function3{
	display: inline-block;
	position: relative;
	bottom: 4px;
	width: 290px;
	height: 98px;
    padding-top: 10px;
	background-color: #fff;
}
/* 设置选项栏上半部分的容器 */
.wrapper4 .content .part3 .function3 .up{
	height: 20px;
}
/* 设置每个选项的容器参数 */
.wrapper4 .content .part3 .function3 .up li{
	float: left;
    line-height: 20px;
    width: 32px;
    text-align: center;
    margin: 0 11px;
}
/* 设置每个容器文字参数 */
.wrapper4 .content .part3 .function3 .up li a{
	display: inline-block;
	height: 20px;
	font-size: 12px;
}
/* 鼠标键入后文字效果 */
.wrapper4 .content .part3 .function3 .up li a:hover{
	font-weight: bold;
	border-bottom: 2px solid #f40;
}
/* 设置选项栏下半部分的容器 */
.wrapper4 .content .part3 .function3 .down{
	margin: 0 15px;
    height: 50px;
    padding-top: 9px;
    padding-bottom: 6px;
}
/* 设置选项栏下半部分第一行文字的容器参数 */
.wrapper4 .content .part3 .function3 .down .style1{
	float: left;
	width: 260px;
	height: 25px;
}
/* 设置选项栏下半部分第一行文字参数 */
.wrapper4 .content .part3 .function3 .down .style1 a{
	line-height: 25px;
	font-size: 12px;
	color: #f40;
}
/* 设置选项栏下半部分第二行文字的容器参数 */
.wrapper4 .content .part3 .function3 .down .style2{
	float: left;
	width: 130px;
	height: 25px;
}
/* 设置选项栏下半部分第二行文字参数 */
.wrapper4 .content .part3 .function3 .down .style2 a{
	line-height: 25px;
	font-size: 12px;
}
/* 鼠标键入后第二行文字效果 */
.wrapper4 .content .part3 .function3 .down .style2 a:hover{
	color: #f40;
}
/* 设置快捷功能块容器参数 */
.wrapper4 .content .part3 .function4{
	position: relative;
	bottom: 8px;
	display: inline-block;
	background-color: #fff;
	width: 290px;
	height: 231px;
	border-top: 1px solid #f4f4f4;
}

/* 设置每个功能容器参数 */
.wrapper4 .content .part3 .function4 ul .style1{
	float: left;
	height: 75px;
	width: 70px;
	font-size: 12px;
	border: 1px solid #f4f4f4;
    border-left-color: transparent;
    border-top-color: transparent;
}
.wrapper4 .content .part3 .function4 ul .style2{
	float: left;
	height: 75px;
	width: 71px;
	font-size: 12px;
	border: 1px solid #f4f4f4;
	border-left-color: transparent;
	border-top-color: transparent;
}
/* 设置每个功能文字参数 */
.wrapper4 .content .part3 .function4 ul li a{
	padding-top: 43px;
    text-align: center;
    display: block;
	background-image: url(pic.png);
	background-repeat: no-repeat;
}
/* 确定背景图片的位置 */
.wrapper4 .content .part3 .function4 ul #a1 a{
	background-position: 22px 14px;
}
.wrapper4 .content .part3 .function4 ul #a2 a{
	background-position: 22px -72px;
}
.wrapper4 .content .part3 .function4 ul #a3 a{
	background-position: 22px -28px;
}
.wrapper4 .content .part3 .function4 ul #a4 a{
	background-position: 22px -115px;
}
.wrapper4 .content .part3 .function4 ul #a5 a{
	background-position: 22px -162px;
}
.wrapper4 .content .part3 .function4 ul #a6 a{
	background-position: 22px -206px;
}
.wrapper4 .content .part3 .function4 ul #a7 a{
	background-position: 22px -250px;
}
.wrapper4 .content .part3 .function4 ul #a8 a{
	background-position: 22px -292px;
}
.wrapper4 .content .part3 .function4 ul #a9 a{
	background-position: 22px -338px;
}
.wrapper4 .content .part3 .function4 ul #a10 a{
	background-position: 22px -382px;
}
.wrapper4 .content .part3 .function4 ul #a11 a{
	background-position: 22px -424px;
}
.wrapper4 .content .part3 .function4 ul #a12 a{
	background-position: 22px -468px;
}
/* 鼠标键入后文字效果 */
.wrapper4 .content .part3 .function4 ul li a:hover{
	color: #f40;
}
/* 鼠标键入后边框效果 */
.wrapper4 .content .part3 .function4 ul li:hover{
	border: 1px solid #f40;
}
/* 设置快捷APP部分容器参数 */
.wrapper4 .content .part3 .function5{
	position: relative;
	bottom: 12px;
	display: inline-block;
	background-color: #fff;
	padding-top: 1px;
	width: 290px;
	height: 110px;
}
/* 设置上半部分文字的容器参数 */
.wrapper4 .content .part3 .function5 .up{
	position: relative;
}
/* 设置"阿里APP"文字参数 */
.wrapper4 .content .part3 .function5 .up h4{
	position: relative;
	font-size: 14px;
    padding-left: 14px;
    height: 30px;
    line-height: 30px;
}
/* 设置"更多"文字参数 */
.wrapper4 .content .part3 .function5 .up h4 a{
	position: absolute;
    right: 10px;
    font-size: 12px;
    font-weight: normal;
}
/* 设置灰色箭头图片参数 */
.wrapper4 .content .part3 .function5 .up h4 a img{
	height: 10px;
	width: 6px;
}
/* 鼠标未键入时红色箭头图片不显示 */
.wrapper4 .content .part3 .function5 .up h4 a .picture2{
	display: none;
}
/* 鼠标键入时文字变红 */
.wrapper4 .content .part3 .function5 .up h4 a:hover{
	color: #f40;
}
/* 鼠标键入时灰色箭头图片不显示 */
.wrapper4 .content .part3 .function5 .up h4 a:hover>.picture1{
	display: none;
}
/* 鼠标键入时红色箭头图片显示 */
.wrapper4 .content .part3 .function5 .up h4 a:hover>.picture2{
	display: inline;
}
/* 设置下半部分文字的容器参数 */
.wrapper4 .content .part3 .function5 .down{
	position: relative;
	padding-left: 23px;
    height: 84px;
}
/* 设置每个小图标容器参数 */
.wrapper4 .content .part3 .function5 .down li{
	position: relative;
	float: left;
	width: 32px;
    height: 32px;
    margin-right: 21px;
    margin-bottom: 8px;
}
/* 设置每个小图标参数 */
.wrapper4 .content .part3 .function5 .down li img{
	width: 32px;
    height: 32px;
}

/* part4:淘宝头条部分 */
/* 设置淘宝头条部分容器参数 */
.wrapper4 .content .part4{
	position: relative;
	top: 524px;
	float: left;
	display: inline-block;
	background-color: #fff;
	margin-top: 10px;
	width: 867px;
	height: 73px;
	padding-top: 8px;
	padding-bottom: 7px;
	padding-left: 15px;
	padding-right: 14px;
}
/* 设置左侧部分容器参数 */
.wrapper4 .content .part4 .left{
	display: inline-block;
	height: 73px;
	width: 180px;
	vertical-align: 8px;
}
/* 设置左侧侧部分图片参数 */
.wrapper4 .content .part4 .left img{
	width: 180px;
}
/* 设置左侧侧部分文字参数 */
.wrapper4 .content .part4 .left p{
	width: 180px;
	height: 26px;
	font-size: 12px;
	color: #999;
	text-align: center;
}
/* 设置右侧"更多"参数 */
.wrapper4 .content .part4 .more{
	position: absolute;
	display: inline-block;
	top: 14px;
	right: 16px;
	font-size: 12px;
	line-height: 20px;
	width: 40px;
	color: #999;
    font-weight: 400;
    text-align: right;
}
.wrapper4 .content .part4 .more img{
	height: 10px;
	width: 6px;
}
.wrapper4 .content .part4 .more .picture2{
	display: none;
}
.wrapper4 .content .part4 .more:hover{
	color: #f40;
}
.wrapper4 .content .part4 .more:hover>.picture1{
	display: none;
}
.wrapper4 .content .part4 .more:hover>.picture2{
	display: inline;
}
/* 设置右侧部分容器参数 */
.wrapper4 .content .part4 .right{
	position: relative;
	display: inline-block;
	height: 73px;
	width: 676px;
}
.wrapper4 .content .part4 .right a{
	display: inline-block;
	height: 73px;
}
/* 设置右侧部分图片参数 */
.wrapper4 .content .part4 .right a img{
	width: 130px;
	height: 73px;
}
/* 设置右侧部分标题文字参数 */
.wrapper4 .content .part4 .right a .a1{
    display: inline-block;
	color: #333;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    font-weight: 500;
	vertical-align: 55px;
}
/* 设置右侧部分正文文字参数 */
.wrapper4 .content .part4 .right a .a2{
    position: absolute;
	bottom: 4px;
	display: inline-block;
    float: left;
	margin-left: 135px;
	color: #999;
    height: 36px;
    line-height: 18px;
    font-size: 12px;
}

（5）"生活研究所"部分

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分：
	<!-- "生活研究所"部分 -->
	<div class="wrapper5">
		<div class="content">
			<div class="title">
				<span class="part1"><img src="life.png"/></span>
				<span class="part2">发现属于你的生活方式</span>
			</div>
			<div class="include">
				<a class="special1" href="#">
					<span class="picture"><img src="thing1.png"/></span>
					<h5>码农style</h5>
					<span class="text1">码农生存指南</span>
					<span class="heart">❤</span>
					<span class="text2">人气126170</span>
				</a>
				<a href="#">
					<span class="picture"><img src="thing2.png"/></span>
					<h5>收纳控</h5>
					<span class="text1">吹毛求疵没错</span>
					<span class="heart">❤</span>
					<span class="text2">人气86120</span>
				</a>
				<a href="#">
					<span class="picture"><img src="thing3.png"/></span>
					<h5>就是爱乐人</h5>
					<span class="text1">无音乐无生活</span>
					<span class="heart">❤</span>
					<span class="text2">人气102415</span>
				</a>
				<a href="#">
					<span class="picture"><img src="thing4.png"/></span>
					<h5>趣玩先锋</h5>
					<span class="text1">怪有意思的</span>
					<span class="heart">❤</span>
					<span class="text2">人气453254</span>
				</a>
				<a href="#">
					<span class="picture"><img src="thing5.png"/></span>
					<h5>户外运动控</h5>
					<span class="text1">一直在路上</span>
					<span class="heart">❤</span>
					<span class="text2">人气1397325</span>
				</a>
				<a class="special2" href="#">
					<span class="picture"><img src="thing6.png"/></span>
					<h5>雅致生活控</h5>
					<span class="text1">过我要的生活</span>
					<span class="heart">❤</span>
					<span class="text2">人气120644</span>
				</a>
			</div>
		</div>
	</div>
css部分：
/* "生活研究所"部分 */
/* 为该部分创建空间，并设置颜色 */
.wrapper5{
	height: 180px;
	background-color: #f5f5f5;
}
/* 两边留白自适应大小 */
.wrapper5 .content{
	position: relative;
	margin: 0 auto;
	height: 180px;
	width: 1200px;
	background-color: #fff;
}
/* 标题部分 */
.wrapper5 .content .title{
	padding: 15px 15px 0 15px;
	height: 25px;
	width: 1170px;
}
.wrapper5 .content .title .part1{
	display: inline-block;
	height: 25px;
	width: 95px;
}
.wrapper5 .content .title .part1 img{
	height: 25px;
	width: 95px;
}
/* 商品展示部分 */
.wrapper5 .content .title .part2{
	display: inline-block;
	height: 25px;
	width: 1064px;
	line-height: 25px;
	font-size: 12px;
	color: #666;
	margin-left: 6px;
	vertical-align: 9px;
}
.wrapper5 .content .include{
	padding: 15px 15px 10px 15px;
	height: 105px;
	width: 1170px;
}
.wrapper5 .content .include a{
	position: relative;
	display: inline-block;
	margin: 0 3px 0 3px;
	height: 105px;
	width: 185px;
}
.wrapper5 .content .include .special1{
	margin: 0 3px 0 0;
}
.wrapper5 .content .include .special2{
	margin: 0 0 0 3px;
}
.wrapper5 .content .include a .picture{
	display: inline-block;
	height: 103px;
	width: 103px;
	border: 1px solid mediumturquoise;
	border-radius: 50px;
}
.wrapper5 .content .include a .picture img{
	padding: 14px;
	height: 74px;
	width: 74px;
}
.wrapper5 .content .include a h5{
	position: absolute;
	display: inline-block;
	padding: 5px 0 5px 0;
	width: 70px;
	height: 20px;
}
.wrapper5 .content .include a .text1{
	position: absolute;
	top: 30px;
	display: inline-block;
	padding: 5px 0 5px 0;
	width: 75px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	color: #666;
}
.wrapper5 .content .include a .heart{
	position: absolute;
	top: 60px;
	display: inline-block;
	padding: 5px 0 5px 0;
	height: 20px;
	width: 15px;
	color: mediumaquamarine;
}
.wrapper5 .content .include a .text2{
	position: absolute;
	top: 60px;
	right: 0;
	display: inline-block;
	padding: 5px 0 5px 0;
	width: 60px;
	line-height: 20px;
	font-size: 14px;
	color: #666;
}

（6）侧面悬浮窗部分

目标：

在这里插入图片描述

实现：

在这里插入图片描述

html部分：
	<!-- 侧面悬浮窗部分 -->
	<div class="wrapper6">
		<span><img src="baba1.png" /></span>
		<div class="content">
			<a class="special1" href="#">爱逛<br>好货</a>
			<a class="special2" href="#">好店<br>直播</a>
			<a class="special3" href="#">品质<br>特色</a>
			<a class="special4" href="#">实惠<br>热卖</a>
			<a class="special5" href="#">猜你<br>喜欢</a>
			<a class="special6" href="#">顶部</a>
			<a class="special7" href="#">反馈</a>
			<a class="special8" href="#">暴恐<br>举报</a>
		</div>
	</div>
css部分：
/* 侧面悬浮窗部分 */
.wrapper6{
	position: fixed;
	top: 220px;
	left: 1365px;
	height: 400px;
	width: 50px;
}

.wrapper6 span{
	position: relative;
	display: inline-block;
	top: 4px;
	height: 20px;
    width: 50px;
    line-height: 20px;
    text-align: center;
}

.wrapper6 .content{
	height: 400px;
	width: 50px;
	background-color: #fff;
	border-radius: 9px;
}

.wrapper6 .content a{
	position: relative;
	display: inline-block;
	width: 34px;
	height: 44px;
	padding: 6px 8px 0 8px;
	text-align: center;
	font-size: 13px;
}

.wrapper6 .content a:hover{
	color: #fff;
	background-image: linear-gradient(to right,#ff6f06 0,#ff5000 100%);
}
/* 用伪元素显示每两个框之间的线 */
.wrapper6 .content .special2::after,
.wrapper6 .content .special3::after,
.wrapper6 .content .special4::after,
.wrapper6 .content .special5::after,
.wrapper6 .content .special6::after,
.wrapper6 .content .special7::after{
	content: '';
    border-bottom: 1px solid #efefef;
    width: 34px;
    position: absolute;
    left: 8px;
    bottom: -1px;
}
/* 设置每个框中的文字颜色 */
.wrapper6 .content .special1{
	color: #fff;
	border-radius: 9px 9px 0 0;
	background-image: linear-gradient(to right,#ff6f06 0,#ff5000 100%);
}
.wrapper6 .content .special2{
	color: #f05;
}
.wrapper6 .content .special3{
	color: #8d7afb;
}
.wrapper6 .content .special4{
	color: #A8C001;
}
.wrapper6 .content .special5{
	color: #f40;
}
.wrapper6 .content .special6,
.wrapper6 .content .special7{
	line-height: 34px;
}
.wrapper6 .content .special8{
	border-radius: 9px 9px 0 0;
}

.wrapper6 .content .special8:hover{
	color: #fff;
	background-image: linear-gradient(to right,#ff6f06 0,#ff5000 100%);
	border-radius: 0 0 9px 9px;
}

四.整体实现效果

在这里插入图片描述
在这里插入图片描述

五.总结与体会

​本次淘宝网页书写从学习基础知识到最后完成历时3周，在前两周的学习中html和css中有许多需要牢记的功能和用法，当时记得不太明确，但经过这一项目后，我不仅熟悉了一些基本标签和css语句的用法，还对盒模型有了更深刻的认识：其实html就是为网页提供了一个架子和基本图片文字，css就是对这些框架图片文字进行装饰，经典的两栏，三栏排布在练习中也有了理解。

​刚开始写网页时，面对空空如也的网页，真的不知道该怎么入手，盒子的安排、摆放在脑子里是混乱的。就这样我第一次误打误撞写好了第一部分导航栏，虽然仍不清楚其中原理，但心里还是很开心的，犯过的错误在之后的网页仿写中都成了宝贵的经验。在写“生活研究所”部分时，我已经能较为合理地安排元素之间的位置关系了，在全部页面写完的那一刻，成就感爆棚，可是我知道这页面还有很多不足，所以我回头改了改最开始两部分的代码，不改不知道，开始写得是真烂，盒子之间纵横交错，有些元素根本没有被盒子包住，孤零零地在那放着。现在我放上的前两部分代码都是经过优化的，但中间广告部分的代码依旧很乱，由于该模块太大，就没有二次改动。

​凡事第一次都是困难的，不知所措的，但只要坚持下去，硬着头皮做完，就一定会有收获。代码一定要自己敲一遍，这样收获到的才是自己的，是别人拿不走的。

​本人也是第一次学，有些写得仍有不全面和错误的地方，希望大家可以指出，共同进步。接下来我还要尝试对淘宝网仿写优化以及其他网站的仿写。

小轩轩12138
关注
  • 20
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果图。)没有任何插件，资源里有图片素材和全部代码文件，解压后即可运行页面。用到的知识点主要有html课程种常见的标签，span、ul li、a、img、span、div等标签。css样式修饰用到最多的是绝对定位和相对定位，边框修饰，文字修饰，颜色美化等。js用了100多行代码做了一个轮播图效果。 简单总结： 1.没有看过做成效果图的先看我的博客。 2.web大多常用的知识点都以用上 3.该资源解压即可运行 4.js属于扩展内容 5.代码量html文件24k+css文件19k共43k大小
仿淘宝首页html
02-26
仿淘宝网首页的源代码，很漂亮，可以用于html学习、使用等
Web程序开发：第2章 HTML概述.ppt
06-17
Web程序开发：第2章 HTML概述.ppt
基于web的类淘宝网站的设计.zip
12-18
这是本人的期末课设做的类淘宝网站的移动电商的设计与开发，基本实现了登录界面、注册页、首页、子页面以及各页面之间的跳转功能，下载即可运行，支持IE、谷歌等浏览器
类似淘宝网站Web小项目源码
10-26
类似于淘宝网站的一个web小项目，前端JQuery，后台Spring+Ibatis+mysql,项目管理Maven，数据库Mysql，部分核心代码有注释
Android注册登录以及更改密码+淘宝手机客户端的实现
01-26
1.实现登录页面： 1.1 注册用户 1.2 登录用户 1.3 注销用户 1.4 更改密码 2.淘宝界面
淘宝首页的HTML以及CSS技术点
u011280778的博客
11-05 2027
1、 一个网页的开发流程 内容结构，比如js、css 页面结构。自上而下，从左往右。（内容、颜色块、间距、边框） 2、 line-height的5种设置方式及区别 normal || 1.5 || 150% || 50px || 5em 初始化元素的时候，一般使用 line-height: 1.5 这种方式，它区别于其它四种方式的 根本原因在于元素继承后的计算方式 比如body初始化为 body{font-size: 14px; line-height: 1.5} 则body里的元素都会
菜鸟学web---类似淘宝的登陆界面
haopangang的博客
10-19 6272
功能介绍：该页面只是在浏览器端判断是否输入的字符是否符合要求，没有经过数据库。当点击文本框时，会有提示，输入完成后也会看是否正确，后面也会跟着一些提示。界面如下： 输入用户名或者密码时： 其中所用到的知识：简单的html 、css 和javascript， 在javascript中使用到了Javascript的正则表达式。（以后文章会写一些简单的正则表达式）html代码：<!DOCT
web类似于淘宝购物页面
dieqi6794的博客
08-25 1751
花了一下午的时间写出来的简易页面，内容很粗糙，但里边包含了我独特的想法。由于是初学者，写的可能不好，希望大家多多提出意见。 这个是主程序 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>淘宝首页</title> <script ...
Web前端设计与开发课程设计：简易淘宝网页设计
m0_64198455的博客
12-25 4706
本项目使用HTML5、CSS、javascript、jQuery技术，实现了淘宝网站的简易网页设计。项目设计具体的功能有登录、注册、动画播放和基本的页面跳转等。
淘宝静态网站首页仿写html+css，个人作业，
01-20
个人制作的部分淘宝网页，包括两个自创的子页面登陆和注册，不喜勿喷，谢谢！
使用Nickel开发Web应用：从第一行代码到Heroku部署
02-26
摘要：Nickel是一个用Rust编写的Web应用服务器，本文介绍了用Nickel写一个简单的Web应用程序，再把它部署到Heroku。偶尔会有一些人咨询Nickel项目，想要在深入之前看一些真实的Nickel代码，简单说，Nickel是一个用...
personal-website:第一次涉足Web开发
03-20
我的个人网站：ocf.io/timtucker 我的第一个网络开发冒险：从零开始建立的个人网站，使我可以使用HTML，CSS，Bootstrap，PHP和JS / JQuery开发技能
MHW1:第一次家庭作业-Unict-Web编程
03-27
MHW1 第一次家庭作业-Unict-Web编程
fullStackProdApp：我第一次涉足全栈Web开发
02-12
fullStackProdApp：我第一次涉足全栈Web开发
spring java图片上传源码.rar
最新发布
04-26
源码实现了图片上传功能，可供相关功能开发的小伙伴参考学习使用。
新入职员工工作总结范文大全(篇).docx
04-26
工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。
本项目内容为《SpringBoot 2.X 基础教程》配套源码.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
IMG_20240426_195457.jpg
04-26
IMG_20240426_195457.jpg
web页第一次请求，如何创建IndexedDB和使用
03-21
IndexedDB 是 HTML5 中的一种本地数据库，可以在客户端存储大量数据，以提高应用程序的性能和响应速度。在 web 页面第一次请求时，可以使用以下代码创建 IndexedDB 并使用它： // 打开或创建名为 myDatabase 的 IndexedDB 数据库 var request = window.indexedDB.open("myDatabase", 1); // 如果数据库打开成功 request.onsuccess = function(event) { var db = event.target.result; // 创建一个名为 myObjectStore 的对象存储 var objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" }); // 添加一些数据到对象存储中 objectStore.add({ id: 1, name: "John" }); objectStore.add({ id: 2, name: "Jane" }); // 在控制台输出数据 objectStore.getAll().onsuccess = function(event) { console.log(event.target.result); }; }; // 如果数据库打开失败 request.onerror = function(event) { console.log("Database error: " + event.target.errorCode); };

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值