常用页面设计技巧

最新推荐文章于 2024-12-16 23:04:40 发布

企业猎人

最新推荐文章于 2024-12-16 23:04:40 发布

阅读量355

点赞数

分类专栏： CSS样式表

CSS样式表专栏收录该内容

26 篇文章

订阅专栏

本文详细阐述了网页布局设计的核心原则，包括浮动布局、边距、边框、背景及内距的应用，以及如何通过CSS类和ID选择器实现元素的定位与样式定制。重点介绍了如何使用浮动布局创建响应式的多列布局，以及如何通过CSS类定义不同组件的样式，如导航栏、文章标题和内容区块。此外，还讨论了网页底部的设计规范，强调了`line-height`属性在保持布局一致性方面的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.都包括下面的部分：

body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#444; text-decoration:none;}
a:hover { color:#f00;}

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

/*body*/
#container { width:900px; margin:0 auto;}

#header{}

#main{}

#footer{}

2.都用float:left，如main_left,main_center_main_right，里面都要用float:left，否则里面的元素浮动时，无法撑开它的外边框。

3.每个水平的div块，如menu和nav{}，可在里面定义margin_bottom：10px

4定义的时候，一般用#nav{ }，#nav_l{ }，#nav_main{ }，#nav_r{ }

5.每个块完成之后，如#nav{}完成后，要加上<div class="clearfloat"></div>清楚浮动

.box h2 { height:23px; padding:5px 10px 0 10px; font-size:14px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb; color:#444; overflow:hidden;}

.more { float:right; padding-left:13px; font-size:12px; font-weight:normal; color:#db8d3b; background:url(../images/icon.gif) 0 -46px no-repeat;}
.more:hover { color:#cb6d0a; background:url(../images/icon.gif) 0 -96px no-repeat;}/*定义a链接的颜色等*/

<h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>

#news_top { border-bottom:1px dotted #ccc; padding-bottom:8px;}
#news_top h1 { font-size:18px; line-height:2.2; font-family:"microsoft yahei"; color:#444;}
#news_top p { color:#999;}
#news_list { padding-top:6px;}
#news_list ul li { background:url(../images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.9;}
#news_list ul li span { float:right; color:#579f11;}/*定义非链接字体*/
#news_list ul li span a{ color:#FF0000;}/*定义链接字体*/

或者单独用类来定义：

a.lvse:link{ color:#33CC66}
a.lvse:hover,a.lvse:visited{ color:#0000FF}

#news_top

#news_con

ul.panel_list li{height:23px; line-height:23px;BACKGROUND: url(bullet.gif) no-repeat3px center; padding-left:10px;BORDER-BOTTOM: #ccc 1px dashed; overflow:hidden;}
ul.panel_list li span{ float:right; color:#999}

7.网页底部，line—height

.feet_top{ color:#285656;padding:0 10px; height:26px; line-height:26px; background:#dedede}
.feet_body{color:#999; padding:10px; text-align:center; background:#efefef; line-height:18px}
.feet_body a{color:#666}
.feet_body a:hover{color:#069}

类的派生.feet_body a{}

8.书写每个div，要考虑边框，背景，内距，外边距