这段css排版有什么问题?我看了一下说还可以,我朋友说很菜!!
这段代码可以直接复制运行!!!
很完整,没有图片,单个文件!!!!
高手帮忙看看,说说这里面都有哪些细节问题?
顺便问一下,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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
body {
padding-left: 0px;
padding-right: 0px;
background: #fff;
margin: 0px auto;
color: #000;
text-align: center;
font-size: 12px;
}
a:link {
color: #1f3a87;
text-decoration: none;
}
a:visited {
color: #83006f;
text-decoration: none;
}
a:hover {
color: #bc2931;
text-decoration: underline;
}
a:active {
color: #bc2931
text-decoration: none;
}
.dborder {
border: #cbcbcb 1px solid;
background: #f2f6fb;
}
#header {
width: 760px;
height: 60px;
}
#header #logo {
float: left;
width: 120px;
}
#header #navigate {
float: left;
width: 620px;
padding-top: 12px;
}
#header #navigate ul {
}
#header #navigate li {
display: block;
float: left;
width: 37px;
list-style-type: none;
padding-top:20px;
}
.floatclear {
clear: both;
}
.blockad {
padding-top: 9px;
padding-bottom: 9px;
width: 760px;
height: 40px;
background: #f00;
}
#activebar {
width: 760px;
height: 60px;
}
#search {
float: left;
width: 200px;
}
#news {
float: left;
width: 300px;
}
#login {
float: left;
width: 250px;
}
#content {
width: 760px;
}
#content #left {
float: left;
width: 556px;
}
#content #right {
float: right;
width: 196px;
}
#footer {
width: 760px;
height: 60px;
}
.blankline {
clear: both;
background: #fff;
overflow: hidden;
}
.bh6 {
height: 6px;
}
.title {
height: 20px;
border-bottom: 1px dashed #f00;
}
</style>
</head>
<body>
<div id= "header " class= "dborder ">
<div id= "logo " class= "dborder ">
<p> 商标图片 </p>
</div>
<div id= "navigate " class= "dborder ">
<ul>
<li> <a href= "index.php "> 首页 </a> </li>
<li> <a href= "index.php "> 首页 </a> </li>
<li> <a href= "index.php "> 首页 </a> </li>
<li> <a href= "index.php "> 首页 </a> </li>
<li> <a href= "index.php "> 首页 </a> </li>
</ul>
</div>
</div>
<div class= "floatclear "> </div>
<div class= "blankline bh6 "> </div>
<div class= "blockad ">
<p> 上面的广告位 </p>
</div>
<div class= "blankline bh6 "> </div>
<div id= "activebar ">
<div id= "search " class= "dborder ">
<div class= "title "> 搜索板块 </div>
<div id= "title_content ">
<form method= "post " action= "search.php ">
搜索字符串: <br />
<input type= "text " name= "searchstr " /> <br />
<input type= "submit " value= "开始搜索 " />
</form>
</div>
</div>
<div id= "news " class= "dborder ">
<div class= "title "> 新闻板块 </div>
<div id= "news_content ">
<a href= "new.php?id=1 "> 新闻1 </a> <br />
<a href= "new.php?id=1 "> 新闻2 </a> <br />
<a href= "new.php?id=1 "> 新闻3 </a> <br />
<a href= "new.php?id=1 "> 新闻4 </a> <br />
<a href= "new.php?id=1 "> 新闻5 </a> <br />
<a href= "new.php?id=1 "> 新闻6 </a> <br />
<a href= "new.php?id=1 "> 新闻7 </a> <br />
</div>
</div>
<div id= "login " class= "dborder ">
<div class= "title "> 登陆板块 </div>
<div id= "login_content ">
<form method= "post " action= "login.php ">
用户名: <input type= "text " name= "username " /> <br />
密码: <input type= "password " name= "pswd " /> <br />
<input type= "submit " value= "登录 " />
</form>
</div>
</div>
</div>
<div class= "floatclear "> </div>
<div class= "blankline bh6 "> </div>
<div id= "content ">
<div id= "left " class= "dborder ">
<p> 左边内容 </p>
</div>
<div id= "right " class= "dborder ">
<p> 右边内容 </p>
</div>
</div>
<div class= "floatclear "> </div>
<div class= "blankline bh6 "> </div>
<div class= "blockad ">
<p> 下面的广告位 </p>
</div>
<div class= "blankline bh6 "> </div>
<div id= "footer " class= "dborder ">
<p> 页脚 </p>
</div>
</body>
</html>
非常感谢!!!
[解决办法]
参阅:http://www.doyoe.com/wzcg/showarticle.asp?keyfid=expbz&id=105
[解决办法]
<div id= "activebar ">
<div id= "search " class= "dborder ">
<div class= "title "> 搜索板块 </div>
<div id= "title_content ">
<form method= "post " action= "search.php ">
搜索字符串: <br />
<input type= "text " name= "searchstr " /> <br />
<input type= "submit " value= "开始搜索 " />
</form>
</div>
</div>
-----------------------
<div id= "news " class= "dborder ">
<div class= "title "> 新闻板块 </div>
<div id= "news_content ">
<a href= "new.php?id=1 "> 新闻1 </a> <br />
<a href= "new.php?id=1 "> 新闻2 </a> <br />
<a href= "new.php?id=1 "> 新闻3 </a> <br />
<a href= "new.php?id=1 "> 新闻4 </a> <br />
<a href= "new.php?id=1 "> 新闻5 </a> <br />
<a href= "new.php?id=1 "> 新闻6 </a> <br />
<a href= "new.php?id=1 "> 新闻7 </a> <br />
</div>
</div>
----------------------------
<div id= "login " class= "dborder ">
<div class= "title "> 登陆板块 </div>
<div id= "login_content ">
<form method= "post " action= "login.php ">
用户名: <input type= "text " name= "username " /> <br />
密码: <input type= "password " name= "pswd " /> <br />
<input type= "submit " value= "登录 " />
</form>
</div>
</div>
</div>
---------------------------------
三个板块的设计有点小问题啊 !为什么不把他们class属性中的样式设计成固定大小,他默认的是自适应!
[解决办法]
看看 学学
[解决办法]
css的问题小,但是html的结构问题比较多。
<div class= "title "> 新闻板块 </div>
一般建议使用 <h2> <h3> 这类的标签
<div id= "header " class= "dborder ">
既然定义了id,就可以直接对应id写class.你现在的设计是有border,你定义了.dborder,那么如果某天不用边框了,或者某个板块需要用别的边框,你还要修改html代码。
<div id= "news_content ">
<a href= "new.php?id=1 "> 新闻1 </a> <br />
<a href= "new.php?id=1 "> 新闻2 </a> <br />
此处建议使用ul,尽量少用 <br> ,强制换行也属于表现
<div id= "left "。。。>
left是表现,不建议用外观词汇来定义结构,这也是把表现同结构分离,如果某日此列不float:left了,那么#left这个id是否就很突兀?