练习---仿品优购项目

于 2021-06-09 16:46:21 发布
阅读量376 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： HTML CSS 文章标签： html html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/117747847

购物项目

搭建工作

1.需要创建如下文件夹
名称说明
项目文件夹shopping
样式类图片文件夹images
样式文件夹css
产品类图片文件夹upload
字体类文件夹fonts
脚本文件夹js
2.创建如下文件
名称说明
首页index.html
CSS初始化样式文件base.css
CSS公共样式文件common.css

index文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>游戏购</title>
		<!-- 引入初始化样式文件 -->
		<link rel="stylesheet" href="css/base.css"/>
		<!-- 引入公共的样式文件 -->
		<link rel="stylesheet" href="css/common.css"/>
	</head>
	<body>
	</body>
</html>

base文件

/* 所有标签的内外边距清零 */
* {
	margin:0;
	padding:0;
	/* CSS3盒子模型 */
	box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,i {
	font-style:normal
}
/* 去掉li的小圆点 */
li {
	list-style:none/* 所有标签的内外边距清零 */
* {
	margin:0;
	padding:0;
	/* CSS3盒子模型 */
	box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,i {
	font-style:normal
}
/* 去掉li的小圆点 */
li {
	list-style:none
}
img {
	/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
	border:0;
	/* 取消图片底侧有空白缝隙的问题 */
	vertical-align:middle
}
button {
	/* 当我们鼠标经过button的时候，鼠标变成小手 */
	cursor:pointer
}
a {
	color:#666;
	text-decoration:none
}
a:hover {
	color:#c81623
}
button,input {
	/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
	font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
	/* 默认有灰色边框我们需要手动去掉 */
	border: 0;
	outline: none;
}
body {
	/* CSS3 抗锯齿形 让文字显示更加清晰 */
	-webkit-font-smoothing:antialiased;
	background-color:#fff;
	font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
	color:#666
}
.hide,.none {
	display:none
}
/* 清除浮动 */
.clearfix:after {
	visibility:hidden;
	clear:both;
	display:block;
	content:".";
	height:0
}
.clearfix {
	*zoom:1
}
}
img {
	/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
	border:0;
	/* 取消图片底侧有空白缝隙的问题 */
	vertical-align:middle
}
button {
	/* 当我们鼠标经过button的时候，鼠标变成小手 */
	cursor:pointer
}
a {
	color:#666;
	text-decoration:none
}
a:hover {
	color:#c81623
}
button,input {
	font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
body {
	-webkit-font-smoothing:antialiased;
	background-color:#fff;
	font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
	color:#666
}
.hide,.none {
	display:none
}
/* 清除浮动 */
.clearfix:after {
	visibility:hidden;
	clear:both;
	display:block;
	content:".";
	height:0
}
.clearfix {
	*zoom:1
}

网站favicon图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上，目前主要的浏览器都支持favicon.ico图标。

制作favicon图标

  1. 把图标切成png图片
  2. 把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http//www.bitbug.net/
<!-- 制作完成后引入即可 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>游戏购</title>
		<!-- favicon图标 -->
		<link rel="shortcut icon" href="images/favicon.png"/>
		<!-- 引入初始化样式文件 -->
		<link rel="stylesheet" href="css/base.css"/>
		<!-- 引入公共的样式文件 -->
		<link rel="stylesheet" href="css/common.css"/>
	</head>
	<body>
	</body>
</html>

网站TDK三大标签SEO优化

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进行在搜索引擎上提升网站的排名，提高网站的知名度

页面必须有三个标签用来符合SEO优化

title网站标题

title具有不可代替性，是我们页内的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点

建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

例如：

  1. 京东（JD.COM）-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  2. 小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站
description网站说明

简要说明我们网站主要是做什么的

我们提倡，description作为网站的总体业务和主题概括，多采用“我们是……”、“我们提供……”、“XXX网作为……”、“电话：010……”之类的语句。

例如：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" />
keywords关键字

keywords是页面关键字，是搜索引擎的关注点之一

最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式。

例如：

<meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表，存储卡，京东" />

例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>游戏购-游戏网购首选-正品低价、品质保障、发货及时、轻松购物！</title>
		<!-- 网站说明 -->
		<meta name="description" content="游戏购商城-专业的游戏购买商城,销售各种类型的游戏,不管是单机大作,独立游戏还是小游戏,应有尽有,
		更有国内外多家厂商等数万个品质优秀的游戏,便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
		<!-- 关键字 -->
		<meta name="Keywords" content="网上购物,网上商城,游戏,单机游戏,网络游戏,独立游戏,小游戏,游戏购"/>
		<!-- 引入favicon图标 -->
		<link rel="shortcut icon" href="images/favicon.png"/>
		<!-- 引入初始化样式文件 -->
		<link rel="stylesheet" href="css/base.css"/>
		<!-- 引入公共的样式文件 -->
		<link rel="stylesheet" href="css/common.css"/>
	</head>
	<body>
	</body>
</html>

常用模块类名命名

以下是我们约定的命名模块，直接使用以下类名即可

名称说明
快捷导航栏shortcut
头部header
标志logo
购物车shoppcar
搜索search
热点词hotwrods
导航nav
导航左侧dropdown 包含 .dd .dt
导航右侧navitems
页面底部footer
页面底部服务模块mod_service
页面底部帮助模块mod_help
页面底部版权模块mod-copyright

快捷导航模块

<!-- 快捷导航模块 -->
		<section class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>游戏购欢迎您！&nbsp;</li>
						<li>
							<a href="#">请登录</a> &nbsp; <a href="#" class="style_red">免费注册</a>
						</li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li>我的订单</li>
						<li></li>
						<li class="arrow-ico">我的游戏购</li>
						<li></li>
						<li>游戏购会员</li>
						<li></li>
						<li>游戏采购</li>
						<li></li>
						<li class="arrow-ico">关注游戏购</li>
						<li></li>
						<li class="arrow-ico">客户服务</li>
						<li></li>
						<li class="arrow-ico">网站导航</li>
					</ul>
				</div>
			</div>

/* 声明字体 */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?sxfsk7');
  src:  url('../fonts/icomoon.eot?sxfsk7#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?sxfsk7') format('truetype'),
    url('../fonts/icomoon.woff?sxfsk7') format('woff'),
    url('../fonts/icomoon.svg?sxfsk7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 版心 */
.w {
	width: 1200px;
	margin: 0 auto;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.style_red {
	color: #C81623;
}
/* 快捷导航模块 */
.shortcut {
	height: 31px;
	line-height: 31px;
	background-color: #f1f1f1;
}
.shortcut ul li {
	float: left;
}
/* 选择所有的偶数的小li */
.shortcut .fr ul li:nth-child(even) {
	width: 0.5px;
	height: 12px;
	background-color: #666;
	margin: 9px 15px 0;
}
.arrow-ico::after {
	content: '\e900';
	font-family: 'icomoon';
	margin-left: 6px;
}

header模块

  1. header盒子必须要有高度

  2. 1号盒子是logo标志定位

  3. 2号盒子是search搜索模块定位

  4. 3号盒子是hotwrods热词模块定位

  5. 4号盒子是shopcar购物车模块

    count统计部分用绝对定位做

    count统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度

    一定注意左下角不是圆角，其余三个是圆角 写法：border-radius：7px 7px 7px 0；

LOGO SEO 优化

  1. logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

  2. h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可

  3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来

    方法1：text-indent移到盒子外面（text-indent：-9999px），然后overflow：hidden，淘宝的做法

    方法2：直接给font-size：0；就看不到文字了，京东的做法

  4. 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

<!-- Logo模块 -->
			<div class="logo">
				<h1>
					<a href="index.html" title="游戏购商城">游戏购商城</a>
				</h1>
			</div>

.logo {
	position: absolute;
	top: 25px;
	width: 171px;
	height: 61px;
	/* background-color: skyblue; */
}
.logo a {
	display: block;
	width: 171px;
	height: 61px;
	background: url(../images/logo.png) no-repeat;
	/* 京东做法 */
	font-size: 0;
	/* 淘宝的做法让文字隐藏 */
/* 	text-indent: -9999px;
	overflow: hidden; */
}
搜索模块
<!-- search搜索模块 -->
			<div class="search">
				<input type="search" name="" id="" placeholder="低价特惠">
				<button>搜索</button>
			</div>

.search {
	position: absolute;
	left: 346px;
	top: 25px;
	width: 538px;
	height: 36px;
	border: 2px solid #b1191a;
}
.search input {
	float: left;
	width: 454px;
	height: 32px;
	padding-left: 10px;
}
.search button {
	float: left;
	width: 80px;
	height: 32px;
	background-color: #b1191a;
	font-size: 16px;
	color: #fff;
}
热词模块
<!-- hotwords模块 -->
			<div class="hotwords">
				<a href="#" class="style_red">优惠购首发</a>
				<a href="#">亿元优惠</a>
				<a href="#">9.9元团购</a>
				<a href="#">每满99减30</a>
				<a href="#">游戏周边</a>
				<a href="#">电脑</a>
				<a href="#">外设</a>
			</div>

.hotwords {
	position: absolute;
	top: 66px;
	left: 346px;
}
.hotwords a {
	margin: 0 10px;
}
购物车模块
<!-- 购物车模块 -->
			<div class="shopcar">
				我的购物车
				<i class="count">8</i>
			</div>

.shopcar {
	position: absolute;
	right: 60px;
	top: 25px;
	width: 140px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border: 1px solid #dfdfdf;
	background-color: #f7f7f7;
}
.shopcar::before {
	content: '\e93a';
	font-family: 'icomoon';
	margin-right: 5px;
	color: #B1191A;
}
.shopcar::after {
	content: '\e902';
	font-family: 'icomoon';
	margin-left: 10px;
}
.count {
	position: absolute;
	top: -5px;
	left: 105px;
	height: 14px;
	line-height: 14px;
	color: #fff;
	background-color: #e60012;
	padding: 0 5px;
	border-radius: 7px 7px 7px 0;
}

nav 模块

导航制作

  1. nav盒子通栏有高度，而且有个下边框

  2. 1号盒子左侧浮动，dropdown

  3. 2号盒子左侧浮动，navitems 导航栏组

    1号盒子根据相关性，里面包含dt和dd两个盒子

<!-- nav模块制作 -->
		<nav class="nav">
			<div class="w">
				<div class="dropdown">
					<div class="dt">全部商品分类</div>
					<div class="dd">
						<ul>
							<li><a href="#">优惠特卖</a></li>
							<li><a href="#">鼠标</a>、<a href="#">键盘</a>、<a href="#">耳机</a></li>
							<li><a href="#">电脑</a>、<a href="#">笔记本</a></li>
							<li><a href="#">PS3</a>、<a href="#">PS4</a>、<a href="#">PS5</a>、<a href="#">switch</a></li>
							<li><a href="#">单机</a>、<a href="#">独游</a>、<a href="#">网游</a>、<a href="#">小游戏</a></li>
							<li><a href="#">红白机</a>、<a href="#">小霸王</a>、<a href="#">PSP</a></li>
							<li><a href="#">游戏周边</a>、<a href="#">动漫周边</a>、<a href="#">手办</a></li>
							<li><a href="#">显示器</a>、<a href="#">配件</a></li>
							<li><a href="#">精选套餐</a>、<a href="#">最新上市</a></li>
							<li><a href="#">运动户外</a>、<a href="#">钟表</a></li>
							<li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a></li>
							<li><a href="#">二手专区</a></li>
							<li><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">电子书</a></li>
							<li><a href="#">饰品</a>、<a href="#">文具</a>、<a href="#">箱包</a>、<a href="#">家居</a></li>
							<li><a href="#">热销</a>、<a href="#">新品</a>、<a href="#">预售</a>、<a href="#">折扣</a></li>
						</ul>
					</div>
				</div>
				<div class="navitems">abc</div>
			</div>
		</nav>
		<!-- nav模块制作end -->

/* nav模块制作 */
.nav {
	height: 47px;
	border-bottom: 2px solid #B1191A;
}
.nav .dropdown {
	float: left;
	width: 210px;
	height: 45px;
	background-color: #B1191A;
}
.nav .navitems {
	float: left;
}
.dropdown .dt {
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 45px;
	font-size: 16px;
}
.dropdown .dd {
	width: 210px;
	height: 465px;
	background-color: #C81623;
}
.dropdown .dd ul li {
	position: relative;
	height: 31px;
	line-height: 31px;
	margin-left: 2px;
	padding-left: 10px;
}
.dropdown .dd ul li:hover {
	background-color: #fff;
}
.dropdown .dd ul li::after {
	position: absolute;
	top: 1px;
	right: 10px;
	color: #fff;
	font-family: 'icomoon';
	content: '\e902';
	font-size: 14px;
}
.dropdown .dd ul li a {
	font-size: 14px;
	color: #fff;
}
.dropdown .dd ul li:hover a {
	color: #C81623;
}
navitems模块
<div class="navitems">
					<ul>
						<li>
							<a href="#">道具城</a>
							<a href="#">游戏馆</a>
							<a href="#">超市</a>
							<a href="#">全球购</a>
							<a href="#">闪购</a>
							<a href="#">团购</a>
							<a href="#">拍卖</a>
							<a href="#">游戏设备</a>
						</li>
					</ul>
				</div>

.navitems ul li {
	float: left;
}
.navitems ul li a {
	/* display: block; */
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	padding: 0 25px;
}

footer底部制作

  1. footer页面底部盒子通栏给一个高度和灰色的背景
  2. footer里面又一个大的版心
  3. 版心里面包含1号盒子，mod_service是服务模块，mod是模块的意思
  4. 版心里面包含2号盒子，mod_help是帮助模块
  5. 版心里面包含3号盒子，mod_copyright是版心模块
<!-- 底部模块制作 -->
			<footer class="footer">
				<div class="w">
					<div class="mod_service">
						<ul>
							<li>
								<h5></h5>
								<div class="service_txt">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>
							</li>
							<li>
								<h5></h5>
								<div class="service_txt">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>
							</li>
							<li>
								<h5></h5>
								<div class="service_txt">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>
							</li>
							<li>
								<h5></h5>
								<div class="service_txt">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="mod_help">
						<dl>
							<dt>服务指南</dt>
							<dd><a href="#">购物流程</a></dd>
							<dd><a href="#">会员介绍</a></dd>
							<dd><a href="#">团购</a></dd>
							<dd><a href="#">常见问题</a></dd>
							<dd><a href="#">大家电</a></dd>
							<dd><a href="#">联系客服</a></dd>
						</dl>
						<dl>
							<dt>配送方式</dt>
							<dd><a href="#">上门自提</a></dd>
							<dd><a href="#">211限时达</a></dd>
							<dd><a href="#">配送服务查询</a></dd>
							<dd><a href="#">配送费收取标准</a></dd>
							<dd><a href="#">海外配送</a></dd>
						</dl>
						<dl>
							<dt>支付方式</dt>
							<dd><a href="#">货到付款</a></dd>
							<dd><a href="#">在线支付</a></dd>
							<dd><a href="#">分期付款</a></dd>
							<dd><a href="#">公司转账</a></dd>
						</dl>
						<dl>
							<dt>售后服务</dt>
							<dd><a href="#">服务政策</a></dd>
							<dd><a href="#">价格保护</a></dd>
							<dd><a href="#">退款说明</a></dd>
							<dd><a href="#">返修</a></dd>
							<dd><a href="#">取消订单</a></dd>
							<dd><a href="#">换货</a></dd>
						</dl>
						<dl>
							<dt>特色服务</dt>
							<dd><a href="#">夺宝岛</a></dd>
							<dd><a href="#">DIY装机</a></dd>
							<dd><a href="#">延保服务</a></dd>
						</dl>
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<img src="images/erweima.png" >
								游戏购客户端
							</dd>
						</dl>
					</div>
					<div class="mod_copyright">
						<div class="links">
							<a href="#">关于我们</a>	|	<a href="#">联系我们</a>	|	<a href="#">联系客服</a>	|
							<a href="#">商家入驻</a>	|	<a href="#">营销中心</a>	|	<a href="#">手机游戏购</a>	|
							<a href="#">友情链接</a>	|	<a href="#">销售联盟</a>	|	<a href="#">游戏购社区</a>	|
							<a href="#">游戏购公益</a>	|	<a href="#">English Site</a>	|	<a href="#">Contact	U</a>
						</div>
						<div class="copyright">
							地址：XX市XX区XX路XXX办公楼一层 邮编：173173173 电话：
							888-888-8888 传真：666-66666666 邮箱：wdnmd.cn <br>
							XICP备12345678号X公网安备121110987654
						</div>
					</div>
				</div>
			</footer>
		<!-- 底部模块制作end -->

/* 底部模块制作 */
.footer  {
	height: 415px;
	background-color: #f5f5f5;
	padding-top: 30px;
}
.mod_service {
	height: 80px;
	border-bottom: 1px solid #ccc;
}
.mod_service ul li {
	float: left;
	width: 300px;
	height: 50px;
	/* background-color: pink; */
	padding-left: 35px;
}
.mod_service ul li h5 {
	float: left;
	width: 50px;
	height: 50px;
	/* background-color: purple; */
	background: url(../images/icons.png) no-repeat -252px -2px;
	margin-right: 8px;
}
.service_txt h4 {
	font-size: 14px;
}
.service_txt p {
	font-size: 12px;
}
.mod_help {
	height: 185px;
	border-bottom: 1px solid #ccc;
	padding-top: 20px;
	padding-left: 50px;
}
.mod_help dl {
	float: left;
	width: 200px;
}
.mod_help dl:last-child {
	width: 90px;
	text-align: center;
}
.mod_help dl dt {
	font-size: 16px;
	margin-bottom: 10px;
}
.mod_copyright {
	text-align: center;
	padding-top: 20px;
}
.links {
	margin-bottom: 15px;
}
.links a {
	margin: 0 3px;
}
.copyright {
	line-height: 20px;
}

main 主体模块制作

  1. main盒子宽度为980像素，位置距离左边220px（main-left），给高度就不用清除浮动
  2. main里面包含左侧盒子，左浮动，focus焦点图模块
  3. main里面包含右侧盒子，右浮动，newflash新闻快报模块
<!-- 首页专有模块制作 -->
			<div class="w">
				<div class="main">
					<div class="focus">
						<ul>
							<li>
								<img src="images/202105201371395.jpg" >
							</li>
						</ul>
					</div>
					<div class="newsflash">
						<div class="news">
							<div class="news-hd">
								<h5>游戏购快报</h5>
								<a href="#" class="more">更多</a>
							</div>
							<div class="news-bd">
								<ul>
									<li><a href="#"><strong>[特惠]</strong>爆款耳机5折秒！</a></li>
									<li><a href="#"><strong>[重磅]</strong>《GTAOL》陆地竞速争夺三倍奖励 双倍GTA游戏币和声望尽在商战任务</a></li>
									<li><a href="#"><strong>[重磅]</strong>Epic喜+1《冰汽时代》 下周免费依旧神秘</a></li>
									<li><a href="#"><strong>[重磅]</strong>《原神》将于6月9日登陆Epic商城 免费兑换码获取特殊礼品</a></li>
									<li><a href="#"><strong>[重磅]</strong>国外新游《梦幻岛传说》被国外网友疯狂吐槽：为什么这么像《原神》？</a></li>
								</ul>
							</div>
						</div>
						<div class="lifeservice">
							<ul>
								<li><a href="#"><i class="huafei"></i><p>话费</p></a></li>
								<li><a href="#"><i class="jipiao"></i><p>机票</p></a></li>
								<li><a href="#"><i class="movie"></i><p>电影票</p></a></li>
								<li><a href="#"><i class="game"></i><p>游戏</p></a></li>
								<li><a href="#"><i class="caipiao"></i><p>彩票</p></a></li>
								<li><a href="#"><i class="youka"></i><p>加油卡</p></a></li>
								<li><a href="#"><i class="jiudian"></i><p>酒店</p></a></li>
								<li><a href="#"><i class="huochepiao"></i><p>火车票</p></a></li>
								<li><a href="#"><i class="zc"></i><p>众筹</p></a></li>
								<li><a href="#"><i class="licai"></i><p>理财</p></a></li>
								<li><a href="#"><i class="lpk"></i><p>礼品卡</p></a></li>
								<li><a href="#"><i class="bt"></i><p>白条</p></a></li>
							</ul>
						</div>
						<div class="bargain">
							<img src="images/bargain.jpg" >
						</div>
					</div>
				</div>
			</div>
		<!-- 首页专有模块制作end -->

.main {
	width: 980px;
	height: 455px;
	/* background-color: pink; */
	margin-left: 220px;
	margin-top: 10px;
}
.focus {
	float: left;
	width: 721px;
	height: 455px;
	background-color: purple;
}
.focus img {
	width: 721px;
	height: 455px;
}
.newsflash {
	float: right;
	width: 250px;
	height: 455px;
	/* background-color: skyblue; */
}
.news {
	height: 165px;
	border: 1px solid #E4E4E4;
}
.news-hd {
	height: 33px;
	line-height: 33px;
	border-bottom: 1px dotted #e4e4e4;
	padding: 0 15px;
}
.news-hd h5 {
	float: left;
	font-size: 14px;
}
.news-hd .more {
	float: right;
}
.news-hd .more::after {
	font-family: 'icomoon';
	content: '\e902';
}
.news-bd {
	padding: 5px 15px 0;
}
.news-bd ul li {
	height: 24px;
	line-height: 24px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.lifeservice {
	overflow: hidden;
	height: 209px;
	/* background-color: yellow; */
	border: 1px solid #E4E4E4;
	border-top: 0;
}
.lifeservice ul {
	width: 252px;
}
.lifeservice ul li {
	float: left;
	width: 63px;
	height: 71px;
	border-right: 1px solid #E4E4E4;
	border-bottom: 1px solid #E4E4E4;
	text-align: center;
}
.lifeservice ul li a i {
	display: inline-block;
	width: 24px;
	height: 28px;
	/* background-color: pink; */
	margin-top: 12px;
	/* background: url(../images/icons.png) no-repeat -19px -15px; */
}
.huafei {
	background: url(../images/icons.png) no-repeat -19px -15px;
}
.jipiao {
	background: url(../images/icons.png) no-repeat -78px -16px;
}
.movie {
	background: url(../images/icons.png) no-repeat -140px -16px;
}
.game {
	background: url(../images/icons.png) no-repeat -206px -16px;
}
.caipiao {
	background: url(../images/icons.png) no-repeat -17px -88px;
}
.youka {
	background: url(../images/icons.png) no-repeat -78px -88px;
}
.jiudian {
	background: url(../images/icons.png) no-repeat -141px -88px;
}
.huochepiao {
	background: url(../images/icons.png) no-repeat -206px -88px;
}
.zc {
	background: url(../images/icons.png) no-repeat -17px -159px;
}
.licai {
	background: url(../images/icons.png) no-repeat -78px -159px;
}
.lpk {
	background: url(../images/icons.png) no-repeat -140px -159px;
}
.bt {
	background: url(../images/icons.png) no-repeat -206px -159px;
}
.bargain {
	margin-top: 5px;
}
.bargain img {
	width: 250px;
	height: 75px;
}
推荐模块制作
  1. 大盒子recom推荐模块
  2. 里面包含2个盒子，浮动即可
  3. 1号盒子recom-hd
  4. 2号盒子recom-bd
<!-- 推荐模块 -->
			<div class="w recom">
				<div class="recom-hd">
					<img src="images/clock.png" >
					<p>吐血推荐</p>
				</div>
				<div class="recom-bd">
					<ul>
						<li><a href="https://bbs.3dmgame.com/thread-6151617-1-1.html"><img src="upload/dragon%20ball.jpg" ></a></li>
						<li><a href="https://www.gamersky.com/z/will/"><img src="upload/will.jpg" ></a></li>
						<li><a href="https://bbs.3dmgame.com/thread-6103272-1-1.html"><img src="upload/reddead.jpg" ></a></li>
						<li><a href="https://bbs.3dmgame.com/thread-5928115-1-1.html"><img src="upload/gta5.jpg" ></a></li>
					</ul>
				</div>
			</div>
		<!-- 推荐模块end -->

/* 推荐模块 */
.recom {
	height: 163px;
	/* background-color: pink; */
	margin-top: 12px;
}
.recom-hd {
	float: left;
	height: 163px;
	width: 205px;
	background-color: #5c5251;
	text-align: center;
	padding-top: 30px;
}
.recom-hd p {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding-top: 10px;
}
.recom-bd {
	float: left;
}
.recom-bd ul li {
	position: relative;
	float: left;
	margin-right: 2.33px;
}
.recom-bd ul li:nth-child(4n) {
	margin-right: 0px;
}
.recom-bd ul li img {
	width: 247px;
	height: 163px;
}
/* .recom-bd ul li:nth-child(-n+3)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 10px;
	width: 1px;
	height: 145px;
	background-color: #ddd;
} */
猜你喜欢模块
<!-- 猜你喜欢模块 -->
			<div class="like w">
				<div class="like_title">
					<h2>猜你喜欢</h2>
					<a href="#">换一批</a>
				</div>
				<div class="like_bd">
					<ul>
						<li><a href="#"><img src="upload/娑娜.jpg" ></a></li>		
						<li><a href="#"><img src="upload/索拉卡.jpg" ></a></li>
						<li><a href="#"><img src="upload/sona2.jpeg" ></a></li>
						<li><a href="#"><img src="upload/moganna.jpg" ></a></li>
						<li><a href="#"><img src="upload/蔚.jpg" ></a></li>
						<li><a href="#"><img src="upload/阿卡丽.jpg" ></a></li>
					</ul>
				</div>
			</div>
		<!-- 猜你喜欢模块end -->

/* 猜你喜欢模块 */
.like {
	height: 288px;
	margin-top: 10px;
}
.like_title {
	height: 28px;
	margin-top: 5px;
	
}
.like_title h2 {
	float: left;
	display: inline;
	font-size: 18px;
	color: #333333;
	font-style: normal;
	
}
.like_title a {
	float: right;
}
.like_bd {
	height: 250px;
	border: 1px solid #ededed;
}
.like_bd ul li {
	overflow: hidden;
	float: left;
	height: 250px;
	padding-top: 1px;
	margin-right: 8px;
}
.like_bd ul li a img {
	width: 193px;
	height: 248px;
}
.like_bd ul li:nth-child(n+6) {
	margin-right: 0;
}
有趣区
<!-- 有趣区 -->
			<div class="fun w">
				<h3>有趣区</h3>
				<div class="fun_bd">
					<div class="book"><a href="#"><img src="upload/lol.png" ></a></div>
					<div class="good">
						<div class="good_title">好东西</div>
						<div class="good_p1"><a href="#"><img src="upload/大大大.jpg" ></a></div>
						<div class="good_p2"><a href="#"><img src="upload/fa_jp.jpg" ></a></div>
					</div>
					<div class="games">
						<div class="games_title">游戏</div>
						<div class="games_p1"><a href="#"><img src="upload/少女.jpg" ></a></div>
						<div class="games_p2"><a href="#"><img src="upload/batman2.jpg" ></a></div>
						<div class="games_p3"><a href="#"><img src="./upload/batman.jpg" ></a></div>
					</div>
					<div class="icons"><a href="#"><img src="upload/fa_ico.jpg" ></a></div>
				</div>
			</div>
		<!-- 有趣区end -->

/* 有趣区域 */
.fun {
	height: 433px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.fun h3 {
	font-size: 18px;
	color: #333333;
}
.fun_bd {
	height: 405px;
	border: 1px solid #EDEDED;
}
.fun_bd .book {
	float: left;
	background-color: lavender;
	width: 404px;
	height: 405px;
}
.fun_bd .book img {
	width: 404px;
	height: 405px;
}
.fun_bd .good {
	float: left;
	/* border-bottom: 1px solid red; */
}
.fun_bd .good .good_title {
	float: left;
	width: 226px;
	height: 40px;
	border-bottom: 1px dashed #EDEDED;
	border-right: 1px dashed #EDEDED;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	font-weight: 700;
	color: #333333;
}
.good_p1 {
	border-bottom: 1px solid #EDEDED;
}
.good_p1 a img {
	width: 226px;
	height: 206px;
}
.good_p2 a img {
	width: 226px;
	height: 158px;
	border-bottom: 1px solid #EDEDED;
}
.fun_bd .games {
	float: left;
	width: 405px;
	height: 405px;
	/* background-color: violet; */
}
.fun_bd .games .games_title {
	float: left;
	width: 405px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px dashed #EDEDED;
	border-right: 1px dashed #EDEDED;
	color: #333333;
	border-left: none;
	background-color: #fff;
}
.games_p1 {
	width: 405px;
	height: 206px;
	/* background-color: lawngreen; */
}
.games_p1 a img {
	width: 405px;
	height: 206px;
	border-right: 0.5px solid #EDEDED;
}
.games_p2 {
	float: left;
	width: 202px;
	height: 199px;
	background-color: #800080;
}
.games_p2 a img {
	width: 202px;
	height: 199px;
	border-bottom: 1px solid black;
	border-right: 1px solid #EDEDED;
}
.games_p3 {
	float: left;
	width: 203px;
	height: 199px;
	/* background-color: darkorange; */
}
.games_p3 a img {
	width: 207px;
	height: 199px;
	border-bottom: 1px solid #EDEDED;
	border-right: 1px solid #EDEDED;
}
.fun_bd .icons {
	float: left;
	width: 162px;
	height: 405px;
	/* background-color: deeppink; */
}

楼层区floor制作

注意这个floor，不要给高度，内容有多少，算多少，第一楼是家电模块：里面包含两个盒子

  1. 1号盒子box_hd,给一个高度，有个下边框，里面分为左右2个盒子
  2. 2号盒子box_bd，不要给高度
box_hd模块
  1. 有高度可以不用清除浮动
  2. 左边h3，盒子左浮动
  3. 右边tab-list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做
<!-- 楼层区域制作 -->
			<div class="floor">
				<!-- 1楼家用电器楼层 -->
				<div class="w jd">
					<div class="box_hd">
						<h3>家用电器</h3>
						<div class="tab_list">
							<ul>
								<li><a href="#" class="style_red">热门</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>
								<li><a href="#">新奇特</a></li>
								<li><a href="#">高端电器</a></li>
							</ul>
						</div>
					</div>
					<div class="box_bd">
						<div class="tab_content">
							<div class="tab_list_item">
								<div class="col_210">
									<ul>
										<li><a href="#">节能补贴</a></li>
										<li><a href="#">4k电视</a></li>
										<li><a href="#">鼠标</a></li>
										<li><a href="#">键盘</a></li>
										<li><a href="#">游戏主机</a></li>
										<li><a href="#">笔记本</a></li>
									</ul>
									<a href="#">
										<img src="upload/jd1.jpg" >
									</a>
								</div>
								<div class="col_329">
									<a href="#">
										<img src="upload/ps4.jpg" >
									</a>
								</div>
								<div class="col_221">
									<a href="#"><img src="upload/jd3.jpg" ></a>
									<a href="#"><img src="upload/jd4.jpg" ></a>
								</div>
								<div class="col_221">
									<a href="#"><img src="upload/jd5.jpg" ></a>
								</div>
								<div class="col_219">
									<a href="#"><img src="upload/jd6.jpg" ></a>
									<a href="#"><img src="upload/jd7.jpg" ></a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 2楼手办模玩楼层 -->
				<div class="w jd">
					<div class="box_hd">
						<h3>手办模玩</h3>
						<div class="tab_list">
							<ul>
								<li><a href="#" class="style_red">热门</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>
								<li><a href="#">男装/女装</a></li>
								<li><a href="#">主机</a></li>
								<li><a href="#">外设</a></li>
							</ul>
						</div>
					</div>
					<div class="box_bd">
						<div class="tab_content">
							<div class="tab_list_item">
								<div class="col_210">
									<ul>
										<li><a href="#">万代</a></li>
										<li><a href="#">ANIPLEX</a></li>
										<li><a href="#">BANPRESTO</a></li>
										<li><a href="#">海洋堂</a></li>
										<li><a href="#">ALTER</a></li>
										<li><a href="#">寿屋</a></li>
									</ul>
									<a href="#">
										<img src="upload/sb0.jpg" >
									</a>
								</div>
								<div class="col_329">
									<a href="#">
										<img src="upload/sb2.jpg" >
									</a>
								</div>
								<div class="col_221">
									<a href="#"><img src="upload/sb3.jpg" ></a>
									<a href="#"><img src="upload/sb4.jpg" ></a>
								</div>
								<div class="col_221">
									<a href="#"><img src="upload/sb1.jpg" ></a>
								</div>
								<div class="col_219">
									<a href="#"><img src="upload/sb6.jpg" ></a>
									<a href="#"><img src="upload/sb5.jpg" ></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- 楼层区域制作end -->

/* 家用电器模块 */
.box_hd {
	height: 30px;
	border-bottom: 2px solid #C81623;
	margin-bottom: 5px;
}
.box_hd h3 {
	float: left;
	font-size: 18px;
	color: #C81623;
	font-weight: 400;
}
.tab_list {
	float: right;
	line-height: 30px;
}
.tab_list ul li {
	float: left;
}
.tab_list ul li a {
	margin: 0 15px;
}
.floor .w {
	margin-top: 30px;
}

.box_bd {
	height: 358px;
	/* background-color: pink; */
}
.tab_list_item>div {
	float: left;
	height: 361px;
}
.col_210 {
	width: 210px;
	background-color: #f9f9f9;
	text-align: center;
}
.col_210 ul li {
	float: left;
	width: 85px;
	height: 34px;
	border-bottom: 1px solid #ccc;
	text-align: center;
	line-height: 33px;
	margin-right: 10px;
}
.col_210 ul {
	padding-left: 12px;
}
.col_329 {
	width: 329px;
}
.col_329 img {
	width: 329px;
	height: 360px;
}
.col_221 {
	width: 221px;
	border-right: 1px solid #ccc;
}
.col_219 {
	width: 219px;
}
.bb {
	/* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
	display: block;
	border-bottom: 1px solid #ccc;
}

注册页

注册页面：register.html

名称说明
注册专区registerarea
注册内容reg-form
错误的error
成功的success
默认的default
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人注册</title>
		<!-- 引入favicon图标 -->
		<link rel="shortcut icon" href="images/favicon.png"/>
		<!-- 引入初始化样式文件 -->
		<link rel="stylesheet" href="css/base.css"/>
		<!-- 引入注册页面的css -->
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<div class="w">
			<header>
				<div class="logo">
					<a href="index.html"><img src="images/logo.png" ></a>
				</div>
			</header>
			<div class="registerarea">
				<h3>
					注册新用户
					<div class="login">我有账号，去<a href="#">登录</a></div>
				</h3>
				<div class="reg_form">
					<form action="">
						<ul>
							<li><label for="">手机号：</label><input type="text"  class="inp"/>
								<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
							</li>
							<br>
							<li><label for="">短信验证码：</label><input type="password" class="inp"/>
								<span class="success"><i class="success_icon"></i>短信验证码输入正确</span>
							</li>
							<br>
							<li><label for="">登录密码：</label><input type="password" class="inp"/>
								<span class="error"><i class="error_icon"></i>密码输入错误，请重新输入</span>
							</li>
							<br>
							<li class="safe">
								安全程度
								<em class="ruo">弱</em>
								<em class="zhong">中</em>
								<em class="qiang">强</em>
							</li>
							<br>
							<li><label for="">确认密码：</label><input type="password" class="inp"/>
								<span class="error"><i class="error_icon"></i>密码输入不一致，请重新输入</span>
								<li class="agree">
									<input type="checkbox" name="" id="" />同意协议并注册
									<a href="#">《知晓用户协议》</a>
								</li>
							</li>
							<li>
								<input type="submit" value="提交注册" class="btn"/>
							</li>
						</ul>
					</form>
				</div>
			</div>
			<footer>
				<div class="mod_copyright">
					<div class="links">
						<a href="#">关于我们</a>	|	<a href="#">联系我们</a>	|	<a href="#">联系客服</a>	|
						<a href="#">商家入驻</a>	|	<a href="#">营销中心</a>	|	<a href="#">手机游戏购</a>	|
						<a href="#">友情链接</a>	|	<a href="#">销售联盟</a>	|	<a href="#">游戏购社区</a>	|
						<a href="#">游戏购公益</a>	|	<a href="#">English Site</a>	|	<a href="#">Contact	U</a>
					</div>
					<div class="copyright">
						地址：XX市XX区XX路XXX办公楼一层 邮编：173173173 电话：
						888-888-8888 传真：666-66666666 邮箱：wdnmd.cn <br>
						XICP备12345678号X公网安备121110987654
					</div>
				</div>
			</footer>
		</div>
	</body>
</html>

.w {
	width: 1200px;
	margin: 0 auto;
}
header {
	height: 84px;
	border-bottom: 2px solid #C81623;
}
.logo {
	padding-top: 18px;
}
.registerarea {
	height: 522px;
	border: 1px solid #ccc;
	margin-top: 20px;
}
.registerarea h3 {
	height: 42px;
	border-bottom: 1px solid #ccc;
	background-color: #ececec;
	line-height: 42px;
	padding: 0 10px;
	font-size: 18px;
	font-weight: 400;
}
.login {
	float: right;
	font-size: 14px;
}
.login a {
	color: red;
}
.reg_form {
	width: 600px;
	/* background-color: pink; */
	margin: 50px auto 0;
}
.reg_form ul li label {
	display: inline-block;
	width: 88px;
	text-align: right;
}
.reg_form ul li .inp {
	width: 242px;
	height: 37px;
	border: 1px solid #ccc;
}
.error {
	color: #C81623;
}
.error_icon,
.success_icon {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	background: url() no-repeat;
	margin-top: -2px;
}
.success {
	color: green;
}
.success_icon {
	background: url() no-repeat;
}
.safe {
	padding-left: 170px;
}
.safe em {
	padding: 0 12px;
	color: #fff;
}
.ruo {
	background-color: #de1111;
}
.zhong {
	background-color: #40b83f;
}
.qiang {
	background-color: #f79100;
}
.agree {
	margin-top: 10px;
	padding-left: 100px;
}
.agree input {
	vertical-align: middle;
}
.agree a {
	color: #1ba1e6;
}
.btn {
	width: 200px;
	height: 34px;
	background-color: #C81623;
	font-size: 14px;
	color: #fff;
	margin: 30px 0 0 100px;
}

/* 注册页面底部模块 */
.mod_copyright {
	text-align: center;
	padding-top: 20px;
}
.links {
	margin-bottom: 15px;
}
.links a {
	margin: 0 3px;
}
.copyright {
	line-height: 20px;
}

效果

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值