HTML在线visio进行简单布局

我们先来看一下这个需要布局的页面：

我们对红色的标注部分进行舍去操作，我们只进行相应的布局：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/viso.css"/>
	</head>
	<body>
		<div id ="top" >
			<div  id="top_logo">
				<img src="img/logo.png" style="width: 120px; height: 32px;">
			</div>
			<div id="top_mid">
				<div  class="top_menu">小组</div>
				<div  class="top_menu" style="color: #92CFFF;">我的</div>
				<div  class="top_menu">推荐 </div>
				<div  class="top_menu">模板 </div>
			</div>			
		</div>
		
		<div id="mid">
			
			<div id="mid_left">
				<div class="mid_left_button">
					<input type="button"  value="新建" />
				</div>
				<div class="mid_left_menu">我的文件</div>
				<div class="mid_left_menu">最新修改 </div>
				<div class="mid_left_menu">与我协作 </div>
				<div class="mid_left_menu"> 我的收藏</div>
				<div class="mid_left_menu"> 回收站</div>
				<div class="mid_left_menu"> 其他</div>
			</div>
			
			<div id="mid_right">
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/1.jpg"/></div>
					<div class="mid_right_alt">第一张</div>
				</div>
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/2.jpg"/></div>
					<div class="mid_right_alt">第二张</div>

				</div>
				
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/3.jpg"/></div>
					<div class="mid_right_alt">第三张</div>

				</div>
				
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/4.jpg"/></div>
					<div class="mid_right_alt">第四张</div>

				</div>
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/5.jpg"/></div>
					<div class="mid_right_alt">第五张</div>

				</div>
				
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/6.jpg"/></div>
					<div class="mid_right_alt">第六张</div>

				</div>
				
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/7.jpg"/></div>
					<div class="mid_right_alt">第七张</div>

				</div>
				
				<div class="mid_right_img">
					<div class="mid_right_imgs"><img src="img/8.jpg"/></div>
					<div class="mid_right_alt">第八张</div>

				</div>
								
			</div>		
		</div>
		<div>		
		</div>
						
	</body>
</html>

下面是css

#top {
	width:100%; 
	height:50px; 	
	background-color: #FFFFFF;
}

#top_logo {
	height:32px; 
	width:120px; 
	float:left; 
	margin-left: 10px;
	margin-top: 10px;
}
#top_mid {
	width: 20%;
	height: 50px;
	margin: auto;
	
}
.top_menu {
	height:50px; 
	width: 20%; 
	float:left;
	text-align:center;
	line-height:50px;
	color: #B06D6E;
}


#mid {
	height:750px; 
	width:100%;
	background-color: #F0F0F0;
}

#mid_left {
	height:400px; 
	width:10%; 
	float:left;
	margin-top: 40px;
}

.mid_left_button input {
	height:30px; 
	width:60%; 
	margin-left: 30px;
	line-height: 30px;
	text-align:center;
	background-color: #0000FF;
	color:white;
}

.mid_left_menu {
	height:60px; 
	width:100%; 
	text-align:center;
	line-height:60px;
	color:#999;
}

#mid_right {
	height:700px; 
	width:90%; 
	float:left
}

.mid_right_img {
	height:300px; 
	width:300px; 
	float:left;
	margin-left:35px;
	margin-top:35px;"
}

.mid_right_imgs {
	height:300px; 
	width:300px; 
}

.mid_right_alt {
	height:20px; 
	width:100%; 
	text-align:center;
	line-height:20px;
	color:#666;
	font-size: 15px;
}

页面如下：

下载：git克隆

https://github.com/dreamiboy/visio--.git

HTML在线visio进行简单布局

猜你喜欢