在网页设计中设置带花纹边框(二)

  • 2020-01-13 10:16:26
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.zwxs1.com

网页设计时为menu部分添加CSS样式。

#menu {/*menu容器样式*/ 

clear: both;                             /*清除左浮动和右浮动*/    

width: 790px;                            /*menu宽度*/    

margin: 0 auto;                          /*menu容器居中*/    

height:36px;                             /*menu容器的高度*/}#menu ul { /*ul样式*/    

float: left;    width:790px;                             /*ul宽度*/    

height:36px;    list-style: none;                        /*不显示项目符号*/    

border-top:#FFFFFF 2px solid;            /*设置菜单的上边框*/    

border-bottom:#FFFFFF 2px solid;         /*设置菜单的下边框*/    

background:#f7f392;                      /*ul的背景颜色*/}

#menu ul li a { /*设置链接样式*/    

float: left;                             /*左浮动*/    

height: 28px;    

width: 100px;    

padding: 10px 0 0 10px;    

font-size: 16px;    

font-weight: bold;    

text-decoration: none;    

color: #f54f06;                          /*字体颜色*/

以上代码中,首先设置了menu的宽度为790px,同样比container容器的宽度左右两侧各少10px,目的同样是为了设计网页时显示出container的背景图片,clear:float语句是为了清除浮动,由于前面的代码中使用了浮动,所以为了消除左右浮动的影响,使用此语句;在ul样式中定义了菜单的样式,其中用border语句定义了ul的上下边框;在a中定义了菜单的链接样式,其中float:left语句在这里的作用是使列表项目横向显示。

这时的网页制作已初见效果,接下来定义content样式和<h2>标题样式。

#content { /*正文样式*/    

clear: both;              /*清除浮动*/    

width: 790px;    

margin: 0 auto;    

padding-bottom:20px;    

padding-top:20px;         /*顶端内边距*/    

background:#FFFFFF;       /*正文部分背景颜色*/} 

h2{/*标题样式*/    

padding:40px auto;        /*标题内边距*/}

在content中定义了正文容器的样式,用clear:both语句清除了左右浮动,然后设置正文容器的宽度为790px。在h2中定义了标题样式。

设置网页footer部分的样式。

#footer { /*footer部分样式*/    

margin: 0 auto;                    /*居中*/    

width: 790px;                      /*footer部分的宽度*/    

height:50px;    color: #033a5d;                    /*字体颜色 */    

font-size:14px;    background:#999999;                /*footer部分的背景颜色*/

border-bottom:2px #FFFFFF solid;   /*footer部分的下边框*/    

border-top:2px #FFFFFF solid;      /*footer部分的上边框*/    

padding-top:20px;                  /*内边距*/}

6d1885219312ee4d163dd29fccf3298c.jpg

当前文章标题:在网页设计中设置带花纹边框(二)

当前URL:http://www.zwxs1.com/news/wzzz/3155.html

上一篇:在网页设计中设置带花纹边框(一)

下一篇:设置圆润的栏目模块

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
免费全部高h视频在线观看,国产精品v欧美精品v日本精品,亚洲性线免费观看视频成熟,老汉色av影院 网站地图