关于css中使用ul li的一些体会
参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40
如何修改ul li的显示
--------------------------------
css对应的定义:
ul{ margin-left: 15px;margin-bottom: 0px; } li{ list-style-type:disc; }
----------------
参考资料:
list-style-type的常用用法
语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
取值: disc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文字母 upper-alpha : CSS1 大写英文字母 none : CSS1 不使用项目符号
-------------------
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中使用ul li的一些体会的更多相关文章
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- CSS中的ul与li样式详解 list-type
转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- css中实现ul两端的li对齐外面边缘
其实就是设置ul的宽度大一些就好
- jquery中对于ul>li列表分页。学习记录
这个是很简单的一种分页,只能对列表进行分页.为了开发有可能需要用到记录下来 Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- html中去除ul,li标签的样式列表标签的点?
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
- css控制UL LI 的样式详解(推荐)
代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...
随机推荐
- 初学swift笔记 结构体(八)
import Foundation /* 和类很相似 结构体 -> 封装 属性.方法 结构体是值类型 */ //定义一个LSQ类型的结构体 关键字struct struct LSQ { var ...
- 今日哈工大刷推荐python脚本
import httplib import random import time import urllib2 import re address = raw_input("Please i ...
- Razor学习(二)@Html标签
原文链接:http://blog.csdn.net/pasic/article/details/7093802 只是因为原文作者说的东西,还有很多作为基础知识的东西,我都没有掌握,所以总结在这里,蓝字 ...
- WPF 接收exe传的值
原文:WPF 接收exe传的值 一,首先重载APP protected override void OnStartup(StartupEventArgs e) { ...
- poj 2516 (费用流)
题意:有N个供应商,M个店主,K种物品.每个供应商对每种物品的的供应量已知,每个店主对每种物品的需求量的已知,从不同的供应商运送不同的货物到不同的店主手上需要不同的花费,又已知从供应商m送第k种货物的 ...
- OAuth2.0认证介绍
OAuth2.0鉴权 返回 目录 [隐藏] 1 腾讯微博OAuth2.0认证介绍 2 获取accesstoken的两种方式 2.1 1.Authorization code grant 2.1.1 第 ...
- 依赖注入及AOP简述(十)——Web开发中常用Scope简介 .
1.2. Web开发中常用Scope简介 这里主要介绍基于Servlet的Web开发中常用的Scope. l 第一个比较常用的就是Application级Scope,通常我们会将一 ...
- 手机端页面自适应:rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- JeeSite 企业信息化快速开发平台
平台简介 JeeSite是基于多个优秀的开源项目,高度整合封装而成的高效,高性能,强安全性的开源Java EE快速开发平台. JeeSite本身是以Spring Framework为核心容器,Spri ...
- 超级实用且不花哨的js代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcEl ...