高手们进来帮帮忙吧，在线等！！用div+css写

4个回答

#热议# 空调使用不当可能引发哪些疾病？

xujinzi123
2012-04-26 · TA获得超过424个赞

知道小有建树答主

回答量：756

采纳率：68%

帮助的人：409万

我也去答题访问个人页

关注

展开全部

这个不是李老师的温州广厦的布局么我上个月刚刚做完这个项目
*{ font-size:12px;
margin:0px;
padding:0px;

}

body{color:#666;
width:867px;
margin:0 auto;
background:#2c383e;
}
#nav{
background:url(../images/linkbg.jpg);
width:867px;
height:51px;
}
#header{
width:867px;
height:323px;
}
#sidebar{
background:#fff url(../images/weline.gif) no-repeat right center;

width:251px;
height:490px;
float:left;
}
#news{
background:#fff;
width:313px;
height:300px;
float:left;
}
#about{
background:#fff;
width:303px;
height:300px;
float:left;
}

#estate{
background:#fff;
width:616px;
height:190px;
float:left;
}
#footer{
background:url(../images/bg.gif);
clear:both;
width:867px;
height:110px;

}
这个是CSS布局主页的
实际是李是把 index.css 和 basic.css 分开的
下面给出主页和css 的完整代码：
这个是html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="style/basic.css"/>
<link rel="stylesheet" type="text/css" href="style/index.css"/>
<title>温州广厦</title>
</head>
<body>
<div id="header">
<embed src="images/banner.swf"></embed>
</div>

<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="lou.html">楼盘展示</a></li>
<li><a href="job.html">人才招聘</a></li>
<li><a href="contact.html">联系我们</a></li>
<li class="end"><a href="guest.html">留言反馈</a></li>
</ul>
</div>

<div id="sidebar">
<h1></h1>
<img src="images/wel2.gif"/>
<ul>
<li>温州广厦</li>
<li>中国知名房地产企业</li>
<li>中国建设行业信用3A级单位</li>
<li>被中华全国工商业联合会住宅产业</li>
<li>商会推选为理事会员</li>
<li>消费者信得过、放心开发商</li>
<li>重质量创品牌优秀单位</li>
<li>质量、服务诚信示范单位</li>
<li>被龙湾建设局评为先进单位</li>
<li><a href="#"></a></li>
<li class="line"></li>
<li>三盘领海</li>
<li>全国最佳景观别墅</li>
<li>全国100个顶级别墅区之一</li>
<li><a href="#"></a></li>
</ul>
</div>


<div id="news">
<h1></h1>
<ul>
<li class="date">2007-9-28 9:27:21</li>
<li>央行：第2套住房贷款首付款比例不得低于40%</li>
<li class="date">2007-8-20 10:41:23</li>
<li>智能化工程招标</li>
<li class="date">2006-12-8 16:48:41</li>
<li>温州NO.1豪宅即将出炉</li>
<li class="date">2006-8-7 16:06:00</li>
<li>塘下金河大厦8月份进行预验收，并于年底交付…</li>
<li class="date">2006-8-7 16:05:09</li>
<li>三盘领海别墅区已开始预登记</li>
<li><a href="#"></a></li>
</ul>
</div>

<div id="about">
<h1></h1>
<img src="images/aboutimg.gif" />
<p>温州广厦建设开发有限公司,法定代表人:余文龙;企业类型:有限责任公司:经营范围:房地产开发(凭资质证经营)。建筑材料销售。公司现有职工40余人，其中专业技术人员28人(高级职称7人,中级职称21人)... </p>
<p><a herf="#"></a></p>

</div>
<div id="estate">
<div id="econtent">
<img src="images/estate.gif" >
<dl>
<dt> </dt>
<dd>三盘·领海</dd>
<dd> 三盘领海坐落在温州著名风景区--洞头三盘岛西边,海中湖中间,也是温州到洞头县城的必经之路,与温州市区50公里,与洞头县城只需3分钟...</dd>
<dd><a herf="#"></a></dd>
</dl>
</div>
</div>

<div id="footer">
<h1> </h1>
<p>COPYRIGHT @ WZGS.NET, 2006. All RIGHTS RESERVED
</p>
</div>
</body>
</html>
下面是CSS basic
*{ font-size:12px;
margin:0px;
padding:0px;

}

body{color:#666;
width:867px;
margin:0 auto;
background:#2c383e;
}
#header{
width:867px;
height:323px;
}
#header embed{
width:867px;
height:323px;
}
#nav{
background:url(../images/linkbg.jpg);
width:867px;
height:51px;
}
#nav ul{
list-style-type:none;
height:48px;
line-height:48px;
}
#nav ul li{
float:left;
background:url(../images/linkr.gif) no-repeat right center;
width:120px;
text-align:center;
}
#nav ul .end{
background:url()
}
#nav ul li a{
text-decoration:none;
color:#fff;
}
#nav ul li a:hover{
text-decoration:underline;
font-size:14px;
color:yellow;
}

#footer{
background:url(../images/bg.gif);
clear:both;
width:867px;
height:110px;

}
#footer h1{
margin-top:10px;
height:33px;
line-height:33px;
background:url(../images/footer2.gif) no-repeat top center;
}
#footer p{
font-size:12px;
color:#ccc;
width:340px;
margin-left:auto;
}
下面是主页的CSS
#sidebar{
background:#fff url(../images/weline.gif) no-repeat right center;

width:251px;
height:490px;
float:left;
}
#sidebar h1{
background: url(../images/wel.gif) no-repeat;
height:35px;
width:123px;
margin-left:20px;
margin-top:18px;
}
#sidebar img{
border:0px;
margin-left:15px;
}
#sidebar ul{
list-style-type:none;
margin-left:20px;
margin-top:4px;
line-height:180%;
}
#sidebar ul li a{
width:65px;
height:11px;
display:inline-block;
background: url(../images/more.gif) no-repeat left center;
}
#sidebar ul li.line{
border-bottom:1px solid #ccc;
height:10px;
line-height:10Px;
margin-right:20px;
}
#news{
background:#fff;
width:313px;
height:300px;
float:left;
}
#news h1{
background:url(../images/news.gif) no-repeat;
width:123px;
height:27px;
margin-left:20px;
margin-top:20px;
}
#news ul{
margin-top:0px;
background:url(../images/weline.gif) no-repeat right;
list-style-type:none;
margin-left:20px;
line-height:152%;
}
#news ul li{
padding-left:10px;
}
#news ul li.date{
color:orange;
font-weight:bold;
background:url(../images/ico.gif) no-repeat left center;
}
#news ul li a{
width:65px;
height:11px;
display:inline-block;
background: url(../images/more.gif) no-repeat center;
}

#about{
background:#fff;
width:303px;
height:300px;
float:left;
}
#about h1{
margin:20px 0 0 20px;
width:127px;
height:26px;
background: #000 url(../images/about.gif) no-repeat;

}
#about img{
border:0px;
margin:0 0 0 15px;
}
#about p{
margin-left:20px;
width:240px;
line-height:22px;
}
#about p a{
width:65px;
height:11px;
display:inline-block;
background: url(../images/more.gif) no-repeat center;
}

#estate{
background:#fff;
width:616px;
height:190px;
float:left;
}
#estate #econtent img{
border:0px;
display:block;
margin:15px 0 0 10px;
float:left
}
#estate #econtent{
width:580px;
margin:0px auto 0 auto;
height:160px;
border-top:1px solid #ccc;
}
#econtent dl{
width:280px;
float:left;
margin:20px 0 0 30px;
}
#econtent dl dt{
height:30px;
background:url(../images/estate1.gif) no-repeat;
}
#econtent dl dd{
line-height:180%;
}
#econtent dl dd a{
width:65px;
height:22px;
display:inline-block;
background: url(../images/more.gif) no-repeat center;
}

已赞过 已踩过<

评论收起

依然幻吟枫
2012-04-25 · TA获得超过433个赞

知道小有建树答主

回答量：197

采纳率：0%

帮助的人：135万

我也去答题访问个人页

关注

展开全部

<!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=gbk-23" />
<title>布局</title>
<style>
*{margin:0;padding:0}
body {font-size:12px;background:#2c383e;}
img {border:0px;}
ul {list-style-type:none;}
a {text-decoration:none; color:#494949;}
a:hover{color:#000;}
h1,h2{font-size:12px;font-weight:normal}

.all{width:867px;margin:0 auto;}
.header{height:323px;background:red}
.nav{height:51px;background:blue}
.con{}
.sidebar{width:251px;height:490px;float:left;background:green}
.right{width:616px;float:right}
.news{width:313px;height:300px;float:left;background:red}
.about{width:303px;height:300px;float:left;background:pink}
.estate{height:190px;clear:both;background:blue}
.clear{clear:both}
.footer{height:110px;background:lightblue;}
</style>
</head>

<body>
<div class="all">
<div class="header"></div>
<div class="nav"></div>
<div class="con">
	    <div class="sidebar"></div>
		
		<div class="right">
		<div class="news"></div>
		<div class="about"></div>
		<div class="estate"></div>
	    </div>
	    <div class="clear"></div>
</div>

<div class="footer"></div>
</div>
</body>
</html> 
要把CSS独立出来就把<STYLE></STYLE>里的内容剪切到一个CSS文件，然后在<head></head>中加个<link rel="stylesheet" href="CSS路径" type="text/css" /> 
,要加载body的背景图片，改下.body{background:#2c383e url(这里写要作为背景图的地址) repeat-x;}渐变加颜色应该是repeat-x的。


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

龙阳清风
2012-04-25 · TA获得超过1696个赞

知道小有建树答主

回答量：865

采纳率：66%

帮助的人：380万

我也去答题访问个人页

关注

展开全部

你是放一个文件里面还是CSS要独立出来的？
<!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>
<style type="text/css">

</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="content">
<div class="sidedar"></div>
<div class="right">
<div class="news"></div>
<div class="about"></div>
<div class="blank"></div>
<div class="estate"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
。。。。。。。。被人抢答了

已赞过 已踩过<

评论收起

tl331957023
2012-04-26 · 超过13用户采纳过TA的回答

知道答主

回答量：69

采纳率：0%

帮助的人：40.4万

我也去答题访问个人页

关注

展开全部

为嘛用div+css写，虽然能写出来，但是用table不是更简单，非要把简单的问题弄复杂么

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

高手们进来帮帮忙吧，在线等！！用div+css写

为你推荐：