CSS+DIV布局

最新推荐文章于 2023-09-05 17:23:11 发布
最新推荐文章于 2023-09-05 17:23:11 发布
阅读量1.3k 收藏 6
点赞数 1
分类专栏： HTML+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_t_y_y/article/details/78274673
版权

css+div可以实现很多复杂的布局，下面来看其中一个比较经典的布局：


我们可以把整个布局当做一个大的div，里面套着四个div，一个是头部，一个是导航栏，一个是主体（里面再分为两个div，利用浮动排成水平方向），一个是尾部。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0;/*清除浏览器自带的margin,使后面设置container的margin生效*/
			}
			.container{
				height: 700px;
				width: 1000px;
				border: 1px solid black;
				box-sizing: border-box;  /*边框内置,作为内容的一部分,不突出去*/
				margin:0 auto;  /*前面一个参数0表示上下margin为0,后面auto表示左右居中*/
			}
			.header{
				width: 100%;
				height: 10%;
				border: 1px solid black;
				box-sizing: border-box;
				background-color: green;
			}
			.navbar{
				width: 100%;
				height: 5%;
				background-color: blue;
				border: 1px solid black;
				box-sizing: border-box;
				margin-top: 5px;
			}
			.maincontainer{
				margin-top: 5px;
				width: 100%;
				border: 1px solid black;
				box-sizing: border-box;
				//background-color: green;
				height: 75%;
			}
			.footer{
				height: 9%;
				background-color: blue;
				margin-top: 4px;
				box-sizing: border-box;
			}
			.left{
				border: 1px solid black;
				box-sizing: border-box;
				height: 100%;
				width: 30%;
				background-color: yellow;
				float: left;
			}
			.main{
				border: 1px solid black;
				box-sizing: border-box;
				height: 100%;
				width: 65%;
				background-color: deepskyblue;
				float: left;
				margin-left: 5%;
			}
			.footer{
				clear: both; /*其实这里可以不需要clear，因为footer是在maincontainer的外面，而不是在里面，
				如果是和left、main并列的则必须clear*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">头部</div>
			<div class="navbar">导航条</div>
			<div class="maincontainer">
				<div class="left">侧边栏</div>
				<div class="main">内容</div>
			</div>
			<div class="footer">尾部</div>
		</div>
	</body>
</html>

下面来实战模仿csdn的首页进行布局：


首先写出大致布局：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            body{  
                margin: 0;  
                background-color:darkgray;  
            }  
            .div1{
            	height: 40px;
            	background-color: #333;
            }
             .div2{
            	height: 40px;
            	background-color: white;
            	
            }
            .container{  
                width: 1000px;  
                height: 800px;  
                background-color: wheat;  
                margin: 0 auto;  
                margin-top: 0px;
                clear: both;
            }  
            /*.header{  
                width: 100%;  
                background-color: green;  
                height: 6%;  
            }  */
            .navbar{  
                width: 100%;  
                height: 10%;  
                background-color: yellow;  
                
            }  
            .maincontainer{  
                width: 100%;  
                height: 76%;  
                margin-top: 2%;  
                background-color: pink;  
            }  
            .footer{  
                width: 100%;  
                height: 10%;  
                margin-top: 2%;  
                background-color: royalblue;  
            }  
            .main{  
                height: 100%;  
                width: 70%;  
                background-color: peru;  
                float: left;  
            }  
            .right{  
                height: 100%;  
                width: 28%;  
                background-color: blueviolet;  
                float: left;  
                margin-left: 2%;  
            }  
            
        </style>  
    </head>  
    <body>  
    	<div class="div1"></div>
    	<div class="div2">

    	</div>
        <div class="container">  
            <div class="navbar">导航</div>  
            <div class="maincontainer">  
                <div class="main">内容</div>  
                <div class="right">右侧</div>  
            </div>  
            <div class="footer">尾部</div>  
        </div>  
    </body>  
</html>


效果是这样的：


再逐步填充里面的内容：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            body{  
                margin: 0;  
                background-color:#e7ecef;  
            }  
            .div1{
            	height: 40px;
            	background-color: #333;
            }
             .div2{
            	height: 40px;
            	background-color: white;
            	
            }
            .container{  
                width: 1200px;  
                height: 800px;  
                
                margin: 0 auto;  
                margin-top: 0px;
                clear: both;
                margin-top: 10px;
            }  
           
            .navbar{  
                width: 100%;  
                height: 10%;  
              
                
            }  
            .navbar1{  
                width: 83%;  
                height: 100%;
                float: left;  
               background-image: url(img/dh.png);
              
                
            }  
            .navbar2{ 
            	height: 100%; 
                width: 15%; 
                margin-left: 2%; 
                float: left;
                border: 1px solid gainsboro;
                box-sizing: border-box;
                background-color: white;
            	
            }  
            .maincontainer{  
                width: 100%;  
                height: 76%;  
                margin-top: 2%;  
                background-color: #e7ecef;  
            }  
            .footer{  
               
                height: 100px;  
               text-align: center;
                background-color: white;  
                vertical-align: middle;
            }  
            .main{  
                height: 100%;  
                width: 70%;  
                background-color: white;  
                float: left;  
            }  
            .right{  
                height: 100%;  
                width: 28%;  
                background-color: white;  
                float: left;  
                margin-left: 2%;  
            }  
            .bk{
            	margin-left: 16%;
            	font-size: 25px;
            	color: white;
            	text-indent: 50px;
            }
            ul{
            	display: inline;/*变为行级元素，否则下移了*/
            }
            ul li{
            	
            	width: 100px;
            	list-style-type: none;
            	float: left;
      
            }
            a{
            	text-decoration: none;
            }
            a:link{
            	color: blue;
            }
            a:visited{
            	color: black;
            }
            a:hover{
            	color: green;
            }
            a:active{
            	color: yellow;
            }
            .csdn{
            	text-align: center;
            }
            .div21{
            	text-align: center;
            	margin-left: 18%;
            	font-size: 18px;
            	
            }
            .main1{
            
            	width: 100%;
            	height: 8%;
            	background-color: white;
            	border-bottom: 15px solid #e7ecef;
            	
            }
            .main1_div1{
            	
            	float: left;
            	margin-left: 10%;
            	font-size: 15px;
            	
            }
            .main1_div2{
            	float: left;
            	margin-left: 10%;
            	font-size: 15px;
            }
            .main2{
            	width: 100%;
            	height: 30%;
            	//background-color: red;
            	border-bottom: 1px dashed gainsboro;
            }
            .main2_left{
            	width: 20%;
            	height: 100%;
            	border-right: 1px dashed gainsboro;
            	float: left;
            }
            .main2_left_top {
            	width: 80%;
            	height: 60%;
            	margin-left: 10%;
            	margin-right: 10%;
            	margin-top: 10%;
            }
            .main2_left_top img{
            	width: 100%;
            	height: 100%;
            	border-radius: 50%;
            }
            .main2_left_bottom{
            	text-align: center;
            }
            .main2_right{
            	margin-left: 2%;
            	width: 75%;
            	height: 100%;
            	float: left;
            }
            .float_left{
            	float: left;
            }
            .float_right{
            	float: left;
            	margin-left: 20%;
            }
            .right1{
            	width: 100%;
            	height: 30%;
            	border-bottom: 10px solid #e7ecef;
            	margin: auto;
            }
            .right2{
            	width: 100%;
            	height: 30%;
            	border-bottom: 10px solid #e7ecef;
            }
            .right3{
            	width: 100%;
            	height: 30%;
            }
            .right1_1{
            	width: 40%;
            	height: 60%;
            	margin-left: 30%;/*左右边距相等，即可居中*/
            	margin-right: 30%;
            	margin-top: 5%;
            }
            .right1_1 img{
            	width: 100%;
            	height: 100%;
            	border-radius: 50%;
            }
            .right1_2{
            	height: 10%;
            	text-align: center;
            }
            .right1_3{
            	height: 10%;
            	text-align: center;
            }
        </style>  
    </head>  
    <body>  
    	<div class="div1">
    		<div class="bk">博客</div>
    	</div>
    	<div class="div2">
    		<div class="div21">
    		<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>
				</ul>
				</div>
    	</div>
        <div class="container">  
            <div class="navbar">
            	<div class="navbar1"></div>
            	<div class="navbar2"><p class="csdn">CSDN</p></div>
            </div>  
            <div class="maincontainer">  
            	
                <div class="main">
                	<div class="main1">
                		<div class="main1_div1"><a href="">关于csdn新皮肤的说明</a></div>
                		<div class="main1_div2"><a href="">关于AI</a></div>
                	</div>
                	
                	<div class="main2">
                		<div class="main2_left">
                			<div class="main2_left_top">
                				<img src="img/wawa.png" />
                			</div>
                			<div class="main2_left_bottom">娃娃</div>
                		</div>
                		<div class="main2_right">
                			<h3>史上最难的java面试题</h3>
                			<div>
                			<a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。
                				题目如下：public class TestSync2 implements Runnable { int b...</a>
                				</div>
                				<div class="float_left"><ul>
                						<li><a href="">云计算</a></li>
                						<li><a href="">高并发</a></li>
                					</ul>
                				</div>
                				<div class="float_right">昨天</div>
                		</div>
                	</div>
                	
                	<div class="main2">
                		<div class="main2_left">
                			<div class="main2_left_top">
                				<img src="img/wawa.png" />
                			</div>
                			<div class="main2_left_bottom">娃娃</div>
                		</div>
                		<div class="main2_right">
                			<h3>史上最难的java面试题</h3>
                			<div>
                			<a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。
                				题目如下：public class TestSync2 implements Runnable { int b...</a>
                				</div>
                				<div class="float_left"><ul>
                						<li><a href="">云计算</a></li>
                						<li><a href="">高并发</a></li>
                					</ul>
                				</div>
                				<div class="float_right">昨天</div>
                		</div>
                	</div>
                	
                	<div class="main2">
                		<div class="main2_left">
                			<div class="main2_left_top">
                				<img src="img/wawa.png" />
                			</div>
                			<div class="main2_left_bottom">娃娃</div>
                		</div>
                		<div class="main2_right">
                			<h3>史上最难的java面试题</h3>
                			<div>
                			<a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。
                				题目如下：public class TestSync2 implements Runnable { int b...</a>
                				</div>
                				<div class="float_left"><ul>
                						<li><a href="">云计算</a></li>
                						<li><a href="">高并发</a></li>
                					</ul>
                				</div>
                				<div class="float_right">昨天</div>
                		</div>
                	</div>
                	
                </div>  
                
                
                <div class="right">
                	<div class="right1">
                		<div class="right1_1"><img src="img/p.png"></div>
                	    <div class="right1_2"><h4>宝宝</h4></div>
                	    <div class="right1_3">精通python</div>
                	</div>
                	<div class="right1">
                		<div class="right1_1"><img src="img/p.png"></div>
                	    <div class="right1_2"><h4>宝宝</h4></div>
                	    <div class="right1_3">精通python</div>
                	</div>
                <div class="right1">
                		<div class="right1_1"><img src="img/p.png"></div>
                	    <div class="right1_2"><h4>宝宝</h4></div>
                	    <div class="right1_3">精通python</div>
                	</div></div>  
            </div>  
             
        </div>  
        <div class="footer">尾部</div> 
    </body>  
</html>

大致效果如下：


再仿淘宝首页：


布局代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
				background-color:#e7ecef; 
			}
			.div1{
				height: 40px;
				background-color: lightgrey;
			}
			.div2{
				height: 120px;
				background-color: #f5f5f5;
			}
			.div3{
				height: 30px;
				background-color: orange;
			}
			.container{
				//width: 1204px;
				height: 2000px;
				background-color: pink;
				margin: 0 auto;
				margin-left: 12%;
				margin-right: 12%;
			}
			.footer{
				height: 265px;
				background-color: grey;
			}
			.bottom{
				height: 245px;
				background-color: red;
			}
			.div1_left{
				width: 30%;
				height: 100%;
				background-color: red;
				margin-left: 12%;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div1_right{
				height: 100%;
				width: 40%;
				background-color: blue;
				margin-left: 15%;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div2_left{
				height: 100%;
				width: 12%;
				background-color: purple;
				float: left;
				margin-left: 12%;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div2_mid{
				height: 100%;
				width: 45%;
				background-color: blue;
				float: left;
				margin-left: 6%;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div2_right{
				height: 100%;
				width: 10%;
				background-color: skyblue;
				float: left;
				margin-left: 6%;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div3_1{
				height: 100%;
				width: 12%;
				margin-left: 12%;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
				background-color: greenyellow;
			}
			.div3_2{
				height: 100%;
				width: 15%;
				background-color: powderblue;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div3_3{
				height: 100%;
				width: 25%;
				background-color: darkcyan;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.div3_4{
				height: 100%;
				width: 20%;
				background-color: darkgoldenrod;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.main1{
				width: 100%;
				height: 32%;
				background-color: #e7ecef;
				border-bottom: 10px solid #e7ecef;
			}
			.main1_left{
				width: 70%;
				height: 100%;
				float: left;
				background-color: #e7ecef;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_right{
				width: 29%;
				height: 100%;
				float: right;
				
				background-color: #e7ecef;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top{
				width:100%;
				height: 80%;
				
				border: 1px solid black;
				box-sizing: border-box;
				background-color: #e7ecef;
			}
			.main1_left_bottom{
				width:100%;
				height: 18%;
				border: 1px solid black;
				box-sizing: border-box;
				background-color: brown;
				margin-top: 2%;
			}
			.main1_left_top_left{
				height: 100%;
				width: 22.5%;
				float: left;
				background-color: deepskyblue;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top_right{
				height: 100%;
				width: 77.5%;
				float: right;
				background-color: #e7ecef;
			}
			.main1_left_top_right_left{
				height: 97%;
				width: 63%;
				background-color: #e7ecef;
				float: left;
				margin: 2%;
				margin-bottom: 0px;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top_right_right{
				height: 97%;
				width: 30%;
				background-color: #e7ecef;
				float: right;
				margin-top: 2%;
				margin-right: 2%;
				border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top_right_left_top{
				width: 100%;
				height: 48%;
				border: 1px solid black;
				box-sizing: border-box;
				background-color: pink;
			}
			.main1_left_top_right_left_bottom{
				width: 100%;
				height: 48%;
				border: 1px solid black;
				box-sizing: border-box;
				background-color: deeppink;
			}
			.main1_left_top_right_left_mid{
				width: 100%;
				height: 4%;
				
			}
			.main1_right_1{
				width: 100%;
				height: 20%;
				box-sizing: border-box;
				border: 1px solid black;
				background-color: deeppink;
			}
			.main1_right_2{
				width: 100%;
				height: 5%;
				box-sizing: border-box;
				border: 1px solid black;
				background-color: red;
			}
			.main1_right_3{
				width: 100%;
				height: 60%;
				box-sizing: border-box;
				border: 1px solid black;
				background-color: blue;
			}
			.main1_right_4{
				width: 100%;
				height: 15%;
				box-sizing: border-box;
				border: 1px solid black;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div1_left"></div>
			<div class="div1_right"></div>
		</div>
		
		
		<div class="div2">
			<div class="div2_left"></div>
			<div class="div2_mid"></div>
			<div class="div2_right"></div>
		</div>
		
		
		<div class="div3">
			<div class="div3_1"></div>
			<div class="div3_2"></div>
			<div class="div3_3"></div>
			<div class="div3_4"></div>
		</div>
		
		
		<div class="container">
			<div class="main1">
				<div class="main1_left">
					<div class="main1_left_top">
						<div class="main1_left_top_left"></div>
						<div class="main1_left_top_right">
							<div class="main1_left_top_right_left">
								<div class="main1_left_top_right_left_top"></div>
								<div class="main1_left_top_right_left_mid"></div>
								<div class="main1_left_top_right_left_bottom"></div>
							</div>
							<div class="main1_left_top_right_right">
								<div class="main1_left_top_right_left_top"></div>
								<div class="main1_left_top_right_left_mid"></div>
								<div class="main1_left_top_right_left_bottom"></div>
							</div>
						</div>
					</div>
					<div class="main1_left_bottom"></div>
				</div>
				
				<div class="main1_right">
					<div class="main1_right_1"></div>
					<div class="main1_right_2"></div>
					<div class="main1_right_3"></div>
					<div class="main1_right_4"></div>
				</div>
			</div>
		</div>
		
		
		<div class="footer"></div>
		
		
		<div class="bottom"></div>
	</body>
</html>
效果如下：


大致填充如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
				background-color:#e7ecef; 
			}
			.div1{
				height: 40px;
				background-color: orangered;
				
			}
			.div2{
				height: 120px;
				background-color: #f5f5f5;
			}
			.div3{
				height: 30px;
				background-color: orange;
			}
			.container{
				//width: 1204px;
				height: 2000px;
				background-color: pink;
				margin: 0 auto;
				margin-left: 12%;
				margin-right: 12%;
				
			}
			.floatdiv{
				position: fixed;
				top:200px;
				right: 100px;
				
				background-color: white;
				text-align: center;
				width: 100px;
				height: 500px;
				
			}
			.footer{
				height: 265px;
				background-color: grey;
			}
			.bottom{
				height: 245px;
				background-color: red;
			}
			.div1_left{
				width: 30%;
				height: 100%;
				//background-color: red;
				margin-left: 12%;
				float: left;
				//border: 1px solid black;
				box-sizing: border-box;
				vertical-align: middle;
				font-size: 16px;
				
			}
			.div1_right{
				height: 100%;
				width: 40%;
				margin-left: 15%;
				float: left;
				box-sizing: border-box;
			}
			.div2_left{
				height: 100%;
				width: 12%;
			//	background-color: purple;
				float: left;
				margin-left: 12%;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.div2_mid{
				height: 100%;
				width: 45%;
				//background-color: blue;
				float: left;
				margin-left: 6%;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.div2_right{
				height: 90%;
				width: 6%;
				//background-color: skyblue;
				float: left;
				margin-left: 6%;
				//border: 1px solid black;
				box-sizing: border-box;
				margin-top: 3px;
				
			}
			.div3_1{
				height: 100%;
				width: 12%;
				margin-left: 12%;
				float: left;
				//border: 1px solid black;
				box-sizing: border-box;
				background-color: orangered;
				text-align: center;
				
			}
			.div3_2{
				height: 100%;
				width: 15%;
				//background-color: powderblue;
				float: left;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.div3_3{
				height: 100%;
				width: 25%;
				//background-color: darkcyan;
				float: left;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.div3_4{
				height: 100%;
				width: 20%;
				//background-color: darkgoldenrod;
				float: left;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.main1{
				width: 100%;
				height: 32%;
				background-color: #e7ecef;
				border-bottom: 10px solid #e7ecef;
			}
			.main1_left{
				width: 70%;
				height: 100%;
				float: left;
				background-color: #e7ecef;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_right{
				width: 29%;
				height: 100%;
				float: right;
				
				background-color: #e7ecef;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top{
				width:100%;
				height: 80%;
				
				//border: 1px solid black;
				box-sizing: border-box;
				background-color: #e7ecef;
			}
			.main1_left_bottom{
				width:100%;
				height: 18%;
				//border: 1px solid black;
				//box-sizing: border-box;
				//background-color: brown;
				margin-top: 2%;
			}
			.main1_left_top_left{
				height: 100%;
				width: 22.5%;
				float: left;
				//background-color: deepskyblue;
				border: 1px solid orangered;
				box-sizing: border-box;
			}
			.main1_left_top_right{
				height: 100%;
				width: 77.5%;
				float: right;
				background-color: #e7ecef;
			}
			.main1_left_top_right_left{
				height: 97%;
				width: 63%;
				background-color: #e7ecef;
				float: left;
				margin: 2%;
				margin-bottom: 0px;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top_right_right{
				height: 97%;
				width: 30%;
				background-color: #e7ecef;
				float: right;
				margin-top: 2%;
				margin-right: 2%;
				//border: 1px solid black;
				box-sizing: border-box;
			}
			.main1_left_top_right_left_top{
				width: 100%;
				height: 48%;
				//border: 1px solid black;
				box-sizing: border-box;
				background-color: pink;
			}
			.main1_left_top_right_left_bottom{
				width: 100%;
				height: 48%;
				//border: 1px solid black;
				box-sizing: border-box;
				background-color: deeppink;
			}
			.main1_left_top_right_left_mid{
				width: 100%;
				height: 4%;
				
			}
			.main1_right_1{
				width: 100%;
				height: 20%;
				box-sizing: border-box;
				//border: 1px solid black;
				background-color: white;
			}
			.main1_right_2{
				width: 100%;
				height: 5%;
				box-sizing: border-box;
				//border: 1px solid black;
				background-color: lightpink;
				text-align: center;
			}
			.main1_right_3{
				width: 100%;
				height: 60%;
				box-sizing: border-box;
				//border: 1px solid black;
				background-color: white;
			}
			.main1_right_4{
				width: 100%;
				height: 15%;
				box-sizing: border-box;
				//border: 1px solid black;
				background-color: white;
			}
			
			ul{
				list-style-type: none;
				display: inline;
			}
			.div2_mid_bottom ul li{
				float: left;
				width: 10%;
			}
			/*ul li{
				width: 100px;
				
				float: left;
			}*/
			a{
				text-decoration: none;
			}
			a:link{
            	color: blue;
            }
            a:visited{
            	color: black;
            }
            a:hover{
            	color: green;
            }
            a:active{
            	color: yellow;
            }
            .reda {
            	color: red;
            }
            .nav li{
            	width: 12%;
            	float: left;
            }
            .nav li:nth-child(2){
            	list-style-image: url(img/car.png);
            }
            .nav li:nth-child(3){
            	list-style-image: url(img/sc.png);
            }
            .nav li:nth-child(5){
            	list-style-type: |;
            }
            .nav li:last-child{
            	list-style-image: url(img/dhj.png);
            }
            .div2_left img{
            	width: 100%;
            	height: 100%;
            }
            .div2_right img{
            	width: 100%;
            	height: 100%;
            }
            .div2_mid_top{
            	width: 100%;
            	height: 20%;
            	margin-top: 2%;
                //background-color: red;
            	box-sizing: border-box;
				//border: 1px solid black;
            }
            .div2_mid_mid{
            	width: 100%;
            	height: 40%;
            	//background-color: black;
            }
            .div2_mid_bottom{
            	width: 100%;
            	height: 20%;
            	//background-color: pink;
            }
            .div2_mid_top a:visited{
            	color: orangered;
            }
            .find{
            	width: 85%;
            	height: 100%;
            	margin-right: 0px;
            	border-top-left-radius: 5%;
            	border-bottom-left-radius: 5%;
            }
            .btn{
            	width: 10%;
            	height: 100%;
            	background-color: orangered;
            	border-bottom-right-radius: 40%;
            	border-top-right-radius: 40%;
            }
            .theam{
            	color: white;
            	font-size: 18px;
            	font-family: 宋体;
            }
            .div2_mid_bottom ul{
            	display: inline;
            }
            .div2_mid_bottom li:nth-child(3) a:visited{
            	color: orangered;
            }
            .div2_mid_bottom li:last-child{
            	margin-left: 40px;
            }
            .div3_2 ul li{
            	float: left;
            	width: 25%;
            }
            .div3_3 ul li{
            	float: left;
            	width: 15%;
            }
            .div3_4 ul li{
            	float: left;
            	width: 25%;
            }
            .div3_2 a:visited{
            	color: white;
            	font-size: 20px;
            	font-family: 宋体;
            }
            .div3_3 a:visited{
            	color: white;
            	font-size: 20px;
            	font-family: 宋体;
            }
            .div3_4 a:visited{
            	color: white;
            	font-size: 20px;
            	font-family: 宋体;
            }
            .main1_left_top_right_left_top img{
            	width: 100%;
            	height: 100%;
            }
            .main1_left_top_right_left_bottom img{
            	width: 100%;
            	height: 100%;
            }
            .main1_left_top_right_right_bottom img{
            	width: 100%;
            	height: 100%;
            }
            .main1_left_top_right_right_top img{
            	width: 100%;
            	height: 100%;
            }
            .main1_right_1_1{
            	width: 30%;
            	height: 28%;
            	margin-left: 35%;
            	margin-right: 35%;
            	//background-color: red;
            }
            .main1_right_1_2{
            	width: 100%;
            	height: 20%;
            	//background-color: yellow;
            	text-align: center;
            }
            .main1_right_1_3{
            	width: 70%;
            	height: 20%;
            	//background-color: deeppink;
            	margin-left: 20%;
            	margin-right: 10%;
            	}
            .main1_right_1_4{
            	width: 80%;
            	height: 25%;
            	//background-color: orange;
            	//margin-left: 20%;
            	margin: auto;
            	
            }
            img{
            	width: 100%;
            	height: 100%;
            	border-radius: 50%;
            }
            .main1_right_1_3 li{
            	list-style-image: url(img/jb.png);
            } 
            .main1_right_1_3 li:last-child{
            	//margin-left: 10%;
            }
            
            .main1_right_1_3 ul li{
				width: 40%;
				float: left;
				color: red;
			}
			.main1_right_1_4 input{
				background-color: orangered;
				height: 100%;
				width: 30%;
				border-radius: 15%;
			}
			.main1_right_4_top{
				width: 100%;
				height: 40%;
				//background-color: red;
			}
			.main1_right_4_bottom{
				width: 100%;
				height: 60%;
				//background-color: blue;
			}
			.main1_right_4_top_left{
				float: left;
			}
			.main1_right_4_top_right{
				float: right;
			}
			.t{
				border: solid;
				width: 100%;
				height: 90%;
				margin-bottom: 10%;
			}
			.t tr{
				width: 100%;
				height: 50%;
				
			}
			.t td{
				width:20% ;
				height: 100%;
			}
			.timg{
				width: 100%;
				height: 100%;
				border-radius: 10%;
			}
			.main1_left_bottom_left{
				width: 30%;
				height: 100%;
				float: left;
			}
			.main1_left_bottom_left img{
				width: 100%;
				height: 100%;
				border-radius: 0px;
			}
			.main1_left_bottom_right{
				width: 70%;
				height: 100%;
				float: left;
			}
			.main1_left_bottom_right img{
				width: 100%;
				height: 100%;
				border-radius: 0px;
			}
			
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div1_left">
				中国大陆    
				<a href="" class="reda"><font class="reda">亲，请登录</font></a> 
				<a href="">免费注册</a>  
				<a href="">手机逛淘宝</a>
			</div>
			<div class="div1_right">
				<ul class="nav">
					<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="div2">
			<div class="div2_left">
				<img src="img/taobao.png" />
			</div>
			<div class="div2_mid">
				<div class="div2_mid_top">
					<!--<ul>
						<li><a href="">宝贝</a></li>
						<li><a href="">天猫</a></li>
						<li><a href="">店铺</a></li>
					</ul>-->
					<a href="">宝贝</a> 
					<a href="">天猫</a> 
					<a href="">店铺</a>
				</div>
				<div class="div2_mid_mid">
					<input type="text" class="find"/>
					<input type="button" value="搜索" class="btn" />
				</div>
				<div class="div2_mid_bottom">
					<ul>
						<li><a href="">新款连衣裙</a></li>
						<li><a href="">四件套</a></li>
						<li><a href="">潮流T恤</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="div2_right">
				<img src="img/phone.png" />
			</div>
		</div>
		
		
		<div class="div3">
			<div class="div3_1"><font class="theam"><b>主题市场</b></font></div>
			<div class="div3_2">
				<ul>
					<li><a href=""><b>天猫</b></a></li>
					<li><a href=""><b>聚划算</b></a></li>
					<li><a href=""><b>天猫超市</b></a></li>
				</ul>
			</div>
			<div class="div3_3">|
			    <ul>
					<li><a href=""><b>淘抢购</b></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=""><b>兴农扶贫</b></a></li>
				</ul>
			</div>
			<div class="div3_4">
				<ul>
					<li><a href=""><b>飞猪旅行</b></a></li>
					<li><a href=""><b>智能生活</b></a></li>
					<li><a href=""><b>苏宁易购</b></a></li>
					
					
				</ul>
			</div>
		</div>
		
		
		<div class="container">
			<div class="main1">
				<div class="main1_left">
					<div class="main1_left_top">
						<div class="main1_left_top_left"></div>
						<div class="main1_left_top_right">
							<div class="main1_left_top_right_left">
								<div class="main1_left_top_right_left_top">
									<img src="img/11.png" />
								</div>
								<div class="main1_left_top_right_left_mid"></div>
								<div class="main1_left_top_right_left_bottom">
									<img src="img/12.png" />
								</div>
							</div>
							<div class="main1_left_top_right_right">
								<div class="main1_left_top_right_left_top">
									<img src="img/13.png" />
								</div>
								<div class="main1_left_top_right_left_mid"></div>
								<div class="main1_left_top_right_left_bottom">
									<img src="img/14.png" />
								</div>
							</div>
						</div>
					</div>
					<div class="main1_left_bottom">
						<div class="main1_left_bottom_left">
							<img src="img/tt.png" />
						</div>
						<div class="main1_left_bottom_right">
							<img src="img/hw.png" />
						</div>
					</div>
				</div>
				
				<div class="main1_right">
					<div class="main1_right_1">
						<div class="main1_right_1_1">
							<img src="img/tx.png" />
						</div>
						<div class="main1_right_1_2">
							Hi!你好
						</div>
						<div class="main1_right_1_3">
							<ul>
								<li><a href="">领淘金币抵钱</a></li>
								<li><a href="">会员俱乐部</a></li>
							</ul>
						</div>
						<div class="main1_right_1_4">
							<input type="button" value="登录" />
							<input type="button" value="注册" />
							<input type="button" value="开店" />
						</div>
					</div>
					<div class="main1_right_2">
						网上有害信息举报专区
					</div>
					<div class="main1_right_3"></div>
					<div class="main1_right_4">
						<div class="main1_right_4_top">
							<div class="main1_right_4_top_left">
								<a href=""><b>阿里APP</b></a>
							</div>
							<div class="main1_right_4_top_right">
								<a href="">更多>></a>
							</div>
						</div>
						<div class="main1_right_4_bottom">
							<table id="t">
								<tr>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
								</tr>
								<tr>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"> </a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
									<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="floatdiv">爱淘宝</div>
		
		<div class="footer"></div>
		
		
		<div class="bottom"></div>
	</body>
</html>


效果：


w_t_y_y
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flex布局实现头尾固定、中间内容自适应
coldriversnow的专栏
05-09 666
头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局。
Div+CSS - 简单布局
晓宇博客
06-05 6510
页面的布局 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 DIV结构如下： │body {}/这是一个HTML元素，具体我就不说明了/ └#Container {}/页面层容器/ ├#Header {}/页面头部/ ├#PageBody {}/页面主体/ │├#Sidebar {}/侧边栏/ │└#Mai...
CSS+DIV进行的页面布局（二）
weixin_62343228的博客
10-29 167
CSS+DIV进行的页面布局 CSS+DIV进行的页面布局（二）在页面布局中常用的CSS属性visibilitydisplayvisibility: hidden与display: none的区别CSS中的块元素和行内元素 在页面布局中常用的CSS属性 visibility visibility：元素是否可见 属性值 含义 visible 元素可见（默认值） hidden 元素不可见 display display：元素的显示方式 属性值 含义 none 不显示
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
weixin_42352842的博客
06-16 1319
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。上中下结构，中间又分为两列的全屏自适应布局HTML代码：上中下结构，中间又分为两列的全屏自适应布局/* 全屏自适应布局 */html,body{width:100%;height:100%;overflow:hidden;margin:0;}html{_heigh...
DIV+CSS左右等高布局
weixin_34233856的博客
05-04 128
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
CSS+DIV布局赏析案例文字和图片的混排相对较 少，文字内容的描述和图片展示也都比较紧凑集中，使浏览者可以明确精准的找到自 己想要搜索和寻找的信息
CSS+div 布局
12-28
CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局
布局用CSS+DIV的优点总结
10-30
使用CSS+DIV布局可以提高搜索引擎对网页的索引效率。因为HTML文件中只存放结构化内容，搜索引擎可以更有效地搜索到网页内容，并可能给予较高的评价。 三、提高页面浏览速度 使用CSS+DIV布局可以提高页面浏览速度。...
CSS+DIV布局案例.pdf
10-04
《CSS+DIV布局详解》 CSS（Cascading Style Sheets）和DIV是网页设计中用于构建页面布局的重要工具。在本文中，我们将深入探讨如何利用CSS+DIV进行页面布局，包括如何实现页面居中、添加头部和尾部，以及如何引入...
CSS+DIV布局赏析
12-26
老师那里弄得 很实用 对学习很有帮助 看看吧
前端基础CSS3之网页的布局方式
zx870121209的博客
04-02 181
网页的布局方式 标准流排版方式 标签分三类：块级元素、行内元素和行内块级元素 排版两类：垂直排版和水平排版 浮动流排版方式 排版一类：水平排版 注意：半脱标、没有水平居中属性、属性margin : 0 auto;无效 特点：浮动流的标签都具有行内块级元素的特点 元素脱离标准流：浮动元素从标准流中删除，不再占用标准流空间，且浮动元素会覆盖在标准流元素的上面 ...
利用CSS+DIV进行网页布局
热门推荐
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
JavaScript-页面布局-div布局-盒子模型
插件开发
03-27 3910
文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑   在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型   div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如
CSS div布局 嵌套
最新发布
小步教程
09-05 1136
div id="div_xiaobuteach">被分成多列，外层需要加clearfix，内层需要加float:left。<div id="div2">被分成2列，所以它需要加clearfix，里层的div需要加float:left。<div id="div1">被分成3行，直接加3个div即可。声明2：为方便大家初学，样式我们不考虑公用，只公用了clearfix清除浮动，其余直接写style属性。声明4：为div加了边框、宽高、边距，为方便大家看出效果，并不是实际需要。第3步：第2列继续划分为2列；
div常用的定位布局方式
weixin_45743513的博客
03-25 2380
1.固定定位 固定定位即将元素固定在页面的某个位置 。元素不会随页面的滚动而盖板边位置。 固定定位适合用座悬浮效果。如网页咨询栏丶窗口丶广告等 效果如下图 运用position: fixed;对元素进行固定 然后，用Left ，top对位置进行调整。 .ceb ul { list-style: none; position: fixed; right: 10px; bottom: 80px; ```} ## 标题2.相对定位 对元素使用相对定位，元素不会脱离文档层，会占
CSS—DIV
qq_39162424的博客
12-05 1237
待整理  1. 集体声明：样式表中有相同的属性可以一起声明   2. 标记类型： 1. 内联：块级 2. div标记：浮动块   3. 盒子模型： 1. border：边框 2. padding：内边距 3. margin：外边距
(前端)HTML之CSS(div+css布局)
weixin_65479202的博客
04-23 1万+
前端HTML的基础知识内容的更新已经更新完毕！！！打好基础，才能学好HTML的相关知识！！！
div布局
m0_58643601的博客
04-27 506
div布局
制作一个学校的主页，使用CSS+DIV布局
04-23
好的，我可以提供一些指导和建议来制作一个学校的主页，使用CSS DIV布局。 首先，你需要了解CSS DIV布局基本的思路和概念。CSS中的DIV是一个可以用于包含HTML元素的容器，可以被用来组织和布局网页内容。通过设置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

w_t_y_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值