UL-LI 标签结合CSS的运用

矫情吗；* 2021-09-10 04:28 573阅读 0赞

# UL-LI 标签结合CSS的运用 #

在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。

其实Dreamweaver中也有自带的CSS布局的范例，如下图：  
![css布局范例][css]

1.  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;  
    \}
    
     *   
     *  供求信息
     *  供求信息网

[css]: http://www.qqgb.com/WebDesign/WebDesign_Pic/200606/20066133266367.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，573人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS三角强化的巧妙运用（HTML、CSS）

CSS三角强化的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

╰半橙微兮°/ 2023年10月03日 13:16/ 0 赞/ 32 阅读

相关 CSS标签

1. CSS 语法由三部分构成：选择器、属性和值： selector \{property: value\} 2.CSS的基本写法 h1,h2,h3,h4,h5,h6

Dear 丶/ 2022年12月08日 15:58/ 0 赞/ 237 阅读

相关 CSS clip-path 运用

偶然间接触到 clip-path 的 CSS 属性，接的挺有意思，想着记录一下。 clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。根

ゝ一纸荒年。/ 2022年10月07日 13:50/ 0 赞/ 195 阅读

相关运算符的结合运用实例

public class java6_17 { / @param args / public static vo

素颜马尾好姑娘i/ 2022年09月17日 15:14/ 0 赞/ 227 阅读

相关除法和强制类型转换的结合运用

public class java6_3 { / @param args / public static voi

Myth丶恋晨/ 2022年09月17日 15:13/ 0 赞/ 217 阅读

相关 css三角形运用

一个简单的三角形运用页面原理就是宽高为0，设置边框就是三角形了，然后加点定位到自己想要的地方。 .sjx{ margin: auto;

逃离我推掉我的手/ 2022年04月10日 07:14/ 0 赞/ 245 阅读

相关前端与数据库结合运用详解

1、mysql数据库（了解）什么是数据库：存放数据的仓库数据库语言： mysql sqlServer oracle ---->关系型数据库，非关系型数库：m

﹏ヽ暗。殇╰゛Y/ 2022年01月12日 06:05/ 0 赞/ 635 阅读

相关 CSS--CSS与JavaScript的结合

前言 CSS与JavaScript的结合是非常紧密的，所以在这方面我们需要好好的学习，接下来我将用一个例子来介绍CSS如何和JavaScript结合使用的。内容

桃扇骨/ 2021年09月27日 05:30/ 0 赞/ 364 阅读

相关 UL-LI 标签结合CSS的运用

UL-LI 标签结合CSS的运用在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。其实Dreamweaver中也有自带的CSS布局的

矫情吗；*/ 2021年09月10日 04:28/ 0 赞/ 574 阅读

相关 Mobx 和 Taro 的结合运用

> 静下心来学习一些数据管理方面的知识吧！！ ![6af7c69175968f7041561a0579d18e10.png][] 一：安装与使用在使用 `taro

妖狐艹你老母/ 2021年09月03日 07:59/ 0 赞/ 635 阅读