布局的运用

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>中国海洋大学</title>
    <style type="text/css">
			*{
				margin:0px auto;
			padding:0px;}
			
			
			.gvg{margin:10px auto; 
			width:240px; 
			height:40px;
			            
						}
			
			
			
			
			
			
			
	#top{
						width:1009px;
						padding:20px;
						font-size:5px;
						font-family:微软雅黑;
						background-image:url(%E5%9B%BE%E7%89%87/hdi_03.gif);
						
						
						
						
						width:975px; height:32px;
						overflow:hidden;
						padding:0px 0px 0px 0px}
						
						
			
	.left_2{width:86px;
						   
								   height:30px;}
								   
								   
	#left_1,.left_2{ float:left; 
						   text-align:center;
						   vertical-align:middle;
						   line-height:30px;}
						   
			
						   
	 #left_1:hover{cursor:pointer;}
							   
			
							   
	.left_2:hover{
								cursor:pointer;}
								
			
								
									   
	#d{ width:1000px; height:235px;
								}	 
									
									
									
									
	#p{
								   width:360px; height:222px;float:left; }
								   
								   
								   
								   
								   
	  #p_2{  width:415px; height:222px; float:left;
									   }
								  
	
										   
										  
										   
	#dar{ 
										float:right;
										}	   
										
	.a_title{ text-decoration:none;
									color:#000;}   
									
									
	*{ list-style-type:none;  text-decoration:none; color:#000; }
										 
										 
										
										
	#str{ width:100%; height:338px;}
							
									
								
	#bbc{
									width:1000px; height:140px;
									opacity:05; -moz-opacity:0.5;
									}		

							#p_6{ float:right;
								}
							 
			.bac{ float:right;
				}				   
				.bac_1{float: left;}	
				.bac_2{
				height:18px;}	   
							   
				#so{ ;
					background-image:url(../www.ico.la_662ac9f7d825c20085f92e12e47ca2f3_22X22.ico);}			   
							   
							   
				#bac_3{ float:right;
					}			   
							   
							   
				.keyword{ float:right;}			   
						
				#chrl{ float:left;}			   
				#chrl_1{ margin:0px auto;
				padding:10px;
				
				font-size:12px;
					}			   
				#bac_7{ float:left;}		   
							   
				.dessp{ top:100px;
					}			   
				#acbc{ width:1000px; height:308px;
				    background-size: 1000px 338px;
				background-image:url(%E5%9B%BE%E7%89%87/di.jpg);
				border-radius:10px; }	
				
				.sde_1 {
    height: 34px;
    line-height: 34px;
    color: #063477;
    font-size: 15px;
    font-weight: bold;
    font-family: "Microsoft YaHei";}
				
				
				
			.gren{
	font-family: 微软雅黑;
	font-size: 9px;
	width:500px;
	height: 30px;
}         
      
				
		
				.keyword_1{float:right;}
				
				
			#social{ margin:0px auto;
					width:1000px; height:40px;}
					
					
			.social_1{width:25px; height:25px;}    
			.wx-img{ width:80px; height:80px;}
			
			
			
			.gren_2{ width:440px; height:15px;}
				
						   
							   
    </style>
</head>

     <body background="图片/bg0.jpg">
         <div id="o" style="width:100%; height:105px;">
         <div id="lo" style="width:1000px; height:137px;">
         <img src="图片/head.jpg"; />
      
   </div>
  

</div>
 
 
 
       <div id="top">
       <DIV id="left">
					<div id="left_1" style="width:86px; "> 
                    <span style="color:#FFF ; font-size:16px;"> 丨</span>学校概况</div>	
						                
					<div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>院系设置s</div>
					
					<div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>重点建设</div>
					
					<div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>人力资源</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>教育教学</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>科学研究</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>招生就业</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>合作交流</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>图书档案</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>信息公开</div>
                    <div class="left_2">
                    <span style="color:#FFF ; font-size:16px;">丨</span>科技政策</div>
 
 
 
 
 
   </DIV>
</div>
 
 
 
 
      <div id="pole" style="width:100%; height:334px;">
    
      <div style="width:1000px; height:327px;">
      <div style="width:1000px; height:330px; background:url(%E5%9B%BE%E7%89%87/24d3cf43-3834-4f25-8a97-16642a537b22.jpg);">
    </div>
  </div>
</div>

    <div id="str" >
    <div id="acbc">
 
    <div id="d">
 
 
 
    <div id="p">
    
    
    <div id="p_1" style="width:350px; height:28px;border-bottom:1px solid #099;">
    <a class="sde_1" href="http://xinwen.ouc.edu.cn/">海大新闻</a>
    </div>
    <div style="width:350px; height:14px;"></div>
    <div id="re" style="width:350px; height:100px;  font-family:微软雅黑; font-size:12px;">
    
    <ul id="le" type="disc" >
    
        <li list-style-type:none;><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/be/d9/c10639a179929/page.htm" title="中国海洋大学荣获山东省首届省级文明校园称号 "><img src="图片/b_07.jpg" />中国海洋大学荣获山东省首届省级文明校园称号 </a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/bf/47/c10639a180039/page.htm" title="中国海洋大学校友吕彩霞王路分别当选全国人大常委政协常委"><img src="图片/b_07.jpg" />中国海洋大学校友吕彩霞王路分别当选全国人大常委政协常委</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/bf/48/c10639a180040/page.htm" title="中国海洋大学校友会湖南分会第五届新春联谊会举行"><img src="图片/b_07.jpg" />中国海洋大学校友会湖南分会第五届新春联谊会举行</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/be/f0/c10639a179952/page.htm" title="中国海洋大学吴立新院士当选第十三届全国人民代表大会常务委员会委员"><img src="图片/b_07.jpg" />中国海洋大学吴立新院士当选第十三届全国人民代表大会常务...</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/be/f0/c10639a179952/page.htm" title="吴立新院士当选第十三届全国人民代表大会常务委员会委员"><img src="图片/b_07.jpg" />吴立新院士当选第十三届全国人民代表大会常务委员会委员</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/bf/61/c10639a180065/page.htm" title="中国海洋大学2018“春之声·文学艺术周”活动圆满落幕"><img src="图片/b_07.jpg" />中国海洋大学2018“春之声·文学艺术周”活动圆满落幕</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/bf/4b/c10639a180043/page.htm" title="行远讲座第十讲:罗艺峰谈丝路音乐文化基因的唤醒与新西域想象"><img src="图片/b_07.jpg" />行远讲座第十讲:罗艺峰谈丝路音乐文化基因的唤醒与新西域...</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/be/cd/c10639a179917/page.htm" title="中国海洋大学党委中心组集体学习党的十九届三中全会精神"><img src="图片/b_07.jpg" />中国海洋大学党委中心组集体学习党的十九届三中全会精神</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈尔滨工业大学(威海)劲松书院、丁香书院负责人到行远书院调研"><img src="图片/b_07.jpg" />哈尔滨工业大学(威海)劲松书院、丁香书院负责人到行远书...</a></li>
    <li><a class="a_title" target="_blank" href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"><img src="图片/b_07.jpg" />哈工大(威海)劲松书院、丁香书院负责人到行远书院调研</a></li>
    
    </ul>
    
    
    
    
    
    
    
    
    <div id="dar">
    <a class="more-link" href="http://www.ouc.edu.cn/hdxw/list.htm" title="显示更多"><span class="moretext"><img src="图片/more.png" border="0">
         </span>
       </a>
    </div>
  </div>
</div>

    <div id="p_2" >
    
    <div id="p_3" style="width:350px; height:28px;border-bottom:1px solid #099;">
    <a class="sde_1" href="http://xinwen.ouc.edu.cn/">海大新闻</a>
    </div>
    <div style="width:350px; height:14px;"></div>
    <div id="rs" style="width:350px; height:100px;  font-family:微软雅黑; font-size:12px;">
    
        <ul id="ls_1" type="disc" >
    
        <li list-style-type:none;>
        <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/be/d9/c10639a179929/page.htm" title="中国海洋大学荣获山东省首届省级文明校园称号 ">
        <img src="图片/b_07.jpg" />中国海洋大学荣获山东省首届省级文明校园称号 </a></li>
        
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/bf/47/c10639a180039/page.htm" title="中国海洋大学校友吕彩霞王路分别当选全国人大常委政协常委"><img src="图片/b_07.jpg" />中国海洋大学校友吕彩霞王路分别委政协常委</a></li>
    
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/bf/48/c10639a180040/page.htm" title="中国海洋大学校友会湖南分会第五届新春联谊会举行">
    <img src="图片/b_07.jpg" />中国海洋大学校友会湖南分会第五届新春联</a></li>
    
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/be/f0/c10639a179952/page.htm" title="中国海洋大学吴立新院士当选第十三届全国人民代表大会常务委员会委员">
    <img src="图片/b_07.jpg" />中国海洋大学吴立新院士当选第十三...</a></li>
    
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/be/f0/c10639a179952/page.htm" title="吴立新院士当选第十三届全国人民代表大会常务委员会委员">
    <img src="图片/b_07.jpg" />吴立新院士当选第十三届全国人民代</a></li>
    
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/bf/61/c10639a180065/page.htm" title="中国海洋大学2018“春之声·文学艺术周”活动圆满落幕">
    <img src="图片/b_07.jpg" />中国海洋大学2018“春之声</a></li>
    
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/bf/4b/c10639a180043/page.htm" title="行远讲座第十讲:罗艺峰谈丝路音乐文化基因的唤醒与新西域想象">
    <img src="图片/b_07.jpg" />行远讲座第十讲:罗艺峰谈丝路音乐醒与新西域...</a></li>
    
        <li>
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/be/cd/c10639a179917/page.htm" title="中国海洋大学党委中心组集体学习党的十九届三中全会精神">
    <img src="图片/b_07.jpg" />中国海洋大学神</a></li>
    
        <li>
    <a class="aa_title_1" target="_blank" href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈尔滨工业大学(威海)劲松书院、丁香书院负责人到行远书院调研">
    <img src="图片/b_07.jpg" />哈尔滨工业大学(威...</a></li>
    
    
        <li>
	
    <a class="a_title_1" target="_blank" href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研">
    <img src="图片/b_07.jpg" />哈工大(威海)劲松书院、</a></li>
    
    
    </ul>
    <div id="dar">
    <a class="more-link" href="http://www.ouc.edu.cn/hdxw/list.htm" title="显示更多"><span class="moretext"><img src="图片/more.png" border="0">
</span>
</a>
</div>
    </div>
       </div>   









          <div id="p_6" style="width:200px; height:222px;">
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/d8ba6ae7-a6a7-4820-92c9-850cf4f7d51f.png" /></a>
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/65527076-0886-42ab-a1cd-a9a0bf39aef3.png" /></a>
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/a2b69c78-625b-43b0-9c58-28976bbfc115.png" /></a>
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/1062881a-44ff-42d5-97ac-b1b89406a78f.png" /></a>
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/03a310ad-8156-4826-a4d3-e59177d668c6.png" /></a>
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/e7a20fdf-6e93-4c82-8697-69288ff4ac06.png" /></a>
		  <a href="http://www.ouc.edu.cn/bf/51/c10639a180049/page.htm" title="哈工大(威海)劲松书院、丁香书院负责人到行远书院调研"">
          <img src="图片/dfc5cf56-7e0a-4bab-b382-a52beb7e4908.png" /></a>
   </div>  
</div>
          <div style="width:1000px; height:85px;">	
          <div id="bac" style="width:1000px; height:25px;"> 
      
      
           <div class="bac_1" style="width:30px;
           height:25px;"></div>
           <div class="bac_1" style="width:465px; height:25px;">
           <div class="bac_1" style="width:280px; height:25px;">
           <img class="bac_2" width="46px;" src="图片/js_101.png" />
           <img class="bac_2" width="46px;" src="图片/js_10.png" />
           <img class="bac_2" width="46px;" src="图片/js_11.png" />
           <img class="bac_2" width="46px;" src="图片/js_12.png" />
           <img class="bac_2" width="46px;" src="图片/js_13.png" />
   </div>
</div>
         <div id="bac_7" style="width:465px; height:25px;">
         
                           
                           <input class="keyword_1" style="width:22px; height:23px;  " type="button" name="提交"  value="" />
                           <input class="keyword" name="keyword" style="width: 151px; height:19px;"  type="text" value="请输入关键字" οnfοcus="if (this.value === '请输入关键字') { this.value = ''; }"
                           οnblur="if (this.value === '') { this.value = '请输入关键字'; }" />
         
</div>  
         
    
      
      </div>
   <div style="width:1000px; height:38px;">
   <div id="chrl" style="width:670px; height:38px;">
   <div id="chrl_1" style="width:670px; height:18px;">
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">  海洋大学堂</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">数字后勤服务大厅</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">海之子</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">招标公告</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">教育基金会</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">校友会</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">迎新网</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">心理咨询</a>|
   <a href="http://web.ouc.edu.cn/hydxt/" target="_blank">海大附中</a>|
        </div>
     </div>
   
</div>
  
  
  
  
  
  

  
  
  
        </div>
  
  
  
     </div>
  </div>
</div>
 

 
 
    <!-- <div style="width:350px; height:12px;">
    <div style="width:38px; height:14px;">-->
   
     
<!--         <div class="p_2" style="width:415px; height:222px;">4gdfgfdgfdgdgd</div>
    
       <div class="p_2" style="width:180px; height:225px;">4fdbdfgdfgdfg</div>-->
       <div style="width:90px; height:120px; position:fixed; top:200px; left:362px;">
       <img src="图片/7d46d348-2658-4318-a64d-58deb6f6ce60_s(1).jpg" />
       <input class="dessp" name="sdsd" style="width:13px; height:13px;" type="image" src="图片/close.gif" />
    </div>
  </div>
</div>
		 
<div class="gren"> 
		 校址:青岛市崂山区松岭路238号 电话:0532-66782730 邮编:266100
         <div class="gren_2">
<span>  版权所有©中国海洋大学 鲁ICP备05002467号-1</span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37021202000030"
style="height:20px;">中国海洋大375682585685学</a></div>
		 </div>
         
		 
         
		<div class="gvg">
        <div class="col12">
        
        
<//div id="social">
                <a href="http://weibo.com/oucnews">
              <img Class="social_1" src="图片/xl.png" /> 
              </a>
                <a href="http://t.qq.com/oucnews/">
               <img Class="social_1" src="图片/xl.png" />  
               </a>
               <a href="http://t.people.com.cn/ouc1924">
                <img Class="social_1" src="图片/xl.png" />  
                </a>
                <a href="javascript:void(0)">
                <img Class="social_1" src="图片/xl.png" /> 
</a>

        
           </div>
    </div> 
		<div class="wx-img">
                <img src="图片/blue.png" /> 
                </a>
                 </div>
		 
</body>

</html>

     
    
            
        </div>-->

  昨天做的网页,虽然有很多错误,但是加深了对布局和格式的运用。

转载于:https://www.cnblogs.com/cy960202/p/8628924.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值