精华内容
下载资源
问答
  • ul li边框问题

    千次阅读 2019-08-27 16:01:08
    .rt-box ul{ height: 28px; line-height: 28px; font-size: 13px; color: #999999; li{ border: 1px solid #EEF0F6; float: left; width: 48px; text-align: center; cursor: pointer; box-sizing: border-box } li....

    在这里插入图片描述
    .rt-box ul{
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    color: #999999;

    li{
    border: 1px solid #EEF0F6;
    float: left;
    width: 48px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box

    }
    li:nth-child(2n){
    border-left: none;
    border-right: none;
    }
    li:last-child{
    border-right: 1px solid #EEF0F6;
    }
    }
    div .rt-box li.active{
    background: #FFE3E7;
    color: #EF334E;
    border: 1px solid #FFE3E7;
    }
    li.active+li{
    border-left: 1px solid #FFE3E7;
    }

    展开全文
  • 边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果
  • ul li 设置边框后,会产出重合的现象 解决办法就是给他设置margin去重复 li { width: 80px; height: 30px; border: solid 1px #dddddd; background-color: #ffffff; line-height: 30px; text-align: ...

    改ul li 设置边框后,会产出重合的现象

    解决办法就是给他设置margin去重复

    li {
            width: 80px;
            height: 30px;
            border: solid 1px #dddddd;
            background-color: #ffffff;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
            margin:0px -1px 0px 0px ;    //设置margin(注意:哪边重合给哪边设置-1px)
          }
          .active {
            border: solid 1px #28b28b;
            margin:0px;                   //点击效果时margin取消
            color: #28b28b;
           
          }

    如图:

    展开全文
  • 今天通过在MDN的学习更深的认识了背景、边框和列表。其中有一些之前没有遇到过的方法,今天的demo中就用了其中的background-slice。下面贴上今天的demoTitle​demo.czcps.cn代码如下:<!DOCTYPE html> <...

    a77d9cac38d537f85f61d8a647ae58c0.png

    今天通过在MDN的学习更深的认识了背景、边框和列表。其中有一些之前没有遇到过的方法,今天的demo中就用了其中的background-slice。

    下面贴上今天的demo

    Titledemo.czcps.cn

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第三天</title>
        <style>
            body{
                background-image: url("seabeach.jpg");
                background-size:100% auto;
                background-repeat: no-repeat;
    
            }
    
    
            #md{
                color: chartreuse;
                font-style: italic;
                font-weight: bold;
                font-size: 50px;
                text-align: center;
                text-transform: capitalize;
                margin: 200px auto;
    
            }
            .v{
                font-family: 书体坊米芾体;
                font-size: 50px;
                text-align: center;
                border-radius: 300px 300px;
                width: 300px;
                margin: 50px auto;
    
                background-color: #f66;
                text-align: center;
                border: 20px solid black;
                background-clip: padding-box;
                border-image-source: url("border-image.png");
                border-image-slice: 40;
                border-image-repeat: round;
    
            }
            ul{
                text-align: center;
                margin: 50px auto;
    
            }
            li{
                display: inline;
    
            }
            a{text-decoration: none;
                font-weight: bold;
    
                opacity: 0.5;
                font-size: 2em;
                padding: 10px;
            }
            p:hover{
                transform: scale(1.2,1.2);
            }
            a:link{
                background: deepskyblue;
            }
            a:visited{
                color: #ff6666;
    
            }
    
             a:hover{
                 transform: scale(1.5,1.5);
                color: chartreuse;
                background-color: sandybrown;
    
            }
            a:active{
    
                color: white;
            }
    
        </style>
    </head>
    <body >
    <p class="v">vacation</p>
    <p id="md">Happy summer</p>
    <ul>
        <li><a href=#>第一天</a></li>
        <li><a href="index.html">第二天</a></li>
        <li><a href=#>第三天</a></li></ul>
    </body>
    </html>

    收货:

    1. 第一次使用opacity设置透明度。
    2. 学会使用border-image-source和border-image-slice设置图片边框,这里要注意 background-clip的使用,这里附上该属性区别。
    w3school在线测试工具 v1.2www.w3school.com.cn

    今日待解决问题:

    1. 点击第二天超链接,第三天也会变成已点击状态。
    2. 超链接没有完全居中。
    3. 没有实现hover后scale变化(故代码中已删除)。

    剪贴今日的学习学习教程:

    5399579f0290d18bf504defececcaabc.png

    56996863a49af9a016f8bacd343bc3f8.png

    62e463f1755c8d900a41298497d1a081.png

    不附上网页的原因时这个课程只会开到九月,到时候会无法打开链接。

    今天就先到这里,明天再见!!!!

    展开全文
  • 其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很好的实践,就让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果。 最终效果图: 代码: ...

    提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合。其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很好的实践,就让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果。

    最终效果图:

    代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6     *{ margin:0; padding:0;}
     7     .box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;}
     8     .box li{ float:left; list-style:none}
     9     .box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 -5px -5px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px;}
    10     .box li a:hover{ border:5px solid #333; z-index:1;}
    11     </style>
    12 </head>
    13 <body>
    14     <ul class="box">
    15         <li><a href="#">1</a></li>
    16         <li><a href="#">2</a></li>
    17         <li><a href="#">3</a></li>
    18         <li><a href="#">4</a></li>
    19         <li><a href="#">5</a></li>
    20         <li><a href="#">6</a></li>
    21         <li><a href="#">7</a></li>
    22         <li><a href="#">8</a></li>
    23         <li><a href="#">9</a></li>
    24          <li><a href="#">10</a></li>
    25         <li><a href="#">11</a></li>
    26         <li><a href="#">12</a></li>
    27          <li><a href="#">13</a></li>
    28         <li><a href="#">14</a></li>
    29         <li><a href="#">15</a></li>
    30     </ul>
    31 </body>
    32 </html>

    不妨copy下来实践一下哦-.-

     

    转载于:https://www.cnblogs.com/sweet201314/p/3599214.html

    展开全文
  • li添加边框border ,border合并问题

    千次阅读 2020-01-07 16:25:13
    图一 出现边框重合的问题 图二 需要达到的目的,...问题:ul有多个li,每个li有1像素的边框,那么中间会出现边框重合的问题,废话不多说,直接看下面如何解决边框重合 html <ul class="lifl clearfix"> &...
  • <!... ; charset=utf-8" /> 无标题文档 #orderlist ... <li class="liCheckBox"> type="checkbox" />全选</li>  <li class="OrderName">fds</li>  <li class="TemplateName">fds</li> </ul> </html>
  • css ul li图片带边框文字混排 (扩展版) 使用jquery使图片实现垂直居中
  • 这款笔记本在屏幕上的材质选用了 13.3英寸的超薄边框4K OLED触控屏 ,和普通笔记本对比起来,屏幕亮度和精度都上升了一个档次,触控屏幕也很灵敏。屏幕还通过了Pantone色彩认证和VESA Display HDR 500 True Black...
  • 在用ul标签做tab栏时,想实现ul一个底边框线是统一的颜色,在当前li上,要给li一个其他颜色的底边框线,盖住ul的底边框线。实现以下效果 灰线是ul的线,蓝线是li的线。然后发现li的高度加上边框线的高度会把ul高度...
  • 1.使用ul li会使其中的内容和使用p标签一样,是一个块级元素,会使内容自动分行,使用后它的内容的内边距距离边框较远 2.不适用ul li标签,内容是行内元素,它的内边距距离边框比较近 3.(复习)给标签a设置居中或...
  • 列表li边框重合问题

    千次阅读 2018-05-31 14:32:54
    在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图: 可以看到每个格子的右边框和下边框明显有边框重合现象,这样很影响美观。解决这个问题: 只要给每个li设置css属性 margin:0 0 -...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...m.
  • 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:可以看到每个格子的右边框和下边框明显有边框重合现象,这样很影响美观,要解决这个问题其实也很简单;只要给每个li设置css属性 margin...
  • *{ margin:0; padding:0; } ul{ width:200px; border:1px solid black;...li{ list-style:none; width:30px; height:30px; border:1px solid black; float:left; } ul:after{ content:''; ...
  • li ref="ulli"></li> </ul> 2、JavaScript // 获取高度值 (内容高+padding+边框) let height= this.$refs.ulli.offsetHeight; // 获取元素样式值 (存在单位) let height = window.getC...
  • 当我们的li标签设置了border的时候就会出现重叠边框,如何去掉呢,见代码 html代码 <ul class="friendLink_list"> <li><a href="javascript:;">营销费用管理</a></li> <li...
  • ul中的li浮动时,无论给外层div的class写背景,还是给ul写背景,都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。
  • css中li下边框盖住ul下边框问题

    千次阅读 2018-01-16 13:40:22
    在用ul标签做tab栏时,想实现ul一个底边框线是统一的颜色,在当前li上,要给li一个其他颜色的底边框线,盖住ul的底边框线。实现以下效果 灰线是ul的线,红线是li的线。我发现无论如何写,li的高度加上边框线的...
  • 两种表格的最大特点就是不用给表格里的每个 li 元素都单独设置 css 样式,要用的时候直接闭着眼睛循环 li 标签即可。 第一种的特点是 1、内边框的大小是一致的。 2、内边框的大小和外边框的大小可以分别设置。 ...
  • html中ulli标签的用法

    千次阅读 2020-11-28 16:58:03
    如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度、行间距、背景边框等需要配合CSS一起设置。 一.做导航,居中 <!DOCTYPE ...
  • jQuery+CSS实现的UL表格,带边框提示-石家庄苗木 ul,li{ margin:0; padding:0; list-style:none; } .bbb{  width:900px;;...
  • 1.ul中的li浮动时,无论给外层div的class写背景,还是给ul写背景,都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。解决方法是给外层div加上clearfix。 .clearfix:after/...
  • 去掉每一行最后一个li的外边框 1.给每个li起类名单独去掉;(不建议使用) 2.将ul稍微多设置一点宽度,在ul的父容器中设置正常宽度、高度,并写overflow:hidden; 3.ul无父元素时可给li写margin-left:-value;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 421
精华内容 168
关键字:

liul边框