前端CSS练习项目记录（从12到15）

最新推荐文章于 2024-03-18 11:28:08 发布
最新推荐文章于 2024-03-18 11:28:08 发布
阅读量948 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/garrulousabyss/article/details/82599626
版权

十二. 完成建筑材料

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=导航 -->
	<!-- S=banner -->
	<div class="banner">
		<div class="subNav fl">
			<h2>商机市场</h2>
			<ul>
				<li><s></s><a href="#">建筑材料</a></li>
				<li><s></s><a href="#">儿童安全座椅</a></li>
				<li><s></s><a href="#">工艺美术品</a></li>
				<li><s></s><a href="#">建筑材料</a></li>
				<li><s></s><a href="#">儿童安全座椅</a></li>
				<li><s></s><a href="#">工艺美术品</a></li>
			</ul>
		</div>
		<div class="ad fl"></div>
		<div class="message fr">
			<div class="message_top">
				<p class="fw">建材通大众版</p>
				<s class="fl"></s>
				<p class="ch fl">价格实惠，量身为预算不多</br>的供应商所设。<a href="#">了解详情</a></p>
			</div>
			<div class="message_bottom">
				<p class="findMessage">找信息或者发信息遇到问题？</p>
				<p class="phone"><s></s>0124-97342354</p>
				<input type="button" class="btn">
			</div>
		</div>
	</div>
	<!-- E=banner -->
	<div class="material">建筑材料</div>
</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: 190px;
	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;
}

.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 10px;
}

.subNav {
	width: 200px;
	height: 210px;
	margin-right: 11px;
	background-color: #E8F0F8;
}

.ad {
	width: 520px;
	height: 210px;
	background: url(../image/material.jpg);
}

.message {
	width: 230px;
	height: 210px;
}

.subNav h2 {
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	background-color: #0266A3;
	color: white;
}

.subNav s {
	display: inline-block;
	width: 15px;
	height: 13px;
	background: url(../image/sprite.png) -212px 0;
	vertical-align: middle;
}

.subNav li {
	font-size: 15px;
	padding-top: 11px;
	margin-left: 9px;
}

.subNav li a {
	padding-left: 15px;
}

.message_top {
	height: 95px;
	boreder: 1px solid #DDDDDD;
	background: #f7faff;
	margin-bottom: 21px;
}

.message_top s {
	margin: 20px 10px 0 10px;
	display: inline-block;
	height: 44px;
	width: 44px;
	background: url(../image/sprite.png) -229px 0;
}

.message_top .fw {
	font-weight: bold;
	padding: 7px 0 0 18px;
}

.message_top .ch {
	margin-top: 25px;
}

.message_bottom {
	height: 94px;
	background: #f7faff;
}

.message_bottom .findMessage {
	text-align: center;
	font-size: 14px;
	padding-top: 11px;
}

.message_bottom .phone {
	margin-top: 10px;
	text-align: center;
	color: #3F9CE0;
	font-size: 14px;
}

.message_bottom .phone s{
	/*设置宽高之前，一定要设置如下这行*/
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(../image/sprite.png) -274px 0;
	vertical-align: middle;
	margin-right: 6px;
}

.message_bottom .btn {
	width: 85px;
	height: 23px;
	background: url(../image/sprite.png) -300px -3px;
	margin-top: 9px;
	margin-left: 75px;
}

.material {
	width: 950px;
	height: 34px;
	border-top: 2px  solid #C3D7E4;
	margin: 0 auto;
	margin-top: 14px;
	padding-left: 20px;
	line-height: 34px;
	background: #ECF1F7;
	font-weight: bold;
}

效果图

 十三. 产品部分的分析

这部分结构大致划分为：

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=导航 -->
	<!-- S=banner -->
	<div class="banner">
		<div class="subNav fl">
			<h2>商机市场</h2>
			<ul>
				<li><s></s><a href="#">建筑材料</a></li>
				<li><s></s><a href="#">儿童安全座椅</a></li>
				<li><s></s><a href="#">工艺美术品</a></li>
				<li><s></s><a href="#">建筑材料</a></li>
				<li><s></s><a href="#">儿童安全座椅</a></li>
				<li><s></s><a href="#">工艺美术品</a></li>
			</ul>
		</div>
		<div class="ad fl"></div>
		<div class="message fr">
			<div class="message_top">
				<p class="fw">建材通大众版</p>
				<s class="fl"></s>
				<p class="ch fl">价格实惠，量身为预算不多</br>的供应商所设。<a href="#">了解详情</a></p>
			</div>
			<div class="message_bottom">
				<p class="findMessage">找信息或者发信息遇到问题？</p>
				<p class="phone"><s></s>0124-97342354</p>
				<input type="button" class="btn">
			</div>
		</div>
	</div>
	<!-- E=banner -->
	<div class="material">建筑材料</div>
	<!-- S=具体信息 -->
	<div class="product">
		<div class="product_l fl">
			<div class="product_l_top">
				<div class="p_l_t_product1"></div>
				<div class="p_l_t_product2"></div>
			</div>
			<div class="product_l_line"></div>
			<div class="product_l_bottom"></div>
		</div>
		<div class="product_r fr"></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;
}


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

.logo_l {
	width: 190px;
	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;
}

.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 10px;
}

.subNav {
	width: 200px;
	height: 210px;
	margin-right: 11px;
	background-color: #E8F0F8;
}

.ad {
	width: 520px;
	height: 210px;
	background: url(../image/material.jpg);
}

.message {
	width: 230px;
	height: 210px;
}

.subNav h2 {
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	background-color: #0266A3;
	color: white;
}

.subNav s {
	display: inline-block;
	width: 15px;
	height: 13px;
	background: url(../image/sprite.png) -212px 0;
	vertical-align: middle;
}

.subNav li {
	font-size: 15px;
	padding-top: 11px;
	margin-left: 9px;
}

.subNav li a {
	padding-left: 15px;
}

.message_top {
	height: 95px;
	boreder: 1px solid #DDDDDD;
	background: #f7faff;
	margin-bottom: 21px;
}

.message_top s {
	margin: 20px 10px 0 10px;
	display: inline-block;
	height: 44px;
	width: 44px;
	background: url(../image/sprite.png) -229px 0;
}

.message_top .fw {
	font-weight: bold;
	padding: 7px 0 0 18px;
}

.message_top .ch {
	margin-top: 25px;
}

.message_bottom {
	height: 94px;
	background: #f7faff;
}

.message_bottom .findMessage {
	text-align: center;
	font-size: 14px;
	padding-top: 11px;
}

.message_bottom .phone {
	margin-top: 10px;
	text-align: center;
	color: #3F9CE0;
	font-size: 14px;
}

.message_bottom .phone s{
	/*设置宽高之前，一定要设置如下这行*/
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(../image/sprite.png) -274px 0;
	vertical-align: middle;
	margin-right: 6px;
}

.message_bottom .btn {
	width: 85px;
	height: 23px;
	background: url(../image/sprite.png) -300px -3px;
	margin-top: 9px;
	margin-left: 75px;
}

.material {
	width: 950px;
	height: 34px;
	border-top: 2px  solid #C3D7E4;
	margin: 0 auto;
	margin-top: 14px;
	padding-left: 20px;
	line-height: 34px;
	background: #ECF1F7;
	font-weight: bold;
}

.product {
	width: 970px;
	height: 345px;
	background: red;
	margin: 0 auto;
	margin-top: 12px;
}

.product .product_l {
	width: 738px;
	height: 345px;
	background: pink;
	border: 1px solid #D8D8D8;
}

.product .product_l_top {
	width: 738px;
	height: 172px;
	background: yellow;
	padding: 17px 0 0 26px;
}

.product .p_l_t_product1 {
	width: 350px;
	height: 146px;
	background: blue;

}

.product .product_r {
	width: 230px;
	height: 345px;
	background: green;
}

效果图:

 十四. 产品部分的进一步细分，以及完成立即购买 + 十五. 完成产品的左部

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=导航 -->
	<!-- S=banner -->
	<div class="banner">
		<div class="subNav fl">
			<h2>商机市场</h2>
			<ul>
				<li><s></s><a href="#">建筑材料</a></li>
				<li><s></s><a href="#">儿童安全座椅</a></li>
				<li><s></s><a href="#">工艺美术品</a></li>
				<li><s></s><a href="#">建筑材料</a></li>
				<li><s></s><a href="#">儿童安全座椅</a></li>
				<li><s></s><a href="#">工艺美术品</a></li>
			</ul>
		</div>
		<div class="ad fl"></div>
		<div class="message fr">
			<div class="message_top">
				<p class="fw">建材通大众版</p>
				<s class="fl"></s>
				<p class="ch fl">价格实惠，量身为预算不多</br>的供应商所设。<a href="#">了解详情</a></p>
			</div>
			<div class="message_bottom">
				<p class="findMessage">找信息或者发信息遇到问题？</p>
				<p class="phone"><s></s>0124-97342354</p>
				<input type="button" class="btn">
			</div>
		</div>
	</div>
	<!-- E=banner -->
	<div class="material">建筑材料</div>
	<!-- S=具体信息 -->
	<div class="product">
		<div class="product_l fl">
			<div class="product_l_top">
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
<!-- 			<div class="product_l_line"></div> -->
			<div class="product_l_top">
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
		</div>
		<div class="product_r fr"></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;
}


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

.logo_l {
	width: 190px;
	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;
}

.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 10px;
}

.subNav {
	width: 200px;
	height: 210px;
	margin-right: 11px;
	background-color: #E8F0F8;
}

.ad {
	width: 520px;
	height: 210px;
	background: url(../image/material.jpg);
}

.message {
	width: 230px;
	height: 210px;
}

.subNav h2 {
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	background-color: #0266A3;
	color: white;
}

.subNav s {
	display: inline-block;
	width: 15px;
	height: 13px;
	background: url(../image/sprite.png) -212px 0;
	vertical-align: middle;
}

.subNav li {
	font-size: 15px;
	padding-top: 11px;
	margin-left: 9px;
}

.subNav li a {
	padding-left: 15px;
}

.message_top {
	height: 95px;
	boreder: 1px solid #DDDDDD;
	background: #f7faff;
	margin-bottom: 21px;
}

.message_top s {
	margin: 20px 10px 0 10px;
	display: inline-block;
	height: 44px;
	width: 44px;
	background: url(../image/sprite.png) -229px 0;
}

.message_top .fw {
	font-weight: bold;
	padding: 7px 0 0 18px;
}

.message_top .ch {
	margin-top: 25px;
}

.message_bottom {
	height: 94px;
	background: #f7faff;
}

.message_bottom .findMessage {
	text-align: center;
	font-size: 14px;
	padding-top: 11px;
}

.message_bottom .phone {
	margin-top: 10px;
	text-align: center;
	color: #3F9CE0;
	font-size: 14px;
}

.message_bottom .phone s{
	/*设置宽高之前，一定要设置如下这行*/
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(../image/sprite.png) -274px 0;
	vertical-align: middle;
	margin-right: 6px;
}

.message_bottom .btn {
	width: 85px;
	height: 23px;
	background: url(../image/sprite.png) -300px -3px;
	margin-top: 9px;
	margin-left: 75px;
}

.material {
	width: 950px;
	height: 34px;
	border-top: 2px  solid #C3D7E4;
	margin: 0 auto;
	margin-top: 14px;
	padding-left: 20px;
	line-height: 34px;
	background: #ECF1F7;
	font-weight: bold;
}

.product {
	width: 970px;
	height: 345px;
	margin: 0 auto;
	margin-top: 12px;
}

.product .product_l {
	width: 738px;
	height: 345px;
	border: 1px solid #D8D8D8;
}

.product .product_l_top {
	width: 712px;
	height: 154.5px;
	padding: 17px 0 0 26px;
}

.product .p_l_t_product1 {
	width: 350px;
	height: 146px;


}

.product .buy {
	width: 99px;
	height: 143px;
}

.product .buy .img {
	height: 100px;
	border: 1px solid #CACACA;
}

.product .buy .img s {
	display: inline-block;
	width: 90px;
	height: 62px;
	background: url(../image/sprite.png) 0 -62px;
	margin: 10px 4px 0 3px;
}

.product .buy .btn {
	width: 99px;
	height: 26px;
	background-color: #0A84E3;
	color: white;
	margin-top: 15px;
}

.product .explain {
	width: 250px;
	height: 143px;
}

.product .explain .goodWife {
	font-size: 14px;
	padding: 10px 0 0 10px;
}

.product .explain .auto {
	color: #863E01;
	padding: 13px 0 0 15px;
}

.product .explain .money {
	padding: 23px 0 0 11px;
}

.product .explain .money span {
	color: red;
}

.product .explain .money s {
	text-decoration: line-through;
}

.product .explain .buyed {
	font-size: 14px;
	padding: 28px 0 0 11px;
}

.product .product_r {
	width: 230px;
	height: 347px;
	background: green;
}

.product_l_line {
	margin: 0 4px 0 4px;
	border-top: 1px solid #CCC;
}

最终效果图

 

garrulousabyss
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS项目练习
12-21
css练习下载
前端项目练习01-瀑布流练习
weixin_34192993的博客
11-13 132
是我是我又是我，我要在此发誓每个工作日练一个前端小项目，并把大致思路和部分代码以及总结心得发在这里，请诸位监督，鞠躬感谢O(∩_∩)O谢谢 瀑布流设计主要是计算最小块的高度并自动填充。设计思路如下： 原生js设计： 1）分块，整体页面为一个分块，设为main.main中分成若干个cage,cage中再加入photo块，photo块中再放入图片。 ...
html+css布局综合练习
借风拥你
03-18 1007
一、准备工作 1.引入reset.css 主要是消除一些默认的样式 /* 基础设置 */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{ margin: 0; padding: 0; } ul,ol { list-style: none; } img { /* 底部留白 */ display:
5个前端练手项目(html css js canvas)
热门推荐
m0_51311990的博客
06-04 2万+
目录🥩.跑马灯1.1效果图：1.2思路解析1.3源码🍧.彩虹爱心2.1效果图2.2思路解析2.3源码🌮.闹钟3.1效果图3.2思路解析3.3源码🍲.自制笔记本4.1效果展示4.2思路解析4.3源码🍣.自定义写字台（也可自定义字的样式）5.1效果展示 5.2思路解析5.3源码 2.彩虹爱心 2.1效果图 3.闹钟 3.1效果图 html： css: js: 4.自制笔记本 4.1效果展示 html： css： js： 5.自定义写字台（也.....
css+div练手-工作室
tempsitegoogle
07-09 153
今天一天调了两个主界面，另一个见《CSS+DIV练手-博客》，第一个用了5个小时，第二个仅仅用了1个半小时，看样子熟能生巧啊。 截图： 源代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...
前端练习题
文摘资讯
04-06 452
练习1var w1Date;var w2Date;function w1 () {      w1Date = Date.now();}function w2 () {      w2Date = Date.now();      console.log('time sp;', w2Date - w1Date + 'ms');}setTimeout(w1, 100);setTimeout(w2,
HTML+CSS+JavaScript-无穷可爱爱心喷射特效-CSDN@追光者♂.zip
01-15
大家好，这是近期通过前端技术实现的一个无穷可爱爱心喷射特效，已经在博客中记录，近期将会发布：【202x前端实战综合练习】HTML+CSS+JavaScript 实现无穷可爱爱心喷射特效（含源代码解析 & 代码结构逻辑简析），...
oshanoshu-projects:这包括我所有的个人练习项目！
05-06
它可以成功地实现从服务器到多客户端的文件传输过程，反之亦然。 它还将每个客户端的文件记录保存在单独的文件夹中，并处理文件名中的冗余。 它具有客户端唯一的ID和密码等功能，新用户可以设置新帐户。 用户可以...
SSM项目小学数学在线测试系统.zip
最新发布
04-13
3. **前后端分离**：前端可能使用了HTML5、CSS3和JavaScript等技术构建用户界面，后端则使用Java开发，通过RESTful API与前端进行数据交互，提高了系统的可维护性和可扩展性。 4. **数据库设计**：系统后端可能采用...
learningFrontEnd：此存储库供我学习前端记录！我的前端学习记录！
02-07
学习前端这个项目是用来存放我学习前端的内容和记录体会的过程！！里面有可能会放置多个地方学习目标素材。学习目标How2j 表严肃 MDN 学习体会15年1月21日第一次开始写学习体会，前面学习了HTML，CSS，现在开始学习...
software-job-note：软件工作入门与软件工程求职记录（目前只有前端），相关问题可在问题讨论中
02-03
网页前端程式入门，工作文章整理学习与面试流程（底下都有资源连结）下载vscode ，考虑程序编辑器，或者使用codepen可以在线练习前端程序安装与学习git ，申办github帐号，参见学习HTML，CSS，Javascript知识，参见...
前端项目练手-模仿天猫官网前端
11-29
前端项目练手-模仿天猫官网前端
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
31个前端入门练手项目合集，源码，2022年最新.zip
05-10
31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。 31个前端入门练手项目合集，源码，2022年最新，助你牢牢掌握前端基础知识。
前端练手项目
lmd666的博客
06-13 3330
9月份就要秋招了，赶紧抓紧时间写几个小项目，练练手。话不多说，先上效果图。 第一部分 第二部分 第三部分 效果图演示完毕，下面上代码 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学成在线</title> <link rel="stylesheet" ...
前端练习
风烟
01-22 834
` 保存显示
20 个前端练手项目合集
m0_65135687的博客
02-28 2万+
最近有很多小伙伴反应 —— “ 刚学前端，学完了 HTML、CSS、JS 三大件就没事干了，有没有适合刚入门小白的练手项目呀？” 今天就给大家带来 20 个适合新手的前端练手项目，由浅入深、层层递进，内容也非常有趣（以游戏为主），具体项目如下： 如果你还没有前端基础，推荐从这 3 门课开始学起 —— 基础阶段： 1. HTML5 简明教程 课程将从网站的基础概念开始，带你了解其运行机制。然后，我们会学习 HTML 基础知识，了解各种常用标签的意义以及基本用法。此外，课程还会涉及 HTML5
50个前端入门练手项目，助你掌握前端基础知识
m0_65135687的博客
02-28 5081
1.Expanding Cards 效果如图所示: 1.png 源码[1] 在线示例[2] [ ] 知识点总结: CSS:弹性盒子布局中的flex属性:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。 JavaScript:利用[].filter.call()方法可快速实现简单的选项卡切换。如上述示例源码: constpanelItems=document.querySelectorAll(".container>.pane...
前端开发练习，前端开发入门学习
qd520_1314的博客
04-26 318
前言 作为一个程序员，当然总是期望自己的代码能「一次编写，四处运行」，但真实经验往往是「一处修改，百处填坑」，依赖落后了好几个版本了想要升级、老代码已经看着很不爽了打算重构，都需要下坚决的决心，毕竟哪里漏掉了或者改错了都可能酿成大祸，我们一般都怎么搞呢？ 1、ant-design的使用总结及常用组件和他们的基本用法? ant-design为React，Angular和Vue都提供了组件，同时为PC和移动端提供了常用的基础组件。ant-design提供的demo非常的丰富并且样式能够基本的覆盖开发需求。ant
纯html css的练习项目
09-17
纯HTML和CSS的练习项目可以是创建一个静态网页或网站，并使用HTML和CSS来设计界面和布局。下面是一个简单的例子： 首先，你可以创建一个简单的网页布局，包括一个顶部导航栏、一个侧边栏和一个主要内容区域。你可以使用HTML的div元素来创建这些不同的区域，并使用CSS来定义它们的样式和布局。 在顶部导航栏中，你可以添加一些链接到其他页面或部分，或者添加一个搜索框和登录按钮。你可以使用CSS来设置导航栏的背景颜色、字体样式和边框等。 在侧边栏中，你可以添加一些导航链接或目录列表。使用CSS来设置侧边栏的宽度、背景颜色或背景图片等。 在主要内容区域，你可以添加一些段落文字、标题、图片或其他元素，以展示你想要呈现的信息。使用CSS来设置内容区域的背景颜色、字体样式、排列方式等。 此外，你还可以使用CSS的伪类和选择器来设置链接的样式，例如:hover表示当鼠标悬停在链接上时的样式效果。 这只是一个简单的例子，你可以根据自己的兴趣和需求来设计更复杂和有创意的项目。通过这样的练习项目，你可以熟悉HTML和CSS的语法和用法，提高自己的前端开发技能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值