首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

这段css排版有什么有关问题?小弟我看了一下说还可以,小弟我朋友说很菜!

2012-02-03 
这段css排版有什么问题?我看了一下说还可以,我朋友说很菜!!这段代码可以直接复制运行!!!很完整,没有图片,

这段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是否就很突兀?

热点排行