search

博客列表 >css中经典布局之双飞翼与圣杯

css中经典布局之双飞翼与圣杯

吃不起土的少年的博客
吃不起土的少年的博客原创
2018年03月28日 19:57:492622浏览

网页开发中常见的俩种经典布局 

  1. 双飞翼

  2. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>XXX美剧网（双飞翼）</title>
	<style type="text/css">
	body{
		background-color: #f4f4f4;
	}
	.header,.footer{             /*设置顶部底部*/
		height: 60px;
		width: 100%;
		background-color: grey;
	}
	.header{
		margin-bottom: 10px;
	}
	.footer{
		clear: both;       /*清除去底部浮动*/
	}
	.top,.bottom {
		height: 100%;
		width: 900px;
		background-color: grey; 
		margin: auto;
		text-align:center;  /*设置顶部底部内部文本水平垂直居中*/
		line-height: 60px; 
	}
	
	.menu {             /*顶部菜单列表高度 设置为居中*/
         float: left;
         height: 60px;
         margin:auto;
    }

   .menu li {             /*顶部菜单列表详细设置；字体 列表样式 */
     	 color: white;
   	     list-style: none;
         float: left;
         height: 60px;
         line-height: 60px;
         text-align: center;
         padding: 0 50px;
    }

   .ad{                  /*广告栏居中以及栏中文字居中*/
        height: 100px;
        width: 1500px;
        background-color: grey;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;  
        line-height: 100px;
    }
    .box{
    	 /*中间三列的框架 用来放置左中右三列 overflow消除子元素的浮动 使当前区块能包下浮动的区块*/
    	 margin-top: 100px; 
		width: 1400px;
		margin:auto;
		overflow: hidden;
		background-color: #ffffff;
	}
	.box1{           /*宽度设置与父元素宽度相同，使左右俩块能换行显示*/
		width: 100%;
		float: left;
		background-color: #ffffff;
	}
	.middle{       
		height: 900px;
		margin: 0 210px;
		width: 100%;  
		float: left;
		background-color: #ffffff;
		border: 10px solid #f4f4f4;
	}
	.left{
		width: 200px;
		min-height:900px;
		float:left;
		margin-left:-100%;/*将原本已被挤到其它行的左块 重新拉回到预设位置*/
		background-color: #ffffff;
		border: 10px solid #f4f4f4 /*给区块添加边框*/
	}
     .right{
		width: 200px;
		min-height:900px;
		float:left;
		margin-left:-220px;/*将原本已被挤到其它行的右块 重新拉回到预设位置 这里因为有边框的原因 所以需要向左多拉20px*/
		background-color: #ffffff;
		border: 10px solid #f4f4f4;

	}
	.moviebox{
		width: 1000px;
        /*用来放着电影列表的区块 */
        overflow: hidden;
        background: #ffffff;
	}
	.movielist ul li{  /*设置每个列表存放内容高宽 使其水平向左对齐*/
		 float: left;
         width: 186px;
         height: 350px;
         padding: 5px;
         border: 12px solid #f4f4f4;
         text-align: left;
         list-style: none;

	}
	.movielist ul li img{ /*设置图片宽高*/
		width: 185px;
        height: 265px;
        margin: 5px auto;
	}
    .movielist ul li span{/*设置图片下方文字区域 使其居中对齐*/
    	width: 180px;
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        float: left;
        text-align: center;
        margin-left: 5px;
        overflow: hidden;
    }
    .bottom1{
    	height: 60px;
    	float: left;
    	margin: auto;

    }
    .bottom1 li{
    	 color: white;
   	     list-style: none;
         float: left;
         height: 60px;
         line-height: 60px;
         text-align: center;
         padding: 0 40px;
     }
     .left ul li{
     	list-style: none;
     	font-size: 25px;
     	padding: 20px 0;
     	color: blue;
     }
     .right ul li{
     	list-style: none;
     	font-size: 25px;
     	padding: 20px 0;
     	color:pink;
     }


	 </style>	

	
</head>
<body>
 <div class="header">
 <div class="top"><ul class="menu">
 	 <li>首页</li>
     <li>今日推荐</li>
     <li>精彩影评</li>
     <li>在线观看</li>
     <li>排行榜</li>
 </ul>
 </div>
 </div>    
 <div class="ad"><a href="http://www.php.cn">广告位招租</a></div>
 <div class="box">  <!-- dom顺序为先中间 后左右 --> 
 <div class="box1">
 <div class="middle"><div class="moviebox"><div class="movielist">
 	<ul>
 		<li>
 			<img src="images/3221.jpg" alt=""><span>绿箭侠</span><span>Arrow</span>
 		</li>
 		<li>
 			<img src="images/3222.jpg" alt=""><span>骑士陨落</span><span>The KnightFall</span>
 		</li>
 		<li>
 			<img src="images/3223.jpg" alt=""><span>哥谭</span><span>The Gotham</span>
 		</li>
 		<li>
 			<img src="images/3224.png" alt=""><span>交叉世界</span><span>The Crossing</span>
 		</li>

 		<li>
 			<img src="images/3225.jpg" alt=""><span>天赋异禀</span><span>Gifted</span>
 		</li>
 		<li>
 			<img src="images/3226.jpg" alt=""><span>纸牌屋</span><span>The house of Cards</span>
 		</li>
 		<li>
 			<img src="images/3227.jpg" alt=""><span>大群</span><span>Legion</span>
 		</li>
 		<li>
 			<img src="images/3228.jpg" alt=""><span>西部世界</span><span>WestWorld</span>
 		</li>
 	</ul>
 </div></div></div>
 </div>
  <div class="left">今日推荐
  <ul>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  	<li>今日推荐</li>
  </ul></div>
   <div class="right">下载排行榜
   <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></div>
   </div>
   <div class="footer">
   <div class="bottom"><ul class="bottom1">
   	<li >瓜皮美剧网</li>
   	<li>|</li>
   	<li>©版权所有</li>
   	<li>|</li>
   	<li>备案：cp-1214123432542</li>
   </ul></div></div>
</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    微信图片_20180328185526.png

    2.圣杯布局

  3. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>327圣杯</title>
	<style type="text/css">
	body{
		background-color: #f4f4f4;
	}
	.header,.footer{             /*设置顶部底部*/
		height: 60px;
		width: 100%;
		background-color: grey;
	}
	
	
	.footer{
		clear: both;       /*清除去底部浮动*/
	}
	.top,.bottom {
		height: 100%;
		width: 1000px;
		background-color: grey; 
		margin: auto;
		text-align:center;  /*设置顶部底部内部文本水平垂直居中*/
		line-height: 60px; 
	}
	.box {
		width: 600px;
		background-color: lightcoral;
		margin:0 auto;	/*设置主区块*/
		                   
		padding:0 200px;
	}

	.left,.middle,.right{  /*左中右三块均要设成左浮动脱离文档流*/
		position: relative;
		min-height: 650px;
		float: left;
	}
	.left{
		left: -200px;
		margin-left: -100%;
		background-color: lightskyblue;
		width: 200px;
	}
	.right{
		right: -200px;
		margin-left: -200px;
		background-color: lightgray;
		width: 200px;

	}
	.middle{
		background-color: lightcoral;
		width: 100%;
	}
	</style>
	
</head>
<body>
<div class="header">
	<div class="top">顶部</div>
	</div>
	<div class="box">               <!--  圣杯布局中 DOM结构必须按照先中间后左右 -->
	<div class="middle">中间</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
	</div>
	<div class="footer">
	 <div class="bottom">底部</div>
	 </div>
</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    微信图片_20180328185558.png

    手抄微信图片_20180328185547.jpg微信图片_20180328185554.jpg

  4. 总结


    一、圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局。

    二、俩者在编写的过程中要注意的是dom结构排序时，将中间主体部分排在最前。

    三、圣杯布局是将三个元素放进一个容器，全部设为浮动，用主体部分将容器装满，使得其他元素换号显示，再通过浮动区块left和right上移到main区块的指定位置。

    四、双飞翼布局同样将三个元素放进一个容器，主体部分套上一个父级块，三列高度设为固定值且为浮动。通过将主体父级块设为100%，把其他俩列挤出并换行显示 ，然后通过给左右边框添加margin使其回到原本位置，再通过给主体增加左右margin 使其撑开。

    五、在实践过程中，我发现圣杯布局中，主体宽度如果比左右俩边宽度小的话 ，布局会出现错位，因此本人更亲向于使用双飞翼布局。

上一条：css布局中双飞翼布局和圣杯布局二中经典案例的/思路和实例-2018年3月28日下一条：20180328作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多