Dreamweaver自带的CSS布局范例介绍

  • 时间:2020-03-15 13:49 编辑: 来源: 阅读:216
  • 扫一扫,手机访问
摘要:Dreamweaver自带的CSS布局范例介绍,在CSS布局中,ul,li的运用是非常常见的。配合DIV与CSS,创建无表格布局。 其实Dreamweaver中也有自带的CSS布局的范例,如下图: LI代码的格式化:A).运用CSS格式化列表符:ul li{ list-
Dreamweaver自带的CSS布局范例介绍,在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;这一行必须要加的,这样才能块状显示!

    F).LI中的元素水平排列,关键FLOAT:LEFT:

    ul{ 
    list-style-type:none; 
    width:100%; 

    ul li{ 
    width:80px; 
    float:left; 
    }


  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【技术文章|】Java 开发环境配置(2021-01-16 19:16)
【技术文章|java技术】Java简介 主要特性 发展历史(2021-01-16 19:10)
【技术文章|java技术】eclipse项目如何导入myeclipse项目中 如何把eclipse项目导入myeclipse(2020-12-20 22:06)
【技术文章|】如何将MyEclipse项目导入eclipse (2020-12-20 22:00)
【技术文章|java技术】如何用eclipse运行myeclipse做的项目(2020-12-20 21:55)
【技术文章|java技术】怎么分辨java框架(2020-12-17 16:27)
【技术文章|】Editplus批量转换java utf-8 bom源码文件为utf-8编码文件(2020-12-13 20:21)
【技术文章|java技术】java utf-8 bom源码文件为utf-8编码文件(2020-12-13 20:17)
【服务项目|】java程序代写计算机毕业设计代做(2020-10-20 16:54)
【热点|国内】第七次全国人口普查“查人”又“查房”,还可自主填报(2020-10-20 14:49)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 站点地图
CopyRight 2014-2024 学帮网 |粤ICP备18000800号-4