CSS初次实战之梅兰整站自搭建流程

最新推荐文章于 2021-11-03 21:06:24 发布

M1racle_l

最新推荐文章于 2021-11-03 21:06:24 发布

阅读量493

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_37890907/article/details/69488810

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

已初始化完毕。

一, 网站头部

分为通栏>版心部分>版心左侧部分，版心右侧部分

头部部分css代码

.banxin {
	width: 970px;
	margin: 0 auto;
}
.top {
	height: 26px;
	background: #F7F7F7;
	border-bottom: 1px solid #D8D8D8;
}
.center {
	height: 26px;
	margin: 0 auto;
}
.t_c_wel {
	line-height: 26px;
}
.t_c_nav {
	height: 26px;
}
.t_c_nav li {
	line-height: 26px;
	float: right;
	padding-right: 10px;

	
} 
.t_c_nav b {
	display: inline-block;
	width: 7px;
	height: 4px;
	margin-top: 1px;
	background: url(../imgs/精灵图.png) no-repeat 0 0;//精灵图倒三角
}

.fl {
	float: left;
}
.fr {
	float: right;
}

头部部分html代码

<div class="top">
		<div class="center banxin">
			<div class="t_c_wel fl">您好，欢迎来到建材网！</div>
			<div class="t_c_nav fr">
				<ul>
					<li><a href="" >网站导航<b></b></a></li>
					<li><a href="">客服中心</a></li>
					<li><a href="" >建材服务<b></b></a></li>
					<li><a href="" >我的收藏<b></b></a></li>
					<li><a href="" >我的商务室<b></b></a></li>
					<li><a href="" >建材网首页</a></li>
				</ul>
			</div>
		</div>
	</div>

二，logo部分

结构：版心>左侧logo图，右侧搜索栏。

html代码

<div class="logo banxin	">
			<h1 class="fl">梅兰商贸</h1>
			<div class="l_search fr">
				<input class="inp" type="text" value="请输入关键字"><input class="btn" type="button" value="搜索">
			</div>
		</div>

我自己用的是h1标题，缩进-9999px使背景图片显示。有利于网站seo。

CSS代码

.logo {
	height: 98px;
	
	
}
.logo h1 {
	width: 206px;
	height: 56px;
	margin: 21px 0 0 10px;
	text-indent: -9999px;
	background: url(../imgs/精灵图.png) no-repeat 0 -5px;
}
.l_search {
	width: 524px;
	height: 35px;
	margin-top: 29px;
	padding: 5px 0 0 4px;
	border: 1px solid #c9c9c9;
	background: #F1F1F1;
}
.l_search .inp {
	width: 418px;
	height: 28px;
	border: 1px solid #A6A6A6;
	color: #999;
}
.btn {
	width: 99px;
	height: 30px;
	background: #2F70D0;
	font-weight: 900;
	color: #c9d8f2; 
}

三，导航部分

导航部分结构：版心>ul>li

html代码

<div class="nav banxin">
		<ul>
			<li class="fl fl1"><a href=""><span>首页</span></a></li>
			<li class="fl"><a href="">建筑材料</a></li>
			<li class="fl"><a href="">儿童安全座椅</a></li>
			<li class="fl"><a href="">工艺美术品</a></li>
		</ul>
	</div>

CSS部分代码

.nav {
	height: 25px;
	border-bottom: 2px solid #0266A3;	
}
.nav li a {
	color: #306BAE;
	font-weight: 900;
}
.nav li a {
	display: inline-block;
	line-height: 25px;
	padding-left: 16px;
	padding-right: 16px;
}
.nav li a:hover {
	background: #0165a3;
	color: white;
}

四，新闻栏

新闻栏部分结构：版心>新闻栏左侧部分，中间部分，右侧部分。右侧部分>上，下两部分.

html代码

<div class="news banxin">
		<div class="n_left fl">
			<h3>商机市场</h3>
			<ul>
				<li><b></b><a href="">建筑材料</a></li>
				<li><b></b><a href="">儿童安全座椅</a></li>
				<li><b></b><a href="">工艺美术品</a></li>
				<li><b></b><a href="">建筑材料</a></li>
				<li><b></b><a href="">儿童安全座椅</a></li>
				<li><b></b><a href="">工艺美术品</a></li>
			</ul>
		</div>
		<div class="n_center fl"></div>
		<div class="n_right fl">
			<div class="n_r_t">
				<h3>建材通大众版</h3>
				<div class="n_r_t_mess">
					<b></b> <span>价格实惠，量身为营销预算不<br>多的供应商所设。了解详情</span>
				</div>
				
			</div>
			<div class="n_r_b">
				<p class="message">找信息或者发布信息遇到问题？</p>
				<i></i><p class="phone">0571-89938887</p>
				<input type="button" class="btn" >
			</div>
		</div>
	</div>

css代码

.news {
	height: 210px;
	margin-top: 10px;	
}
.n_left {
	height: 210px;
	width: 200px;
	
}
.n_left h3 {
	height: 30px;
	line-height: 30px;
	padding-left: 20px;
	background: #0266A3;
	color: #ffffff;
	font-weight: 900;
}
.n_left ul {
	height: 180px;
	background: #EBF0F6;
	
}
.n_left li {
	line-height: 28px;
}
.n_left li:hover {
	background: #0266a3;
}

.n_left a {
	color: #606060;	
}
.n_left b {
	display: inline-block;
	height: 14px;
	width: 21px;
	margin: 0 14px 0 9px;	
	background: url(../imgs/精灵图.png) no-repeat -2px -65px;
	vertical-align: middle;
}
.n_center {
	width: 520px;
	height: 210px;
	margin:0 10px;
	background: red;
}
.n_right {
	width: 230px;
	height: 210px;
}
.n_r_t {
	width: 228px;
	height: 93px;
	margin-bottom: 21px;
	border: 1px solid #DDDDDD;
	background: #F7FAFF;
}
.n_r_t h3 {
	margin: 7px 0  0 20px;
	font-size: 12px;
	font-weight: 900;
	color: #666666;
}
.n_r_t_mess {
	height: 40px;
	margin-top: 20px;
}
.n_r_t_mess span {
	display: inline-block;
	line-height: 20px;
	height: 40px;
	vertical-align: middle;


}
.n_r_t_mess b {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url(../imgs/精灵图.png) no-repeat -210px -6px;
	vertical-align: middle;
		
	
}
.n_r_b {
	position: relative;
	width: 230px;
	height: 94px;
	background: #F7F7F7;
	overflow: hidden;

}
.n_r_b .message {
	margin-top: 11px;
	color: #999999;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}
.n_r_b .phone {
	margin-top: 9px;
	color: #6AB2E6;
	text-align: center;
	font-size: 16px;
}
.n_r_b i {
	position: absolute;
	top: 40px;
	left: 30px;
	display: inline-block;
	width: 15px;
	height: 17px;
	background: url(../imgs/精灵图.png) no-repeat -254px -7px;
}
.n_r_b .btn {
	width: 79px;
	height: 21px;
	border: 1px solid #AFC6E7;
	background: url(../imgs/精灵图.png) no-repeat -273px -8px;
	margin: 7px 0 0 75px;
}

其中右侧电话的图标我用的是子绝父相定位放放置的。其他的用的都是b标签和p标签并列的方法。

五，商品信息部分

商品信息结构：版心>左右两大栏。左侧大栏>两大栏>四中栏>八小栏。右侧大栏分上下两部分。

html代码

<div class="good_nav banxin">建筑材料</div>
	<div class="good banxin">
		<div class="left fl">
			<div class="l_t">
				<div class="g_l_t_mess fl">
					<div class="iimg fl">
						<div class="iimg_img"><!-- <b></b> --></div>
						<input type="button" class="btn" value="立即购买">
					</div>
					<div class="mmess fl">
						<p class="wife">好太太晾衣架 铝钛合金 升降双杆</p>
						<p class="action">
							自动换挡 安全耐用<br>
							稳定性好 抗氧化强
						</p>
						<p class="price"><span>239.00</span>   <del>￥386.00</del></p>
						<p class="one">限量<span>99</span>件，已售出<span>22</span>件</p>
					</div>
				</div>
				<div class="g_l_t_mess fl">
					<div class="iimg fl">
						<div class="iimg_img"><!-- <b></b> --></div>
						<input type="button" class="btn" value="立即购买">
					</div>
					<div class="mmess fl">
						<p class="wife">威尔舒木地板12mm厚网格超值特</p>
						<p class="action">
							防滑抗污 清理简单<br>
							扣紧致密 环保健康
						</p>
						<p class="price"><span>10.00</span><b></b>   <del>￥68.00</del></p>
						<p class="one">限量<span>100</span>件，已售出<span>8</span>件</p>
					</div>
				</div>
			</div>
			 
		</div>
		<div class="right fl">
			<h3>建材资讯</h3>
			<ul>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
				<li><b></b><a href="#">某地钢铁价格</a></li>
			</ul>
		</div>

	</div>

css代码

.good_nav {
	width: 949px;
	height: 34px;
	line-height: 34px;
	margin-top: 14px;
	padding-left: 21px;
	border-top: 2px solid #C3D7E4;
	background: #ECF1F7;
	color: #444444;
}
.good {
	height: 346px;
	margin-top: 11px;	
}
.good .left {
	height: 344px;
	width: 719px;
	margin-right: 11px;
	padding:0 4px;
	border: 1px solid #D8D8D8;

}
.good .l_t {
	height: 172px;
	padding-left: 20px;
	border-bottom: 1px solid #EEEEEE;

}
.g_l_t_mess {
	width: 349px;
	height: 172px;
	/*background: pink;*/
}
.g_l_t_mess .iimg {
	width: 100px;
	height: 172px;
	
}
.g_l_t_mess .mmess {
	width: 249px;
	height: 172px;
	
}
/*使用直接用截图制作带空白的精灵图*/
.iimg_img {
	width: 98px;
	height: 98px;
	margin-top: 15px;
	border: 1px solid #cacaca;
	background: url(../imgs/精灵图.png) no-repeat -121px -171px;
}
/*使用无空白的精灵图制作
 	.iimg_img b {
	display: inline-block;
	width: 90px;
	height: 63px;
	background: url(../imgs/精灵图.png) no-repeat 0 -220px;
	padding: 17px 0 0 4px;
}*/ 
.good .btn {
	width: 100px;
	height: 26px;
	margin-top: 15px;	
	background: #0a84e3;
	font-style: 14px;
	color: white;
	font-weight: bold;

}
.good .wife {
	font-size: 14px;
	margin: 26px 0 0 10px;

}
.good .action {
	color: #863e01;
	margin: 14px 0 0 15px;
} 
.good .price {
	margin: 22px 0 0 11px;
}
.good .price span {
	font-size: 14px;
	font-weight: bold; 
	color: #C50934;
}
.good .one {
	margin: 20px 0 0 14px;
}
.good .one span {
	color: #C50934;
}
.good .l_t b {
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url(../imgs/精灵图.png) no-repeat 0 0;
}
.good .right {
	height: 344px;
	width: 227px;
	border: 1px solid #d8d8d8;
}
.good .right h3 {
	height: 28px;
	line-height: 28px;
	padding-left: 15px;
	color: #4E4E4E;
	border-bottom: 1px solid #E0E6F0;
	background: #FEFEFE;
}
.good .right ul {
	margin-top: 10px;
}
.good .right li {
	height: 24px; 
	line-height: 24px;
}
.good .right b {
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-left: 10px;
	margin-right: 10px;
	background: url(../imgs/精灵图.png) no-repeat -245px -176px;
	vertical-align: middle;
}

六，友情链接

html

<div class="friend banxin">
		<p class="f_top">友情链接：百度 谷歌 新浪 搜狐 苏宁 百度地图 京东商城 中视网盟 连锁店加盟 就爱加盟网 网易 凤凰网 央视网 新华网 雅虎 谷歌 </p>
		<p class="f_bottom">百度地图 京东商城 中视网盟 连锁店加盟 就爱加盟网 网易 凤凰网 央视网 新华网 雅虎 谷歌 </p>
	</div>

css

.friend {
	height: 102px;
	border-top: 1px solid #dddddd;
}
.friend .f_top {
	margin-top: 30px;
}
.friend .f_bottom {
	text-indent: 5em;
	margin-top: 15px;
}

七，网站底部

text-align不能作用与浮动的元素，所以要让想要让文本居中则不能让它浮动。为了让li在一行中显示就用行内快级元素。

html

<div class="foot banxin">
		<ul>
			<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>
			<li><a href="">版权声明 |</a></li>
		</ul>
		<ul>
			<li><a href="">本网站网络实名：中建网本站通用地址： |</a></li>
			<li><a href="">中国建材网 |</a></li>
			<li><a href="">浙B2-20060159</a></li>
		</ul>
	</div>

css

.foot {
	height: 94px;
	border-top: 3px solid #0A7EC3;
}
.foot ul {
	text-align: center; 
	margin-top: 6px;
	

}
.foot li {
	display: inline-block;
	/*float: left;*/
	text-align: center;
	height: 25px;
	line-height: 25px;

}