精华内容
下载资源
问答
  • 主要介绍了基于正则表达式实现UL下LI样式替换功能,涉及javascript使用正则表达式进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考
  • ulli样式

    2012-06-12 14:38:39
    ul li 样式
  • 修改ul下li下ul下li的css样式

    千次阅读 2017-02-24 22:38:37
    修改ul下ul下li的css样式 window.onload=function(){ var oUl=document.getElementById('list'); var arrUl=oUl.getElementsByTagName('ul'); var ulLen=arrUl.length; var arrLi=null; for(var i=0;i ...
    <!--<!DOCTYPE html>
    
    <html>
    <head>
    <meta charset="UTF-8">
    <title>修改ul下的ul下的li的css样式</title>
    <script>
    window.οnlοad=function(){
    var oUl=document.getElementById('list');
    var arrUl=oUl.getElementsByTagName('ul');
    var ulLen=arrUl.length;
    var arrLi=null;
    for(var i=0;i<ulLen;i++){
    arrLi=arrUl[i].getElementsByTagName('li');
    var liLen=arrLi.length;
    for(var j=0;j<liLen;j++){
    arrLi[j].style.background='pink';
    arrLi[j].style.margin='5px 0';
    }
    }
    }
    </script>
    </head>
    <body>
    <ul id="list">
    <li>
    <h2>高中同学</h2>
    <ul>
    <li>王小文</li>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    </ul>
    </li>
    <li>
    <h2>高中同学3</h2>
    <ol>
    <li>王小文3</li>
    <li>张三3</li>
    <li>李四3</li>
    <li>王五3</li>
    </ol>
    </li>
    <li>
    <h2>高中同学2</h2>
    <ul>
    <li>王小文2</li>
    <li>张三2</li>
    <li>李四2</li>
    <li>王五2</li>
    </ul>
    </li>
    <li>
    <h2>高中同学3</h2>
    <ul>
    <li>王小文3</li>
    <li>张三3</li>
    <li>李四3</li>
    <li>王五3</li>
    </ul>
    </li>
    <li>
    <h2>高中同学3</h2>
    <ol>
    <li>王小文3</li>
    <li>张三3</li>
    <li>李四3</li>
    <li>王五3</li>
    </ol>
    </li>
    </ul>
    </body>
    </html>
    -->
    展开全文
  • ul li实现表格样式

    2014-07-11 16:05:16
    使用ul li 标签实现的表格样式,可代替table标签,避免搜索引擎收录不了表格中的关键字
  • 常用的div ul li css样式 详细的UL-LI样式三种形式   BODY { FONT-SIZE: 12px;FONT-FAMILY: "宋体", arial } .menu { CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px } .menu LI { PADDING-RIGHT: 0px; PADDING-...

    常用的div ul li css样式 详细的UL-LI样式三种形式

     

    展开全文
  • 遍历一个ul设置各个li不同的样式

    万次阅读 2017-05-11 17:24:31
    这里经常会遇见用CSS操作一个数组,设置第一个元素的样式与其他元素的样式不一样,这里分析一下常见的几种类型:第一种:数组第一个元素和其他元素设置不同的样式var arry = [11,22,33,44,55,66] <ul> <li v-for=...

    这里经常会遇见用CSS操作一个数组,设置第一个元素的样式与其他元素的样式不一样,这里分析一下常见的几种类型:

    第一种:数组第一个元素和其他元素设置不同的样式

    var arry = [11,22,33,44,55,66]
    <div class="setColor">
        <ul>
            <li v-for="item in arry "></li>
       </ul>
    </div>
    .setColor  ul li:first-child {
        width: 49%;
        background-color: red;
    }
    .setColor  ul li:nth-child(2) {
        width: 49%;
        background-color:green;
    
    }

    第二种:数组奇数元素和偶数元素设置不同的样式

    var arry = [11,22,33,44,55,66]
    <div class="setColor">
        <ul>
            <li v-for="item in arry "></li>
       </ul>
    </div>
    .setColor  ul li:nth-child(2n+1) {
        width: 49%;
        background-color: red;
    }
    .setColor  ul li:nth-child(2n) {
        width: 49%;
        background-color:green;
    
    }

    第三种:数组第2元素和其他元素设置不同的样式

    var arry = [11,22,33,44,55,66]
    <div class="setColor">
        <ul>
            <li v-for="item in arry "></li>
       </ul>
    </div>
    .setColor  ul li{
        width: 49%;
        background-color:green;
    }
    //这里如果执行不了,在前面在加上更高阶的父类
    .setColor  ul li:nth-of-type(2) { 
        width: 49%;
        background-color: red;
    }
    
    展开全文
  • DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等。下面大家一个css ul li的例子供学习
  • ul li 横排 样式

    万次阅读 2014-02-21 11:51:36
    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ ...
    /* ul li以横排显示 */
    
    /* 所有class为menu的div中的ul样式 */
    div.menu ul
    {
        list-style:none; /* 去掉ul前面的符号 */
        margin: 0px; /* 与外界元素的距离为0 */
        padding: 0px; /* 与内部元素的距离为0 */
        width: auto; /* 宽度根据元素内容调整 */
    }
    /* 所有class为menu的div中的ul中的li样式 */
    div.menu ul li
    {
        float:left; /* 向左漂移,将竖排变为横排 */
    }
    /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #465c71; /* 背景色 */
        border: 1px #4e667d solid; /* 边框 */
        color: #dde4ec; /* 文字颜色 */
        display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
        line-height: 1.35em; /* 行高 */
        padding: 4px 20px; /* 内部填充的距离 */
        text-decoration: none; /* 不显示超链接下划线 */
        white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
    }
    /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
    div.menu ul li a:hover
    {
        background-color: #bfcbd6; /* 背景色 */
        color: #465c71; /* 文字颜色 */
        text-decoration: none; /* 不显示超链接下划线 */
    }
    /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
    div.menu ul li a:active
    {
        background-color: #465c71; /* 背景色 */
        color: #cfdbe6; /* 文字颜色 */
        text-decoration: none; /* 不显示超链接下划线 */
    }

    2、前台引用上述CSS样式文件

     
    < link href ="Styles/Site.css" rel ="stylesheet" type ="text/css" />

     

     

    <div class="menu">
            <ul>
                <li><a href="javascript:void(0);">主页</a></li>
                <li><a href="javascript:void(0);">工作日志</a></li>
                <li><a href="javascript:void(0);">设备运行记录</a></li>
                <li><a href="javascript:void(0);">其他</a></li>
            </ul>
        </div>


     

    展开全文
  • ul li 更改样式

    千次阅读 2012-11-26 17:49:19
    更改样式: none : 不使用项目符号 disc : 默认值。实心圆 circle : 空心圆 square : 实心方块 decimal : 阿拉伯数字 lower-roman : 小写罗马数字 upper-roman : 大写罗马数字 lower-alpha :...
  • 更改ulli前点的样式

    2021-01-22 21:43:33
    更改ulli前点的样式 ul的type属性有三种值,分别为: circle 空心圆 disc 实心圆 square 实心方块 而对于li前面的这些点可以添加color进行设置颜色。 list-style: square; color: #3b99fc;
  • 清除ul li样式

    千次阅读 2020-10-27 15:04:38
    ul li { list-style: none; padding: 0px; margin: 0px; }
  • CSS样式中的 nav ul li ul 与 nav>ul>li

    千次阅读 2017-04-26 11:10:13
    问题:CSS样式中的 nav ul li ul 与 nav>ul>li 这两种写法的区别是什么,“>”的作用是什么,谢谢。 style> *{ margin:0; padding:0; list-style:none; } nav ul li ul{
  • ul li样式总结

    千次阅读 2013-01-26 10:50:32
    首页 博客 设计 相册 论坛 关于 CSS: ...#menu ul {list-style:none;...#menu ul li {float:left;} 解释一下: #menu ul {list-style:none;margin:0
  • 解决ulli设置宽高无效的问题

    千次阅读 2020-09-30 15:17:52
    问题:ul中的li 设置样式display:inline; 如果再设置 width:105px; height:56px;怎么调整都不会有影响 解决:将display:inline;换成flot: left; 问题得到解决
  • 如何将ul里面的li样式设为不同 当我们在ul里面使用v-for循环遍历li的时候,如果我们想要对li设置不同的样式我们应该怎么办喃? 对此我们可以使用 :nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N ...
  • css控制一个ul标签的指定li标签样式
  • ul li 制作表格样式

    千次阅读 2019-07-11 16:57:57
    #tableFrameTitle ul li{ background:gray; text-align:center; color:#fff; } /* 表格内容*/ #tableCase ul{} #tableCase ul li{} /* 单个表格特定样式*/ .tableCaseThree{color:#329A02;} .tableCaseFive{color:...
  • div ul li排列图片的样式 css + div
  • ul li 新闻列表样式

    千次阅读 2009-10-22 10:33:00
    无标题文档<!--#pagelist {width:390px; font-size:12px; display:inline; list-style:url(images/photo_icon1.gif) outside;margin: 0px;padding:0px;}#pagelist li {width:390px; height:22px; margin-le
  • CSS中的ulli样式详解 list-type

    千次阅读 2014-12-26 12:16:07
    ulli列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。  一、list-style-type属性  ...
  • CSS ul li 样式详解

    千次阅读 2015-07-29 17:16:10
    首页 博客 设计 相册 论坛 关于  ...#menu ul li {float:left;} 解释一下:  #menu ul {list-style:none;margin:0px;}  list-style:none,这一句是取消列表前点,因为我们不需要这些
  • 改变多个ul下第一个li样式

    千次阅读 2017-04-24 14:23:06
    body内的代码如下 华仔 华仔 华仔 磊磊 磊磊 磊磊 $(function(){ ...var lis=$("ul");...$("ul:eq("+i+") li:first").css("background","red"); } //方式二 $("ul").each(function(){ $(this).
  • UL下LI用正则表达式替换样式

    千次阅读 2015-09-24 15:15:51
    最先我想到是在UL下填充好在替换发觉结果差强人意,没有真正改变样式: $("#UlContent li").each(function (index) { // alert(index + ': ' + $(this).text());

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,474
精华内容 50,589
关键字:

给ul下的li设置样式