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;}
效果图：
时间： 2024-08-05 18:23:57