首页 > 代码库 > 基于div布局的新闻页面

基于div布局的新闻页面

2024-08-20 14:24:37   255人阅读

html代码：
 1     <body>
 2         <div id="wrap">
 3             <div id="head">
 4                 <div id="nav_1" align="justify"><span class="product">产品服务</span><br/>签约建业入住建业选择一个居所,意味着选择一种生活方式,万科制造,看看我们为你造了什么…… 
 5 </div>    
 6                 <div id="nav_2" align="justify"><span>产品服务</span><br/>签约建业入住建业选择一个居所,意味着选择一种生活方式,万科制造,看看我们为你造了什么…… </div>    
 7                 <div id="nav_3" align="justify"><span>产品服务</span><br/>签约建业入住建业选择一个居所,意味着选择一种生活方式,万科制造,看看我们为你造了什么…… </div>        
 8             </div>
 9             <div id="content">
10                 <div id="content_nav">
11                     <ul class="content_nav_ul">
12                         <li>动力新闻</li>
13                         <li class="medio">媒体报道</li>
14                         <li>市场资讯</li>
15                         <li>信息化快讯</li>
16                     </ul>
17                 </div>
18                 <div id="content_content">
19                     <img src="images/zk.jpg" style="float: left;"><span>[商务周刊]电子商务老兵新传——访中企动力科技集团股份有限公司总经理俞凡 　“我们的定位是IT应用服务运营商，我们为企业、特别是中小企业提供IT服务，包括电子商务服务的时候是因势利导、因人而异的，有别于传统的信息化应用和很多人对电子商务的理解。所以，我们向客户和业界提出中企动力提供的是不一样的电子商务。电子商务包括交易内容，也包括非交易内容。它可以涉及企业内部的业务联系……</span>
20                 </div>
21             </div>
22             <div id="foot">
23                 <ul type="square">
24                      <li>昔日的投资风险高地正成为新的投资价值洼地“闯关东”热潮</li>    
25                      <li>最受人关注的CPI和GDP数据将在4月15日揭开面纱</li>
26                      <li>最受人关注的CPI和GDP数据将在4月15日揭开面纱</li>
27                      <li>纵贯东北三省的高铁即将开通</li>
28                      <li>纵贯东北三省的高铁即将开通</li>
29                  </ul>    
30             </div>
31         </div>
32     </body>

 css代码：

 1 #wrap{width: 510px;border: 1px solid burlywood;padding: 5px;}
 2 #head{width: 100%;padding: 5px;}
 3 #nav_1,#nav_2{width:33%; float: left;padding: 5px;
 4             border-right-width:1px; 
 5             border-right-style: groove;
 6             border-right-color: #CCCCCC;
 7 }
 8 #nav_3{width:33%float:right;}
 9 .product{align-content: center;}
10 .content_nav_ul{list-style-type: none;margin: 0 auto;}
11 .content_nav_ul li{float: left;
12 width: 22%; text-align:center;line-height: 25px;}
13 #content_nav{height:25px;width:100%;clear: both;background-color: cornflowerblue;border: 1px solid black;}
14 /*.medio{background-color: white;}*/
15 #content{border-bottom: 1px dotted #FF9900;margin-top: 1px;clear: right;}
16 #content_content{padding: 2px;margin: 4px;}

效果图：

技术分享

基于div布局的新闻页面


联系
我们