css案例_尚合网的详细解析_项目编写遇到的问题和解决过程_Unit_8;

于 2018-07-20 12:11:35 发布
阅读量2.4k 收藏 10
点赞数 7
分类专栏： Web前端 基于黑马传智 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38053395/article/details/81086599
版权
Web前端 同时被 3 个专栏收录
27 篇文章 1 订阅
订阅专栏
基于黑马传智
25 篇文章 0 订阅
订阅专栏
CSS
20 篇文章 0 订阅
订阅专栏

Topic 1 .设计前的准备工作：

我在设计网页的时候设计师会给我们一张整体的效果图，

我们需要把我们的页面设计成效果图的样式，

我们需要的图片就是从这个图片里面截取，具体怎么截取怎么设计看你自己的思路；

我们在这里使用FW来截取我们所需要的图片（FW的安装破解和简单的应用）；

我们在这是开始写这个网站首页之前呢我们应该做完一下步骤：

我们应该建一个images，css文件夹和index.html;  对于index.html  我们浏览器默认他是这个名字  要是你该其他的名字还要改浏览器，所以这是个不成文的规定；

我们建立css文件夹就是要按照外链式的写法来写的，这个时候我们就可以使用垂直平铺的显示方式；

images是用来存放我们切出来图的地方；

然后我们就开始写网页设计前的三步；

Topic 2 . 设计百合网的头部 ：

Problem 1：

外边距塌陷问题：

子级设置外边距，父级也跟随子级的外边距；

1.添加描边；

2.父级或者子级浮动；

3.父级添加   overflow：hidden；

我们这里没有描边舍弃1  ，  推荐使用二 ；

原因为：我们的头部有一个logo还有一个搜索框，又因为我们的logo用的是h1   h1是块级标签只允许这一行显示他自己；

所以我们这里使用浮动是一举两得；

Problem 2：

我们要注意  我们写网页三要素的时候在第一步  需要加上border：0；

我们的搜索框要在左边加一个小的padding；

我们的两个input这样写是不会显示在一行的

<div class="search">
            <input type="text" class="text" value="请输入关键字"/>
            <input type="button" class="btn" />
 </div>

而我们这样写就会

<input type="text" class="text" value="请输入关键字"/><input type="button" class="btn" />

这个问题让我找了老半天；

总结：我们遇到类似不在应该在一行不在一行的或者应该不在一行在一行的我们都考虑下这个解决办法；

头部编写网页示例：

注意这里的粉色背景是为了便于确定盒子的位置才加上去的；

我们设计完头部要记得去掉；

 代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>尚合网</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>
	<div class="header">
		<h1><img src="images/logo.png" width="180" height="24" alt=""/></h1>
		<div class="search">
			<input type="text" class="text" value="请输入关键字"/><input type="button" class="btn" />
		</div>
	</div>
</body>
</html> 
@charset "utf-8";
/* CSS Document */
body,div,p,a,img,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,input{padding: 0px; margin: 0px; list-style: none; border:0px; }
body{font-family: "宋体"; font-size:12px; color: #717171; }
a{color:#717171; text-decoration: none; }
a:hover{color: #a3b800; text-decoration: underline; }
.header{width: 980px; height: 62px; margin: 0px auto;  background: pink; }
.header h1{margin-top: 20px; float: left; }
.search {width: 200px; height: 32px; margin:20px 8px 0px 0px; float: right; background: #ccc; }
/*我们这里的 padding-left: 6px;是为了样式美观*/
.text{ height:32px; width:160px; 
background:url(../images/search.png); color:#acacac ; padding-left: 6px;}
.btn{height:32px; width:32px; background:url(../images/search2.png); }

 Topic 3 . 导航栏 ：

 1.切图问题：

/*我们的这个导航栏宽度是100%的 所以我们就不设置他的宽度  只设置他的高度就好  还有就是我们这种导航栏的背景每一像素都是一样的截图方法  那么我们就直截图截取一像素（我们先选中一块在下面的属相的位置把宽度改为一像素） */

2.网页示例如下：

去掉粉色的背景为：（在这里我是为了再次强调我们写背景来区分的重要性）

说明：我们上面这个图片应该是显示的时候被缩放了因为显示不下；

 代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>尚合网</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>
	<div class="header">
		<h1><img src="images/logo.png" width="180" height="24" alt=""/></h1>
		<div class="search">
			<input type="text" class="text" value="请输入关键字"/><input type="button" class="btn" />
		</div>
	</div>
	
	<div class="nav_all">
		<div class="nav">
			<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>
			
			</ul>
		</div>
		
	</div>
</body>
</html> 

@charset "utf-8";
/* CSS Document */
body,div,p,a,img,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,input{padding: 0px; margin: 0px; list-style: none; border:0px; }
body{font-family: "宋体"; font-size:12px; color: #717171; }
a{color:#717171; text-decoration: none; }
a:hover{color: #a3b800; text-decoration: underline; }
.header{width: 980px; height: 62px; margin: 0px auto; }
.header h1{margin-top: 20px; float: left; }
/* 在这个地方我们要把宽度设置成198px 多的话背景颜色会楼西户来形成一个细线  我们也可以把背景颜色给去掉这样就不用担心背景颜色漏出来的问题了*/
.search {width: 198px; height: 32px; margin:20px 8px 0px 0px; float: right; background: #ccc; }
/*我们这里的 padding-left: 6px;是为了样式美观*/
.text{ height:32px; width:160px; 
background:url(../images/search.png); color:#acacac ; padding-left: 6px;}
.btn{height:32px; width:32px; background:url(../images/search2.png); }
/*我们的这个导航栏宽度是100%的 所以我们就不设置他的宽度  只设置他的高度就好  还有就是我们这种导航栏的背景每一像素都是一样的截图方法  那么我们就直截图截取一像素（我们先选中一块在下面的属相的位置把宽度改为一像素） */
.nav_all{height: 57px; background:url(../images/navBg.png); }
.nav{width: 980px; height: 57px; margin: 0px auto;  }
.nav li{width: 130px; background: url(../images/nav_line.png) no-repeat  right 0px;  float: left; text-align: center; line-height: 57px; font-size: 16px; font-weight: bold;}

注意：background: url(../images/nav_line.png) no-repeat  right 0px;   我们背景图的定位第一个是水平方向，第二个是垂直方向，这个定位的顺序是不能颠倒的；

Topic 4 . banner 和  公告栏 ：

网页示例：

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>尚合网</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>
	<div class="header">
		<h1><img src="images/logo.png" width="180" height="24" alt=""/></h1>
	  <div class="search">
			<input type="text" class="text" value="请输入关键字"/><input type="button" class="btn" />
		</div>
	</div>
	
	<div class="nav_all">
		<div class="nav">
			<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>
			</ul>
 		 </div>
	</div>
	
	<div class="banner">
    	<a href="#"><img src="images/mainImg.png" width="981" height="620" alt=""/></a> 
	</div>
	
	<div class="news_all">
	  <div class="news">
			<div class="left">
				<p><span>最新公告：</span>  <a href="#">尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方</a></p>
			</div>
			<div class="right">
		  		<img src="images/right1.png" width="16" height="17" alt=""/> <img src="images/right2.png" width="16" height="16" alt=""/> <img src="images/right3.png" width="16" height="16" alt=""/> <img src="images/right4.png" width="17" height="16" alt=""/>
		   </div>
		</div>
	</div>
	
	
</body>
</html>

 

@charset "utf-8";
/* CSS Document */
body,div,p,a,img,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,input{padding: 0px; margin: 0px; list-style: none; border:0px; }
body{font-family: "宋体"; font-size:12px; color: #717171; }
a{color:#717171; text-decoration: none; }
a:hover{color: #a3b800; text-decoration: underline; }
.header{width: 980px; height: 62px; margin: 0px auto; }
.header h1{margin-top: 20px; float: left; }
/* 在这个地方我们要把宽度设置成198px 多的话背景颜色会楼西户来形成一个细线  我们也可以把背景颜色给去掉这样就不用担心背景颜色漏出来的问题了*/
.search {width: 198px; height: 32px; margin:20px 8px 0px 0px; float: right; background: #ccc; }
/*我们这里的 padding-left: 6px;是为了样式美观*/
.text{ height:32px; width:160px; 
background:url(../images/search.png); color:#acacac ; padding-left: 6px;}
.btn{height:32px; width:32px; background:url(../images/search2.png); }
/*我们的这个导航栏宽度是100%的他是一个通栏 （li都在版心的位置） 所以我们就不设置他的宽度  只设置他的高度就好  还有就是我们这种导航栏的背景每一像素都是一样的截图方法  那么我们就直截图截取一像素（我们先选中一块在下面的属相的位置把宽度改为一像素） */
.nav_all{height: 57px; background:url(../images/navBg.png); }
.nav{width: 980px; height: 57px; margin: 0px auto;  }
.nav li{width: 130px; background: url(../images/nav_line.png) no-repeat  right 0px;  float: left; text-align: center; line-height: 57px; font-size: 16px; font-weight: bold;}
.banner{width: 981px; height: 620px; margin: 0px auto; }
.news_all{height: 30px; background: #fbfbfb; border: 1px solid #efefef; margin-top: 42px ; }
.news{width: 980px; height:30px; margin: 0 auto; }
.news .left{float: left; line-height: 30px; }
.news .left span{font-weight: bold; }
.news .right{float: right; margin-top: 5px; }

 

注意：对于我们的left和right这些我们在控制的时候一般都要用后代选择器去控制  因为他们运用的实在是广泛   所以我们避免冲突

Topic 5 . 完整版 ：

注意： 一个dl是一列

dt只是那一列的标题  你别认为dt是一列就好了；

 

网页示例如下：

 


 

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>尚合网</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>
	<div class="header">
		<h1><img src="images/logo.png" width="180" height="24" alt=""/></h1>
	  <div class="search">
			<input type="text" class="text" value="请输入关键字"/><input type="button" class="btn" />
		</div>
	</div>
	
	<div class="nav_all">
		<div class="nav">
			<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>
			</ul>
 		 </div>
	</div>
	
	<div class="banner">
    	<a href="#"><img src="images/mainImg.png" width="981" height="620" alt=""/></a> 
	</div>
	
	<div class="news_all">
	  <div class="news">
			<div class="left">
				<p><span>最新公告：</span>  <a href="#">尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方</a></p>
			</div>
			<div class="right">
		  		<a href="#"><img src="images/right1.png" width="16" height="17" alt=""/> </a>
				<a href="#"><img src="images/right2.png" width="16" height="16" alt=""/></a>
				<a href="#"><img src="images/right3.png" width="16" height="16" alt=""/> </a>
				<a href="#"><img src="images/right4.png" width="17" height="16" alt=""/></a>
		   </div>
		</div>
	</div>
	
	
	<div class="con">
		<div class="left">
			<div class="title">
				<h3>新品发布</h3>
			</div>
			<span class="leftJ">
				<img src="images/con2.png" width="13" height="21" alt=""/>
			</span>
			<ul>
				<li><a href="#"><img src="images/con4.png" width="95" height="145" alt=""/></a> </li>
			</ul>
			<span class="rightJ">
				<img src="images/con3.png" width="12" height="19" alt=""/> 
			</span>
		</div>
		
		
		
		<div class="center">
			<div class="title">
				<h3>新闻中心</h3>
				<span class="more">更多</span>
			</div>
			<div class="conCen">
				<ul class="ulCen">
					<li><a href="#"><span>致歉公告</span></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="right">
			<div class="title">
				<h3>技术与支持</h3>
			</div>
			<div class="rigCon">
				<ul class="rigUl">
					<li><a href="#">售后服务</a></li>
					<li><a href="#">售后服务</a></li>
					<li><a href="#">售后服务</a>
					</li>
					<li><a href="#">售后服务</a></li>
				</ul><br>
			</div>
			<div class="p1">
				<p>深圳市汇聚众合科技发展有限公司<br>
				服务热线：400-633-7922</p>
			</div>	
		</div>
	</div>
	
	
<div class="last">
		<div class="center">
			<dl>
				<dt>尚合网守夜</dt>
					<dd>
						<span></span>
					</dd>
					<dd>
						投诉与建议
					</dd>
					<dd>
						服务与支持
					</dd>
					<dd>
						服务与支持
					</dd>
			</dl>
				<dl>
					<dt>智能手机</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
				</dl>
				<dl>
					<dt>平板电脑</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
				</dl>
				<dl>
					<dt>配件中心</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
				</dl>
				<dl>
					<dt>关于我们</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					
	
				</dl>
				<dl>
					<dt>新闻中心</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>

				</dl>
				<dl>
					<dt>服务中心</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>

				</dl>
				<dl>
					<dt>常用链接</dt>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>
					<dd>服务与支持</dd>

				</dl>
				<dl class="img">
					<dt>
						<a href="#"><img src="images/con6.png" width="51" height="26" alt=""/></a>
					</dt>
			   </dl>
	</div>
	<div class="bottom">
		<p>©2011-2012版权所有 深圳市汇聚众合科技发展有限公司 （品牌：尚合-SAMHAVE）<br>
		 服务热线：400-633-7922
		经营许可证编号：粤ICP备11077821号-1</p>
	</div>
</div>
</body>
</html> 

@charset "utf-8";
/* CSS Document */
body,div,p,a,img,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,input{padding: 0px; margin: 0px; list-style: none; border:0px; }
body{font-family: "宋体"; font-size:12px; color: #717171; }
a{color:#717171; text-decoration: none; }
a:hover{color: #a3b800; text-decoration: underline; }


.header{width: 980px; height: 62px; margin: 0px auto; }
.header h1{margin-top: 20px; float: left; }
/* 在这个地方我们要把宽度设置成198px 多的话背景颜色会楼西户来形成一个细线  我们也可以把背景颜色给去掉这样就不用担心背景颜色漏出来的问题了*/
.search {width: 198px; height: 32px; margin:20px 8px 0px 0px; float: right; background: #ccc; }
/*我们这里的 padding-left: 6px;是为了样式美观*/
.text{ height:32px; width:160px; 
background:url(../images/search.png); color:#acacac ; padding-left: 6px;}
.btn{height:32px; width:32px; background:url(../images/search2.png); }


/*我们的这个导航栏宽度是100%的他是一个通栏 （li都在版心的位置） 所以我们就不设置他的宽度  只设置他的高度就好  还有就是我们这种导航栏的背景每一像素都是一样的截图方法  那么我们就直截图截取一像素（我们先选中一块在下面的属相的位置把宽度改为一像素） */
.nav_all{height: 57px; background:url(../images/navBg.png); }
.nav{width: 980px; height: 57px; margin: 0px auto;  }
.nav li{width: 130px; background: url(../images/nav_line.png) no-repeat  right 0px;  float: left; text-align: center; line-height: 57px; font-size: 16px; font-weight: bold;}
.banner{width: 981px; height: 620px; margin: 0px auto; }
.news_all{height: 30px; background: #fbfbfb; border: 1px solid #efefef; margin-top: 42px ; }
.news{width: 980px; height:30px; margin: 0 auto; }
.news .left{float: left; line-height: 30px; }
.news .left span{font-weight: bold; }
.news .right{float: right; margin-top: 5px; }


.con{width: 980px; height: 227px; margin: 15px auto 0; }
.con .left{width: 313px; height: 227px; border: 1px solid #cccccc; float: left; }
.con .left .title{margin-top: 10px; margin-left: 5px;  color: #7ab800; }
/*注意：我们在文字的前面加一个背景图片只需要设置相应的padding就好了  图片不会移动的*/
.con .left .title h3{ background:url(../images/con1.png) no-repeat; padding-left: 22px; }
.con .leftJ{float: left; margin: 65px 65px 0px 25px; }
.con ul{float: left; margin-top: 15px; }
.con .rightJ{float: left; margin: 65px 25px 0px 65px; }


.con .center{width: 375px; height:227px; border: 1px #cccccc solid; float: left; margin-left: 9px; }
.con .center .title{margin-top: 10px; margin-left: 5px;  color: #7ab800; }
.con .center .title h3{ background:url(../images/con1.png) no-repeat; padding-left: 22px; float:left;}
.con .center .title .more{float: right; font-size: bold; color: #717171;}
.center .conCen .ulCen li{ width:327px; height:30px; padding-left: 22px; border-bottom: 1px #dcdcdc dashed; color:#717171; font-weight: bold; line-height: 30px; }
.center .conCen .ulCen span{color: red; }


.con .right{width: 270px; height:227px; border: 1px solid #cccccc; float: right; }
.con .right .title{margin-top: 10px; margin-left: 5px;  color: #7ab800; }
.con .right .title h3{ background:url(../images/con1.png) no-repeat; padding-left: 22px; float:left;}
.right .rigCon .rigUl li{ width:230px; height:20px; line-height: 20px; color:#717171; font-weight: bold; background: url(../images/con5.png) no-repeat 0 center; margin-left: 20px; padding-left: 8px;  }
.right .p1{ margin-top: 140px; margin-left: 28px; }


.last{ height:305px; background: #2d2d2d; margin-top: 50px; }
.last .center{width: 980px; height:220px; margin: 0px auto; padding: 20px; }
.last .center dl{float: left; width:105px; height: 235px; }
.last .center dt{height:28px; color: #c7c7c7;}
.last .center dd{line-height: 21px; }
.last .center .img{float: right; }
.last .bottom{height:85px; border-top: #414141 1px dashed; }

.last .bottom{text-align: center; line-height: 20px;}

 

内涵是一种信仰
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值