简单布局

最新推荐文章于 2024-08-09 06:13:01 发布

weixin_30596343

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量50

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/yanzhuan/archive/2011/11/14/2248042.html

版权

css部分的代码；
body{
color:#630;
background:#FC3;
font-size:12px;}

#title,#content,#bottom{
width:630px;
margin:0 auto;}
#title{

}
#top{

padding-top:5px;
padding-left:20px;
height:60px;
background:url(images/logo_bj.gif) repeat-x top left;}
#nav{
height:35px;
background: url(images/nav_a_bj.gif);}
.m{
text-align:center;
border-left:#C30 solid 1px;
padding-left:3px;
margin:3px;
height:32px;
width:58px;
float:left;
font-size:12px;
color:#fff;}
.m a{
color:#fff;
text-decoration:none;}
.m a:hover{
color:#F93;
text-decoration:none;

}
#buttom{
height:108px;
background: url(images/banner.gif);}

#content{
height:600px;
}
#left{
height:600px;
width:130px;
float:left;}
.left2{
border:2px solid #930;
}
.left2 h3{
background:#900 url(images/title_img.gif) no-repeat left center;
color:#FF6;
font-size:13px;
margin-top:0;
height:20px;
padding-top:5px;
padding-left:30px;
margin-bottom:0;
}
.left2 ul{
padding-left:0;
margin-top:0;
margin-left:0;
list-style:none;
background: #FF9;
margin-bottom:0;
padding-left:3px;
}
.left2 ul li{
text-indent:0;}
#right{
width:500px;
height:600px;
float:right;
}

.b{
background: url(images/title_bj.gif) repeat-x left top;
font-size:14px;
font-weight:bold;
border:2px #F96 solid;
margin:5px 0;
padding-left:5px;
margin-left:5px;}
#right1,#right2,#right3,#right4{
background:#F93;
border:2px #F60 solid;
margin-left:5px;
}
#right1{
height:230px;}

#right{
}

.t1{
height:100px;
width:84px;
float:left;
text-align:center;
border:1px #FC0 solid;
margin:5px;
}
#bottom{
height:77px;
background: url(images/footer_bj.gif) repeat-x top left;
text-align:center;}

a {
color:#630;
line-height:1.3em;
text-decoration:none;
}
a:hover{
text-decoration:underline;
font-weight:bold;
}

html部分代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="1.css" rel="stylesheet" />
</head>

<body>
<div id="title">
   <div id="top"><img src="images/logo.gif" /></div>
   <div id="nav">
         <div class="m"><a href="#">网站首页</a><br />
slkdfskdf</div>
         <div class="m"><a href="#">供应商品</a><br />
ydjfksjdf</div>
         <div class="m"><a href="#">公司简介</a><br />
gjdflkjsd</div>
         <div class="m"><a href="#">诚信档案</a><br />
dddddddd</div>
         <div class="m"><a href="#">技术文章</a><br />
skdjfksd</div>
         <div class="m"><a href="#">公司动态</a><br />
dfdfkdfk</div>
         <div class="m"><a href="#">招聘中心</a><br />
lkfldkfj</div>
         <div class="m"><a href="#">联系我们</a><br />
uioiopjf</div>
         <div class="m"><a href="#">客户留言</a><br />
cmvnckjv</div>
   </div>
   <div id="buttom"></div>

</div>
<div id="content">
   <div id="left">
      <div id="left1" class="left2">
      <h3>产品分类</h3>
        <ul>
               <li><a href="#">胶粘带检测仪器</a></li>
                <li><a href="#">胶粘带测仪器</a></li>
                <li><a href="#">胶粘仪器</a></li>
                <li><a href="#">胶粘带检测检测仪器</a></li>
                <li><a href="#">胶粘带检测仪器</a></li>
                <li><a href="#">胶测仪器</a></li>
                <li><a href="#">胶粘带检测带仪器</a></li>
        </ul>

      </div>
      <div id="left3" class="left2">
      <h3>站内搜索</h3>
       <ul>
            <li>
               <form id="form1" name="form1" method="post" action="" style="margin-bottom:0;">
                 <label>
                   <input name="textfield" type="text" id="textfield" size="6" />
                   <input type="submit" name="button" id="button" value="搜索" style="background-color:#630;"/>
                 </label>
               </form>
            </li>
            </ul>

      </div>
      <div id="left4" class="left2">
      <h3>反馈信息</h3>
        <ul>
               <li><a href="#">胶粘带检测仪器</a></li>
                <li><a href="#">胶粘带测仪器</a></li>
                <li><a href="#">胶粘仪器</a></li>
                <li><a href="#">胶粘带检测检测仪器</a></li>
                <li><a href="#">胶粘带检测仪器</a></li>

        </ul>

      </div>
      <div id="left5" class="left2">
      <h3>友情链接</h3>
        <ul>
                 <li><a href="#">胶测仪器</a></li>
                  <li><a href="#">胶测仪器</a></li>
               <li><a href="#">胶粘带检测仪器</a></li>
                <li><a href="#">胶粘带测仪器</a></li>
                <li><a href="#">胶测仪器</a></li>
                <li><a href="#">胶粘带检测带带检</a></li>
        </ul>

      </div>
      <div id="left6" class="left2">
      <h3>联系地址</h3>
        <ul>
               <li>联系人：苏小姐</li>
                <li>电话：0516-88556974</li>
                <li>传真：0516-88552311</li>
                <li>手机：1586971358</li>
                <li>地址：苏州市经济开发</li>
                <li>网址：www.xzjm.cn</li>

        </ul>

      </div>
   </div>
   <div id="right">
       <div class="b">推荐产品</div>
       <div id="right1" >
       <div class="t1"><img src="images/product1_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product2_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product3_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product4_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product5_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product6_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product7_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product9_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product10_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>
       <div class="t1"><img src="images/product11_pic.gif" width="84" height="84" /><div><a href="#">第一产品</a></div></div>


       </div>
   <div class="b">公司简介</div>
       <div id="right2" >老师看见对方了空间上的浪费空间了深刻的解放路口时间的法律会计师独立开发建设了地方是的解放路上看见对方离开时间的分离开手机的浪费空间上来的快解放了深刻的解放路上看见对方离开时间地方离开是大方科技楼上的积分了深刻的解放路上看见对方离开时间的房间数量的反馈及时开始的减肥了考试的肌肤立刻接受对方流口水的解放了考试的解放路口时对方流口水的解放路口时间的分离开始大幅是的房间里上课的解放路口时间地方离开撒旦老师看见对方离开时间的法律考试及地方开始了的房间里上课的肌肤流口水的肌肤立刻受到上了飞机失控地方地方，每个地方实力的开放式。</div>
       <div class="b">公司主营产品/服务</div>
       <div id="right3" >老师看见对方了空间上的浪费空间了深刻的解放路口时间的法律会计师独立开发建设了地方是的解放路上看见对方离开时间的分离开手机的浪费空间上来的快解放了深刻的解放路上看见对方离开时间地方离开是大方科技楼上的积分了深刻的解放路上看见对方离开时间的房间数量的反馈及时</div>
       <div class="b">诚信档案</div>
       <div id="right4" >老师看见对方了空间上的浪费空间了深刻的解放路口时间的法律会计师独立开发建设了地方是的解放路上看见对方离开时间的分离开手机的浪费空间上来的快解放了深刻的解放路上看见对方离开时间地方离开是大方科技楼上的积分了深刻的解放路上看见对方离开时间的房间数但是客观建立开放给家里的开发机构两块地方就公开答复了的开放给家里的开发机构的开发机构的咖啡馆的反馈给肌肤的颗粒感觉了对方可根据里放的开关键的开放了国家量的反馈及时</div>

   </div>
</div>
<div id="bottom"><br />
版权信息：2011年10月十九日<br />
联系人：孙小姐<br />
地址:苏州市经济开发区</div>
</body>
</html>

转载于:https://www.cnblogs.com/yanzhuan/archive/2011/11/14/2248042.html

weixin_30596343

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单布局

css部分的代码；body{color:#630;background:#FC3;font-size:12px;}#title,#content,#bottom{width:630px;margin:0 auto;}#title{}#top{padding-top:5px;padding-left:20px;height:60px;background:url(...
复制链接

扫一扫