HTML在线visio进行简单布局

旧城等待， 2022-05-20 09:47 172阅读 0赞

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

w![70][]

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

<!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;
    }

页面如下：

![70 1][]

下载：git克隆

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

[70]: /images/20220520/cd528db420334726ab7806fc5c3d98d9.png
[70 1]: /images/20220520/f283f5b61460426e808d9eefbc06805c.png