尚硅谷前端《梅兰商城CSS》（从5到8）

五. 精灵图完成三角

js/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/cssReset.css"/>
	<link rel="stylesheet" href="../css/index.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
	<!-- S=页面的顶部 -->
	<div class="top">
		<div class="top_page">
			<div class="top_page_l fl">您好，欢迎来到建材网！</div>
			<div class="top_page_r fr">
				<ul>
					<li><a href="#">建材网首页</a></li>
					<li><a href="#">我的商务室</a><s></s></li>
					<li><a href="#">我的收藏</a><s></s></li>
					<li><a href="#">建材服务</a><s></s></li>
					<li><a href="#">客服中心</a></li>
					<li><a href="#">网站导航</a><s></s></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- E=页面的顶部 -->
</body>
</html>

css/index.css

@charset "UTF-8";
html{
	font: 12px '宋体';
}

a{
	color: #000;
}

.top {
	background-color: #F7F7F7;
	height: 26px;
	border-bottom: 1px solid #D8D8D8;
}

.top_page {
	width: 970px;
	height: 26px;
	margin: 0 auto;
}

.top_page_l{
	line-height: 26px;
}

.top_page_r ul li{
	line-height: 26px;
	float: left;
	padding-right: 10px;
}

.top_page_r ul li s {
	width: 18px;
	height: 14px;
	background: url(../image/sprite.png);
	display: inline-block;
	vertical-align: -3px;
}

六. 完成log和搜索引擎的优化 + 七. 完成log部分的输入框

js/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/cssReset.css"/>
	<link rel="stylesheet" href="../css/index.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
	<!-- S=页面的顶部 -->
	<div class="top">
		<div class="top_page">
			<div class="top_page_l fl">您好，欢迎来到建材网！</div>
			<div class="top_page_r fr">
				<ul>
					<li><a href="#">建材网首页</a></li>
					<li><a href="#">我的商务室</a><s></s></li>
					<li><a href="#">我的收藏</a><s></s></li>
					<li><a href="#">建材服务</a><s></s></li>
					<li><a href="#">客服中心</a></li>
					<li><a href="#">网站导航</a><s></s></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- E=页面的顶部 -->
	<!-- S=logo -->
	<div class="logo">
		<!-- 这里h1的目的是为了强调 -->
		<h1 class="logo_l fl">梅兰商贸</h1>
		<div class="logo_r fr">
			<div class="logo_r_content">
				<input type="input" value="请输入关键字" class="logo_r_search fl">
				<input type="button" value="搜索" class="logo_r_btn fl">
			</div>
		</div>
	</div>
	<!-- E=logo -->
</body>
</html>

css/index.css

@charset "UTF-8";
html {
	font: 12px '宋体';
}

a {
	color: #000;
}

.top {
	background-color: #F7F7F7;
	height: 26px;
	border-bottom: 1px solid #D8D8D8;
}

.top_page {
	width: 970px;
	height: 26px;
	margin: 0 auto;
}

.top_page_l{
	line-height: 26px;
}

.top_page_r ul li {
	line-height: 26px;
	float: left;
	padding-right: 10px;
}

.top_page_r ul li s {
	width: 18px;
	height: 14px;
	background: url(../image/sprite.png);
	display: inline-block;
	vertical-align: -3px;
}


.logo {
	width: 970px;
	height: 98px;
	/*center*/
	margin: 0 auto;
}

.logo_l {
	width: 200px;
	height: 55px;
	background: blue;
	margin: 24px 0 19px 9px;
	background: url(../image/sprite.png) -20px 0;
	/*	这里是为了让“梅兰商贸”几个字，用户不可见，但爬虫可见，提高被搜索引擎爬取的概率*/
	text-indent: -1000em;
}

.logo_r {
	width: 530px;
	height: 42px;
	border: 1px solid #C9C9C9;
	margin-top: 29px;
}

.logo_r_content{
	margin:5px 5px 5px 4px;
}

.logo_r_search{
	width: 418px;
	height: 28px;
	border: 1px solid #C9C9C9;
	color: #999999;
}

.logo_r_btn{
	width: 99px;
	height: 30px;
	color: white;
	background-color: #2F70D0;
}

同时注意，我们修改了精灵图，加入了“梅兰商贸”的图片

最后效果图

八. 导航的制作

js/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/cssReset.css"/>
	<link rel="stylesheet" href="../css/index.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
	<!-- S=页面的顶部 -->
	<div class="top">
		<div class="top_page">
			<div class="top_page_l fl">您好，欢迎来到建材网！</div>
			<div class="top_page_r fr">
				<ul>
					<li><a href="#">建材网首页</a></li>
					<li><a href="#">我的商务室</a><s></s></li>
					<li><a href="#">我的收藏</a><s></s></li>
					<li><a href="#">建材服务</a><s></s></li>
					<li><a href="#">客服中心</a></li>
					<li><a href="#">网站导航</a><s></s></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- E=页面的顶部 -->
	<!-- S=logo -->
	<div class="logo">
		<!-- 这里h1的目的是为了强调 -->
		<h1 class="logo_l fl">梅兰商贸</h1>
		<div class="logo_r fr">
			<div class="logo_r_content">
				<input type="input" value="请输入关键字" class="logo_r_search fl">
				<input type="button" value="搜索" class="logo_r_btn fl">
			</div>
		</div>
	</div>
	<!-- E=logo -->
	<!-- S=导航 -->
	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">建筑材料</a></li>
			<li><a href="#">儿童安全座椅</a></li>
			<li><a href="#">工艺美术品</a></li>
		</ul>
	</div>
	<!-- E=导航 -->
</body>
</html>

css/index.css

@charset "UTF-8";
html {
	font: 12px '宋体';
}

a {
	color: #000;
}

.top {
	background-color: #F7F7F7;
	height: 26px;
	border-bottom: 1px solid #D8D8D8;
}

.top_page {
	width: 970px;
	height: 26px;
	margin: 0 auto;
}

.top_page_l{
	line-height: 26px;
}

.top_page_r ul li {
	line-height: 26px;
	float: left;
	padding-right: 10px;
}

.top_page_r ul li s {
	width: 18px;
	height: 14px;
	background: url(../image/sprite.png);
	display: inline-block;
	vertical-align: -3px;
}


.logo {
	width: 970px;
	height: 98px;
	/*center*/
	margin: 0 auto;
}

.logo_l {
	width: 200px;
	height: 55px;
	background: blue;
	margin: 24px 0 19px 9px;
	background: url(../image/sprite.png) -20px 0;
	/*	这里是为了让“梅兰商贸”几个字，用户不可见，但爬虫可见，提高被搜索引擎爬取的概率*/
	text-indent: -1000em;
}

.logo_r {
	width: 530px;
	height: 42px;
	border: 1px solid #C9C9C9;
	margin-top: 29px;
}

.logo_r_content {
	margin:5px 5px 5px 4px;
}

.logo_r_search {
	width: 418px;
	height: 28px;
	border: 1px solid #C9C9C9;
	color: #999999;
}

.logo_r_btn {
	width: 99px;
	height: 30px;
	color: white;
	background-color: #2F70D0;
}

.nav{
	width: 970px;
	height: 25px;
	margin: 0 auto;
	border-bottom: 2px solid #0266A3;
}
.nav li{
	padding: 0 15px 0 15px;
	line-height: 25px;
	float: left;
	font-size: 14px;
	font-weight: bold;
}

.nav li a{
	color: #0266A3;
}

.nav li:hover{
	background-color: #0266A3;
}

.nav li:hover a{
	color: white;
}

最终效果

尚硅谷前端《梅兰商城CSS》（从5到8）

猜你喜欢