css控制UL LI 的样式详解(推荐)_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

可以用伪类 但是浏览器兼容性不好ul>i:first-child{font-weight:18px;}所以推荐用JQUERY 或者是 JAVASCRIPTJQUERY是('ul li:eq(0)').css('font-weight','18px');JAVASCRIPT是document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.fontWeight='18px';www.zgxue.com防采集请勿采集本网。

复制代码代码如下:

额。你到底是想居中还是左对齐?居中就直接用text-align:center;而默认就是左对齐的,顶多是设置text-align:left;如果你想要的效果是内容偏中间一点,那你就在li上加padding-left控制位置

<div id="menu">

给li加上宽度就可以了. 例如: ul{width:500px;list-style:none;} ul li{width:100px;float:left;margin-right:15px;line-height:20px;} 这样li的宽度就会像一个个100px大小的块一样在宽度为500px

<ul>

li左对齐要先将ul、li的默认左边距给去除了。ul,li{ margin:0px;padding:0px;} 至于li的样式,可以先将ul的样式给去除了,也可以将“·”直接放在li里面,如下:<li>·<a href=\"#\">

<li><a href="#">首页</a></li>

可以用伪类 ul>i:first-child{font-weight:18px;} 所以推荐用JQUERY 或者是 JAVASCRIPT JQUERY是 ('ul li:eq(0)').css('font-weight','18px');JAVASCRIPT是 document.getElementsByTagName('ul')

<li class="menuDiv"></li>

(\"div>ul>li\").removeClass(\"class name\").click(function(){this.addClass(\"Class name\");}) 手敲的,没有测试可行度。但大致就是这样

<li><a href="#">博客</a></li>

<li class="menuDiv"></li>

(\"div>ul>li\").removeClass(\"class name\").click(function(){this.addClass(\"Class name\");}) 手敲的,没有测试可行度。但大致就是这样

<li><a href="#">设计</a></li>

<li class="menuDiv"></li>

(\"div>ul>li\").removeClass(\"class name\").click(function(){this.addClass(\"Class name\");}) 手敲的,没有测试可行度。但大致就是这样

<li><a href="#">相册</a></li>

<li class="menuDiv"></li>

(\"div>ul>li\").removeClass(\"class name\").click(function(){this.addClass(\"Class name\");}) 手敲的,没有测试可行度。但大致就是这样

<li><a href="#">论坛</a></li>

<li class="menuDiv"></li>

(\"div>ul>li\").removeClass(\"class name\").click(function(){this.addClass(\"Class name\");}) 手敲的,没有测试可行度。但大致就是这样

<li><a href="#">关于</a></li>

</ul>

</div>

CSS:

复制代码代码如下:

额。你到底是想居中还是左对齐?居中就直接用text-align:center;而默认就是左对齐的,顶多是设置text-align:left;如果你想要的效果是内容偏中间一点,那你就在li上加padding-left控制位置

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;}

解释一下:

#menu ul {list-style:none;margin:0px;}

list-style:none,这一句是取消列表前点,因为我们不需要这些点。

margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。

#menu ul li {float:left;}

这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。

CSS中的ul与li样式详解

ul和li列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。

  一、list-style-type属性

  list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)

  list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

  list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。none:不使用项目符号。 disc:实心圆。 circle:空心圆。 square:实心方块。 demical:阿拉伯数字。 lower-alpha:小写英文字母。 upper-alpha:大写英文字母。 lower-roman:小写罗马数字。 upper-roman:大写罗马数字。

  使用list-style-type属性的示例代码如下:

li{

list-style-type:square;}

<ul>

<li>这里是列表内容</li>

<li>这里是列表内容</li>

<li>这里是列表内容</li>

</ul>

  该样式应用到页面的效果如下图所示。

  二、list-style-image属性

  list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:

  list-style-image:none/url

  list-style-image属性可以取两个值:none:没有替换的图片。 url:要替换图片的路径。

  来看一段代码:

li{

list-style-image:url(images/bg03.gif);}

<ul>

<li>这里是列表内容</li>

<li>这里是列表内容</li>

<li>这里是列表内容</li>

</ul>

  效果如下图。

  三、list-style-position属性

  list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:

  list-style-position:inside/outsideinside:项目符号放置在文本以内。 outside:项目符号放置在文本以外。

  使用list-style-position属性的示例如下:

li{

list-style-type:square;

list-style-position:outside;}

<ul>

<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>

<li>这里是列表内容</li>

<li>这里是列表内容</li>

</ul>

  效果如下图所示。

  再来看一下属性值为inside的样式。

li{

list-style-type:square;

list-style-position:inside;}

<ul>

<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>

<li>这里是列表内容</li>

<li>这里是列表内容</li>

</ul>

  四、list-style属性

  list-style属性是综合设置li样式的属性,也是一个可以继承的属性,语法结构如下:

  li-style:list-style-type/list-style-image/list-style-position

  各个值的位置可以交换。比如:

li{

list-style:url(images/bg03.gif) inside;}

<ul>

<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>

<li>这里是列表内容</li>

</ul>

  可以看一下应用到页面的效果。

干嘛不直接用li控制呢?内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 解决type=file 文件修改表单 名称不能正常回显的问题
  • 移动端前端适配方案(总结)
  • css 横向进度条和竖向进度条实现代码
  • css运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
  • 详解盒模型大小取决于它的padding,margin,border数值
  • css+svg实现b站充电效果的示例代码
  • css动画实现领积分效果的思路详解
  • html/css中的空格处理及如何保留页面中的空格
  • css 实现小尖角聊天对话框带尖角的说话泡泡效果
  • css实现气泡的小尖角效果
  • CSS ul li里加div控制样式行吗?
  • 怎样才能用css控制第一个li标签的样式,和其他li的样式不同
  • 用css 只控制第一个li的样式怎么控制?
  • div,ul,li,a等标签的css通常控制的是什么?
  • css样式怎样设置 标签中li内容居中左对齐?
  • css 如何控制ul li 每行显示几个并换行 像table效果一样
  • 1、如何用CSS设置ul,使其在div中li靠左对齐?ul有默认的左边距。2、和设置ul的标签样式的大小
  • 怎样才能用css控制第一个li标签的样式,和其他li的样式不同
  • js控制div 里面的 ul 下 li的 样式
  • 在html中,我要控制li里面的a标签样式,请问在css里面怎么控制?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程ul移动端前端适配方案(总结)css运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)css动画实现领积分效果的思路详解css实现气泡的小尖角效果css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果css 实现小尖角聊天对话框带尖角的说话泡泡效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved