前端入门——HTML&CSS实战1

导航+照片排版
在这里插入图片描述
瀑布流 —— 分栏
在这里插入图片描述
代码
<!--html-->
<!DOCTYPE html>
<html>
  <head>
    <title>我的相册</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="css/mytest1.css">

  </head>
  
  <body>
    <div class="contain">
    	<div class="wrapper">
    		<div class="header">
    			<div class="header_contain">
    				<div class="header_title">我的相册</div>
    				<div class="header_nav">
    					<ul>
    						<li><a href="#">首页</a></li>
    						<li><a href="#">个人中心</a></li>
    						<li><a href="#">我的相册</a></li>
    						<li><a href="#">我的访客</a></li>
    					</ul>
    					<div class="header_img">
    						<img alt="" src="img/warming.jpg">
    					</div>
    					<div class="header_search">
    						<form action="">
    							<input type="text">
    						</form>	
    					</div>
    				</div>
    		 	</div>
    		</div>
    		<div class="body">
    			<img alt="点击我" src="img/p1.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p2.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p3.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p4.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p4.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p6.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p7.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="body">
    			<img alt="点击我" src="img/p1.jpg" width="200px" height="200px">
    			<div class="img_text">风吹雨成花❀</div>
    		</div>
    		
    		<div class="footer">
			<div><img alt="" src="img/p11.jpg"></div>
			<div><img alt="" src="img/p22.jpg"></div>
			<div><img alt="" src="img/p33.jpg"></div>
			<div><img alt="" src="img/p55.jpg"></div>
			<div><img alt="" src="img/p44.jpg"></div>
			<div><img alt="" src="img/p77.jpg"></div>
			<div><img alt="" src="img/p11.jpg"></div>
			<div><img alt="" src="img/p22.jpg"></div>
			<div><img alt="" src="img/p55.jpg"></div>
			<div><img alt="" src="img/p44.jpg"></div>
			<div><img alt="" src="img/p33.jpg"></div>
			<div><img alt="" src="img/p77.jpg"></div>
			<div><img alt="" src="img/p22.jpg"></div>
			<div><img alt="" src="img/p33.jpg"></div>
			<div><img alt="" src="img/p55.jpg"></div>
			<div><img alt="" src="img/p44.jpg"></div>
			<div><img alt="" src="img/p77.jpg"></div>
			<div><img alt="" src="img/p11.jpg"></div>
			<div><img alt="" src="img/p22.jpg"></div>
			<div><img alt="" src="img/p55.jpg"></div>
			<div><img alt="" src="img/p44.jpg"></div>
			<div><img alt="" src="img/p33.jpg"></div>
			<div><img alt="" src="img/p77.jpg"></div>
		</div>
    		
    	</div>
    </div>
  </body>
</html>


<!--css-->
*{
	margin:0px;
	padding:0px;
}

body{
	background-color:#FEF4F4;
}

.wrapper{
	width:80%;
	height:10000px;
	background-color:#FBDAC8;
	margin:0px auto;
}

.header{
	width:100%;
	height:100px;
	background-color:#F3a68c;
	margin:0px auto;
}

ul{
	list-style:none;
	float:left;
	margin-left:100px;
	margin-top:30px;
}

.header_title{
	float:left;
	font-family:cursive;
	font-size:40px;
	color:#ddeab2;
}

.header_contain{
	margin:30px;
	padding:30px;
}

.header_nav{
	padding-top:0px;
	
}

li{
	padding-left:0px;
	display:inline;
}

a:link,a:visited{
	color:darkgrey;
	text-decoration:none;
	text-align:center;
	font-size:20px;
	padding:10px;
	font-family:cursive;
}

a:hover,a:active{
	color:dimgrey;
}

.header_img img{
	width:40px;
	height:40px;
	border-radius:30px;
	display:inline;
	float:right;
	margin-top:15px;
}

.header_search form{
	float:right;
	width:100px;
	height:30px;
	position:relative;
	margin-right:90px;
	margin-top:22px;
}

.header_search input{
	height:20px;
	border-radius:30px;
}

.body{
	border:1px solid darkgray;
    width:auto;
	height:auto;
	float:left;
	margin:30px;
}

img{
	opacity:1;  //透明度0-1
}

.img_text{
	font-size:15px;
	margin-bottom:5px;
	color:#b47226;
	text-align:center;
}

.footer{
	column-width:250px;
	-webkit-column-width:250px;
	column-gap:5px;
	margin-top:1000px;
   
}

.footer div{
	width:250px;
	margin:5px auto;
}
瀑布流主要是以分栏为主
属性	描述
column-count:3	分为3栏
column-gap:30px	设置栏的间距
column-rule:5px outset red	设置分栏的样式
column-width:250px
前端入门——HTML&CSS实战1

猜你喜欢
