Dreamweaver CSS网页页面合理布局ul和li案例

日期:2020-08-29 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

在CSS合理布局中,ul,li的应用是是非非经常见的。相互配合DIV与CSS,建立无报表合理布局。
实际上Dreamweaver中也是有自带的CSS合理布局的案例,以下图:

LI编码的文件格式化:
A).应用CSS文件格式化目录符:
ul li{
list-style-type:none;
}
比如下面的:
供求信息内容

B).假如你想将目录符换为图象,则:
ul li{
list-style-type:none;
list-style-image: url(images/icon.gif);
}
比如下面的:
供求信息内容

C).以便左对齐,能够用以下编码:
ul{
list-style-type:none;
margin:0px;
}
比如下面的:
供求信息内容

D).假如想给目录加情况色,能够用以下编码:
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
比如下面的:
供求信息内容

E).假如想给目录加MOUSEOVER情况变色实际效果,能够用以下编码:
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }
表明:display:block;这1行务必要加的,这样才可以块状显示信息!

比如下面的:
供求信息内容

F).LI中的元素水平排序,重要FLOAT:LEFT:
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}