CSS固定布局实战

最新推荐文章于 2025-02-09 20:35:16 发布
最新推荐文章于 2025-02-09 20:35:16 发布
阅读量1.2k 收藏 1
点赞数 2
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41179401/article/details/79328769
版权

CSS固定布局实战详解

目标:优快云主页

画面预览：

1:

2:

网页解读：

1：总体5个部分：头部，主体（左中右），尾部。

2：主体的中部和右面又分为几小块。

布局：

1 头部：导航栏加搜索框。

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3实战</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body> 
<header>
	<nav>
		<ul class="list">
			<li><a href='#'><img src="yearlogo.png"></a></li>
			<li><a href='#'>博客</a></li>
			<li><a href='#'>学院</a></li>
			<li><a href='#'>下载</a></li>
			<li><a href='#'>GitChat</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='#'>ITeye</a></li>
			<li><a href='#'>码云</a></li>
			<li><a href='#'>CSTO</a></li>
		</ul>
	</nav>	
    <form class="search" action="#" method="post"> 
        <label for="search">search</label> 
        <input type="search" id="search" name="search" 
        placeholder="search" /> 
    </form> 
</header>

css:

*{	
	margin: 0 ;              /*初始化*/
	padding: 0;
}
body{
	background: #F5F6F7;     /*一般将背景设为白色*/
}
a{
	text-decoration: none;	 /*所有a链接去掉下划线*/
}
/*头部*/
header{
	height: 50px;
	line-height: 50px;
	background: url(header_bg.jpg);   /*引入背景图片*/
	/*width: 1366px;*/
}
/*导航条*/
nav .list{
	text-align: center;           /*文本居中*/
	padding-left:  5px;           /*调整导航栏与页面左边的距离*/
}
nav .list li{
	font-size: 14px;
	float: left;
	list-style-type: none;        /*去掉列表点*/	
}
nav .list li:first-child{         /*调整列表第一个li也就是图片的位置*/
	padding-left: 5px;

}
nav .list li+li{                   /*调整列表除第一个li以外的li元素的位置*/
	margin-right:24px;             /*调整每个li元素之间的距离*/ 
}
nav .list li a{
	  color:#fff;                  /*a立即链接元素必须写在这*/                   	
}
nav .list li a:hover{
	color: yellow;                 /*鼠标移到此处效果*/
}
/*搜索框*/
form.search {           /*包含label和input的容器*/ 
    float:right;        /*右浮动*/ 
} 
form.search input { 
	background: #fff url(search.png)no-repeat right center;  /*搜索图标*/
    width:100px; 
    height: 25px;
    outline:none; /*去掉默认的突显轮廓线*/ 
    font-size:.8em;
    border-color:#eee #ccc #ccc #eee;  
    /*针对其他浏览器的厂商前缀*/ 
    border-radius:10px; -webkit-transition:2s width;  
} 
form.search input:focus {   
	width:180px;        /*鼠标移入宽度改变*/
} 
form.search label {
	display:none;        
}

图示：


2 主体：

思路：

1) 三部分不设高度，宽度分别是96px,760px,300px;并排显示都设为浮动。

2) 在调整三部分里面内容边距时，会改变原来所占的大小，解决方法有4个，详见点击打开链接。将三部分分别用一个div包围起来设置宽度这样里面div内容的边距是就不会影响外边的宽度了。(左边不需要调整内容距离就不用了）

3) 将三部分用一个div包围起来，用于整体居中。浮动元素居中详见：方法1：将外面的div宽度设为三个浮动div的宽度之和，注意不是width相加，而是整体宽度，包括之间的边距，再设置margin{0  auto} ，此时3个div都是浮动的，也就是说外面的div的高度为0。如果想设置边框把3个div包围起来要先设置高度。

4）右边将内容放在图片右边，方法：将图片左浮动，内容会挤过来，但如果没充满，下一张图片也会过来，因为浮动脱离文档流。解决方法：三种，详见点击打开链接：这里使用创建父元素设置overflow:hidden。

5)注意图片溢出。设置好图片的大小。

html:

<div id="containter">
 <!--总容器将三部分包围起来-->
	<div id="left">
		<ul>
			<li class="info"><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>
			<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 id="main">
		<div id="main_1"><img src="pic.png" ></div>
		<div id="main_2">
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>			
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>					
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月09日</a><a href='#'>最新文章</a>
				</span>
			</div>			
		</div>
	</div>
	<div id="right">
		<div class="right"><h3>今日推荐</h3>
			<div class="img_father"><img src="1.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="2.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="3.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="4.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="5.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="6.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="7.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="8.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="9.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="10.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="11.JPG"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="12.JPG"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
		</div>
		<div class="right"><h3>程序员杂志</h3>
			<div class="img_father"><img src="right1.png" style="height: 144px;width: 104px;"><a href='#'>《程序员2017精华本》</a><span>16个主题，200余篇文章,180万字——全年精粹尽览，不容错过的前沿技术、工具尽在其中；独家经验分享、亲历者领域案例剖析</span></div>
		</div>
		<div class="right">
			<h3>活动日志</h3>
			<span class="date">14日03月</span>
			<a href="#">2018 TOKENSKY区块链大会-首尔站</a>
		</div>
		<div class="right"><h3>联系我们</h3>
			<div class="img_father"><img src="csdn.png" style="height: 95px;width: 95px;border:1px solid #999;">
				<p>请扫描二维码联系客服</p>
				<p>E:<a href='#'>webmaster@youkuaiyun.com</a></p>
				<p>电话:400-660-0108</p>
				<p><a href='#'>QQ客服</a>|<a href='#'>客服论坛</a></p>
			</div>
		</div>
	</div>
</div>


css:

/*主体*/
#containter{         /*里面3个div都是浮动的，所以此div高度为0*/
	width: 1186px;   
	margin:15px auto;/*要想设置边框把3个div包围起来要先设置高度*/
}

/*左部分*/
#left{
	float: left;
	width: 96px;
	background: #fff;
}
#left ul{
	text-align: center;	
}
#left ul li{	
	list-style-type: none;
	height: 32px;
	line-height: 32px;
	font-size: 14px;	
}
#left ul li a{
	display: block;       	   
    color: #666;
}
#left ul .info a{
	background: #F44444;   /*第一个a设置默认背景*/
	color: #fff;           /*第一个a设置默认字体颜色*/ 
}
#left ul li a:hover{       /*所有a链接鼠标事件*/
	color: #fff;
	background: #F44444;
}
/*中间*/
#main{
	float: left;
	width: 760px;
	margin-left: 15px;  /*与左边保持15px的距离*/
}
#main_1 img{           
	cursor: pointer;/*添加手势*/
}
#main_2{                 /*包围下面所有div*/
	margin-top: 15px;    /*与左上保持15px*/
}
#main_2 .text{           /*下面的每一块设置宽高背景*/  
	width: 760px;
	height:100px;
	margin-bottom: 5px;  /*每一块设置距离*/  
	background: #fff;    /*白色背景*/
}
#main_2 .text p a{       /*段落链接*/
	display: block;
	padding: 10px 0 0 10px;
	color: #333;
	font-size: 18px;
}
#main_2 .text a:hover{
	color: red;
}
#main_2 .text span{      /*内容链接*/
	display: block;
	padding: 40px 20px;
	font-size: 14px;
}
#main_2 .text span a{
	display: block;
	float: left;
	margin-right: 20px;
	color: #349EDF;
	font-size: 14px;
}
/*右面部分*/
#right{
	margin-top: 225px;  /*设置与上面的距离*/
	float: left;
	width: 300px;
	margin-left: 15px;  /*设置与左边的距离*/	
}
#right .right{          /*右边的每一小块*/
	margin-bottom: 15px;
	background: #fff;
	overflow: hidden;
}
#right .right h3{
	padding: 15px 15px;
	font-size: 16px;
	color: #2C3033;
}
#right .right .img_father{  /*创建父元素解决图片脱离文档流问题*/
	overflow: hidden;
	padding: 0 10px 0 15px;
	margin: 0 0 10px 0;
}
#right .right img{       /*设置图片*/
	margin: 0 10px 0 0;
	float: left;
	height: 46px;
	width: 63px;
	cursor: pointer;
}
#right .right  .img_father a{
	color: #666;
	font-size: 14px;
	display: block;
}
#right .right .img_father a:hover{
	color:#F44444; 
}
#right .right  .img_father span{
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: #333;
}
#right .right .date{
	font-size: 14px;
	display: block;
	float: left;
	width:45px;
	padding: 0 0 20px 12px;
}
#right .right a{
	color: #666;
	display: block;
	font-size: 14px;
}
#right .right a:hover{
	color: #F44444;
}
#right .right p{
	font-size: 14px;
	margin-bottom: 8px;
}
#right .right .img_father p a{
	font-size: 14px;
	display: inline;
}

图示：



3 尾部：

html:

<footer>
	<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>
	</ul>
	<p>京 ICP 证 09002463 号|Copyright © 1999-2018, youkuaiyun.com, All Rights Reserved</p>
</footer>

css:

/*尾部*/
footer{
	clear: both;  /*清除浮动*/
	width: 1366px;
	background:#fff;
	height: 120px; 
}
footer ul{
	padding: 20px 0 0px 175px;
	text-align: center;
}
footer ul li{
	float: left;	
	border-right:1px solid #666;
	list-style-type: none;
	padding: 0 15px;
}
footer ul li a{
	display: block;
	color: #666;
	text-align: center;
	font-size: 14px; 
}
footer ul li a:hover{
	color: red;
}
footer p{
	clear: left;
	font-size: 12px;
	padding-left:190px;
	margin-top:40px;
	color: #999;
}

图示：

PS:由于中间的div是没有高度的，所以要清除一下浮动。clear:both;

另外：当缩小屏幕时，布局会乱，上，下俩部分是因为没有宽度，中间不再居中是因为，margin(0,auto)只是在可视页面居中，当窗口缩小时，它可视区占满，也是满足margin(0,auto)的。

图示：


解决方法：1 上下设置宽度；2 对中间部分使用定位：最外面的div相对定位，里面的不用动，不再用margin(0,auto)。

css:

#containter{         /*里面3个div都是浮动的，所以此div高度为0*/
    width: 1286px;
    position: relative;
    top:15px;
    left: 82px;
    overflow: hidden; //加上这句否则外面的div不存在高度无法设置他与下面的距离  
    margin-bottom: 15px;
}

上下的宽度设为1286+82*2=1350px.

图示：

总 html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>12</title>
</head>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
	<!-- 头部导航 -->
	<header>
		<img src="yearlogo.png">
	<nav>
		<ul class="list">
			<li></li>
			<li><a href='#'>博客</a></li>
			<li><a href='#'>学院</a></li>
			<li><a href='#'>下载</a></li>
			<li><a href='#'>GitChat</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='#'>ITeye</a></li>
			<li><a href='#'>码云</a></li>
			<li><a href='#'>CSTO</a></li>
		</ul>
	</nav>	
	<!-- 搜索框 -->
    <form class="search" action="#" method="post"> 
        <label for="search">search</label>    <!--文本-->
        <input type="search" id="search" name="search" 
        placeholder="search" />  <!--框--> 
    </form> 
</header> 
<!-- 主体 -->
<div id="containter" >
 <!--总容器将三部分包围起来-->
	<div id="left">
		<ul>
			<li class="info"><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>
			<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 id="main">
		<div id="main_1"><img src="pic.png" ></div>
		<div id="main_2">
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>			
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>					
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月08日</a><a href='#'>最新文章</a>
				</span>
			</div>
			<div class="text"><p><a href="#">【电子数据揭「洋垃圾」走私案真相】</a></p>
				<span>
					<a href="#">电子物证</a><a href='#'>01月09日</a><a href='#'>最新文章</a>
				</span>
			</div>			
		</div>
	</div>
	<div id="right" >
		<div class="right"><h3>今日推荐</h3>
			<div class="img_father"><img src="1.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="2.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="3.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="4.jpg"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="5.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="6.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="7.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="8.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="9.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="10.png"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="11.JPG"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
			<div class="img_father"><img src="12.JPG"><a href='#'>可落地的区域连产品，需要这样的数据系统</a></div>
		</div>
		<div class="right"><h3>程序员杂志</h3>
			<div class="img_father"><img src="right1.png" style="height: 144px;width: 104px;"><a href='#'>《程序员2017精华本》</a><span>16个主题，200余篇文章,180万字——全年精粹尽览，不容错过的前沿技术、工具尽在其中；独家经验分享、亲历者领域案例剖析</span></div>
		</div>
		<div class="right">
			<h3>活动日志</h3>
			<span class="date">14日03月</span>
			<a href="#">2018 TOKENSKY区块链大会-首尔站</a>
		</div>
		<div class="right"><h3>联系我们</h3>
			<div class="img_father"><img src="csdn.png" style="height: 95px;width: 95px;border:1px solid #999;">
				<p>请扫描二维码联系客服</p>
				<p>E:<a href='#'>webmaster@youkuaiyun.com</a></p>
				<p>电话:400-660-0108</p>
				<p><a href='#'>QQ客服</a>|<a href='#'>客服论坛</a></p>
			</div>
		</div>
	</div>
</div>
<footer>
	<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>
	</ul>
	<p>京 ICP 证 09002463 号|Copyright © 1999-2018, youkuaiyun.com, All Rights Reserved</p>
</footer>
</body>

</html>

总 css:

*{	
	margin: 0 ;              /*初始化*/
	padding: 0;
}
body{
	background: #F5F6F7;     /*一般将背景设为白色*/
}
a{
	text-decoration: none;	 /*所有a链接去掉下划线*/
}
/*头部*/
header{
	background: red;
    width: 1350px;
	height: 50px;
	line-height: 50px;
	background: url(header_bg.jpg)no-repeat;   /*引入背景图片*/
}
header img{       /*这里一定要大小设置好与li高度一样*/
	float: left;
	width: 130px;
	height: 50px;
}
/*导航条*/
nav .list{
	text-align: center;           /*文本居中*/
	padding-left:  5px;           /*调整导航栏与页面左边的距离*/
}
nav .list li{
	font-size: 14px;
	float: left;
	list-style-type: none;        /*去掉列表点*/	
}
nav .list li:first-child{         /*调整列表第一个li也就是图片的位置*/
	padding-left: 5px;

}
nav .list li+li{                   /*调整列表除第一个li以外的li元素的位置*/
	margin-right:24px;             /*调整每个li元素之间的距离*/ 
}
nav .list li a{
	  color:#fff;                  /*a立即链接元素必须写在这*/                   	
}
nav .list li a:hover{
	color: yellow;                 /*鼠标移到此处效果*/
}
/*搜索框*/
form.search {           /*包含label和input的容器*/ 
    float:right;        /*右浮动*/ 
} 
form.search input { 
	background: #fff url(search.png)no-repeat right center;  /*搜索图标*/
    width:100px; 
    height: 25px;
    outline:none; /*去掉默认的突显轮廓线*/ 
    font-size:.8em;
    border-color:#eee #ccc #ccc #eee;  
    /*针对其他浏览器的厂商前缀*/ 
    border-radius:10px; -webkit-transition:2s width;  
} 
form.search input:focus {   
	width:180px;        /*鼠标移入宽度改变*/
} 
form.search label {
	display:none;        
} 
/*主体*/
#containter{         /*里面3个div都是浮动的，所以此div高度为0*/
	width: 1186px;
	position: relative; 
	top:15px;
	left: 82px;
	margin-bottom: 15px;
	overflow: hidden;
}
/*左部分*/
#left{
	float: left;
	width: 96px;
	background: #fff;
}
#left ul{
	text-align: center;	
}
#left ul li{	
	list-style-type: none;
	height: 32px;
	line-height: 32px;
	font-size: 14px;	
}
#left ul li a{
	display: block;       	   
    color: #666;
}
#left ul .info a{
	background: #F44444;   /*第一个a设置默认背景*/
	color: #fff;           /*第一个a设置默认字体颜色*/ 
}
#left ul li a:hover{       /*所有a链接鼠标事件*/
	color: #fff;
	background: #F44444;
}
/*中间*/
#main{
	float: left;
	width: 760px;
	margin-left: 15px;  /*与左边保持15px的距离*/
}
#main_1 img{           
	cursor: pointer;/*添加手势*/
}
#main_2{                 /*包围下面所有div*/
	margin-top: 15px;    /*与左上保持15px*/
}
#main_2 .text{           /*下面的每一块设置宽高背景*/  
	width: 760px;
	height:100px;
	margin-bottom: 5px;  /*每一块设置距离*/  
	background: #fff;    /*白色背景*/
}
#main_2 .text p a{       /*段落链接*/
	display: block;
	padding: 10px 0 0 10px;
	color: #333;
	font-size: 18px;
}
#main_2 .text a:hover{
	color: red;
}
#main_2 .text span{      /*内容链接*/
	display: block;
	padding: 40px 20px;
	font-size: 14px;
}
#main_2 .text span a{
	display: block;
	float: left;
	margin-right: 20px;
	color: #349EDF;
	font-size: 14px;
}
/*右面部分*/
#right{
	margin-top: 225px;  /*设置与上面的距离*/
	float: left;
	width: 300px;
	margin-left: 15px;  /*设置与左边的距离*/	
}
#right .right{          /*右边的每一小块*/
	margin-bottom: 15px;
	background: #fff;
	overflow: hidden;
}
#right .right h3{
	padding: 15px 15px;
	font-size: 16px;
	color: #2C3033;
}
#right .right .img_father{  /*创建父元素解决图片脱离文档流问题*/
	overflow: hidden;
	padding: 0 10px 0 15px;
	margin: 0 0 10px 0;
}
#right .right img{       /*设置图片*/
	margin: 0 10px 0 0;
	float: left;
	height: 46px;
	width: 63px;
	cursor: pointer;
}
#right .right  .img_father a{
	color: #666;
	font-size: 14px;
	display: block;
}
#right .right .img_father a:hover{
	color:#F44444; 
}
#right .right  .img_father span{
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: #333;
}
#right .right .date{
	font-size: 14px;
	display: block;
	float: left;
	width:45px;
	padding: 0 0 20px 12px;
}
#right .right a{
	color: #666;
	display: block;
	font-size: 14px;
}
#right .right a:hover{
	color: #F44444;
}
#right .right p{
	font-size: 14px;
	margin-bottom: 8px;
}
#right .right .img_father p a{
	font-size: 14px;
	display: inline;
}
/*尾部*/
footer{
	clear: both;      /*清除浮动*/
	background:#fff;
	height: 120px;
	width: 1350px; 
}
footer ul{
	padding: 20px 0 0px 175px;
	text-align: center;
}
footer ul li{
	float: left;	
	border-right:1px solid #666;
	list-style-type: none;
	padding: 0 15px;
}
footer ul li a{
	display: block;
	color: #666;
	text-align: center;
	font-size: 14px; 
}
footer ul li a:hover{
	color: red;
}
footer p{
	clear: left;
	font-size: 12px;
	padding-left:190px;
	margin-top:40px;
	color: #999;
}


《web开发： CSS 浮动》
yexiang优快云的专栏
01-21 609
一、CSS 浮动 1. 浮动（float) 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 2. 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 ...
CSS 布局实践
独宠子沫的博客
05-12 1327
前端开发就像盖房子，如果说 HTML 是构成房子的砖瓦， CSS 则是决定这些砖瓦的位置和对它们进行装饰。在实际开发中，前端工程师在拿到设计稿后，都会先梳理页面的大致结构，构思完页面的布局后，再进行 coding。大多数网站都有着相似的布局，掌握这些“套路”便可以快速高效的完成开发工作。 相关属性 我们首先来了解布局相关的 CSS 属性。 display display 是 CSS 布局中很重要的...
CSS学习笔记--Div+Css布局实战(入门)
weixin_34218579的博客
08-04 171
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部，先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style type="text/css" > ...
CSS布局完全指南：从入门到实战
最新发布
qq_63520660的博客
02-09 422
前端开发工程师</p></header><h2>关于我</h2><p>热爱前端技术...
CSS布局实战
qq_43645678的博客
08-06 377
CSS布局实战
Div+Css页面布局实战
06-16
本套"Div+Css页面布局实战"课程专注于教授如何使用Div和CSS进行高效的网页布局设计，帮助开发者掌握创建独特且响应式网页的技能。 Div（Division）是HTML中的一个元素，通常用于组合其他HTML元素，以便于对网页内容...
《CSS网站布局实战》——实例源码包
10-30
《CSS网站布局实战》这本书是CSS学习者的重要参考资料，它深入浅出地讲解了如何运用CSS来构建高效、美观的网站布局。实例源码包包含了书中各个章节的实践案例，帮助读者更好地理解和应用所学知识。其中，"external....
CSS网站布局实战代码资源下载
- **定位技术**：包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed），不同的定位技术可以实现不同的布局效果。 - **浮动布局**：利用float属性可以使元素脱离文档流，实现更...
CSS双列布局实战.doc
07-07
扩展到双列全屏布局，我们可以保持左侧列的固定宽度，但让右侧列宽度自适应。为了实现自适应，我们可以将右侧列设置为`position:absolute; right:0;`，并通过外边距（例如`margin-left:200px;`）来调整其位置，使其...
（全彩版）DIV+CSS实战布局
12-20
全彩版，DIV+CSS，一步一步带你从如何布局到代码如何书写，老少皆宜
DIV+CSS布局-实战篇思路梳理
qq_45383769的博客
04-23 1278
DIV+CSS布局-实战篇思路梳理 某官网首页布局实战（节选） 前端新人的误区 误区1：前端开发需要有设计细胞，要不然写的页面很难看。 回答：前端开发是俺图施工的，会有专门的ui设计师帮忙设计。 获取设计稿件的三种方式： 方式1：去千库网等ui设计素材平台购买（下载）设计稿，然后使用pxcook、慕客或者蓝湖进行标注信息。 优点：略微复杂，需要了解ui的相关知识 建议：如果没有ui设计师搭伙，不太适合新人。 方式2：随便找一个官网，使用qq浏览器，将网页转成图片并下载，然后使用pxcook进行标注 优点：
实践任务：第五章 CSS3布局
qq_71408630的博客
04-22 1147
【代码】实践任务：第五章 CSS3布局。
深入浅出CSS网页布局——从基础到实战
weixin_73348608的博客
09-13 1660
本文将带领大家了解CSS网页布局的基础知识，并通过实例代码，掌握常见的布局方式。
回炉重造，css常规布局系统整理——实战开发后复盘小结
weixin_43207103的博客
07-19 606
回炉重造，css常规布局系统整理——实战开发后复盘小结 写在前面： ​ 在了解css布局之前，我们先了解两个小概念，我认为这将对你有所帮助！ ​ 块级元素：display:bloak；占据一行，下一个元素自动换行，如div等； ​ 行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等； ​ 行内块：display:inline-bloak；使行内元素具有块级元素特性、使块级元素具有行内元素特性； 1 基础css布局 1.1 position定位 ​ pos
新手学DIV+CSS商业网站布局从入门到精通(实战案例版) 朱印宏 pdf扫描版
randyjin的博客
04-01 786
新手学DIV+CSS商业网站布局从入门到精通（实战案例版）系统地讲解了CSS的基础知识和实际运用技术，通过大量实例对CSS进行深入浅出的分析，主要包括CSS的基本语法和概念，系统讲解CSS布局模型、CSS安全性、CSS重用性、CSS合作开发、CSS商业开发规范。着重讲解如何用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时，掌握CSS+DIV的精髓。《新手学DIV+CSS...
CSS 布局案例：不会还有人不会布局吧
甜心森的博客
10-23 992
一文搞定网页布局，CSS 布局。包含行水平居中，垂直居中，两栏布局，三栏布局，粘性布局，瀑布流布局。浮动布局，定位布局，弹性布局，侧边栏宽度可调节布局。
经典css布局案例
weixin_34279246的博客
02-11 2072
经典css布局案例 1、CSS浮动 包括：块元素和行内元素、display属性、浮动float。块元素和行内元素的区别是：块元素有大小，而行内元素没有；块元素默认单独占一行，行内元素都在同一行。 既然块元素和行内元素有各自的特点，当我们需要来回切换他们的模式时，该怎么做呢？例如想要块元素都按行排列。这时，就引入了display属性，它是规定元素应该生成的框的类型，即可以让块元素和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值