精华内容
下载资源
问答
  • hover效果加边框不抖动

    千次阅读 2015-07-19 08:28:30
    前两天遇到一个hover效果给整个div加边框的问题。 html 如下 <ul class='underline'> <li class=

    前两天遇到一个hover效果给整个div加边框的问题。
    这里写图片描述

    html 如下

     <div class="hot-recommend">
            <div class="wrapper">
                <div class="offer-list">
                    <ul class='underline'>
                        <li class="offer-list-item  fd-clr">
                            <!-- <h3 class="title">今日热推</h3> -->
                            <div class="offer-feature">
                                <dl class="fea1">
                                    <dt><a href="">外形小巧<i class="dot"></i></a></dt>
                                    <dd><a href="">轻盈有触感,数字清晰</a></dd>
                                </dl>
                                <dl class="fea3">
                                    <dt><a href="">超大屏幕<i class="dot"></i></a></dt>
                                    <dd><a href="">不锈钢笔尖圆润耐磨书写360°顺滑流畅</a></dd>
                                </dl>
                            </div>
                            <div class="offer-pic">
                                <a href="#" title="#" target=""><img src='http://wd.alibaba-inc.com/i/260-260.png' alt=''/></a></a>
                                <i class='sold-out'></i>
                                <p class="text">已抢完<span>sold out</span></a></p>
                            </div>
                            <div class="offer-feature">
                                <dl class="fea2 ">
                                    <dt><i class="dot "></i>大按键</a></dt>
                                    <dd>墨水仓可视窗口方便观察墨量</a></dd>
                                </dl><dl class="fea4">
                                    <dt><i class="dot"></i>双电源</a></dt>
                                    <dd>直液式控墨系统出墨匀保证用完最后一滴</a></dd>
                                </dl>
                            </div>
                            <div class="offer-detail">
                                <dl class="offer-introduce">
                                    <dt class='offer-title'><span>deli/得力 837ES 经济型太阳能双电源计算器</span><i ></i></dt>
                                    <dd class='offer-slogan'>7月7日雨,白雪直液式中性笔今日首发。9.8一盒含泪卖,比圆珠笔更低的价格,走珠笔的顺滑手感,你值得拥有!和圆珠笔说拜拜~</dd>
                                </dl>
                                <p class="timeout"><i class='timeout-icon'></i><span>限时特惠 <span class="month"></span><span class="day"></span><span class="hour"></span>小时<span class="minute"></span>分钟<span class="second"></span></span></p>
                                <p class="offer-price">
                                    <span class="price-cur"><i class="fd-cny">&yen;</i><span class="split"><em>555.99</em></span><i class="unit">/个</i></span>
                                    <span class="price-old"><i class="fd-cny">&yen;</i><strike>163.00<i class="unit">/个</strike></i></span>
                                    <i class="tax-icon"></i>
                                </p>
                                <p class="offer-count">
                                    <span class="sale"><span class='sale-count'>53</span><i class="unit"></i>已售</span>
                                    <i class='space'> | </i>
                                    <span class="inventory">剩余<span class='inventory-count'>222</span><i class="unit"></i>库存</span>
                                </p>
                                <a class="buy" href="" target="" title="">立即抢购</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    less文件

    .offer-list{
            &:hover{
                border:solid 2px #027CFF;
                height:372px;
                margin: -1px -2px 0-2px;
                .offer-list-item{
                    margin-top: -1px;
                }
            }
            .underline{
                border-bottom: solid 1px #e3e3e3;
            }
            ul{
                margin-left: 10px;
            }
            .offer-list-item{
                height: 372px;
            }
      }

    遇到的主要问题是hover后文字抖动,并且边框不能完美覆盖之前每个div下部的分割线。
    解决方案:
    1 遮挡分割线,整个加hover的div上移1px。
    2 解决抖动问题,减少div的height。

    方向是这两个,但是.first-list 的margin上移带来了其他问题,就是虽然高度设了,但hover时还是会向下掉1px。

    这个问题找了好久,发现原来外层div margin为负时,并不会把这个div块都带着移动,里层的li就没有跟着移动,所以出现了怎么调都还是会看到div块向下抖动的问题,并且下边框还出现了遮住1px的问题。问题是ul层也没有设置overflow:hidden。

    后来想到了给li用一个margin:-1px。两个问题一起解决啦。不过下边框被遮住的应该是是因为div设置的高度值问题。
    其实有种比较简单的解决方法,那就是hover之前给div加白色边框占位,hover改变border颜色。这样很简单,但是不够通用,在这里就用不了,因为页面上有一个div的左上角有一个背景图片,白色的边框会在上面留下痕迹。没办法用。

    margin经常会出现无效的情况,之前有遇到过,在这里也总结一下。

    1. margin-top失效
    <div> 
    <divclassdivclass="box1">float:left</div> 
    <divclassdivclass="box2">clear:both;margin-top:20px;</div> 
    </div> 

    网上能找到的两种比较靠谱的解释:

    1:“在CSS2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…”
    2:当第一个层浮动,而第二个没浮动层的margin会被压缩,详见--浮动元素后非浮动元素的margin的处理。
    得到解决问题思路:1一起浮动 2 两个div中间加一个div清除浮动。
    

    2父元素里第一个子元素margin-top失效。它会默认为是父元素的margin。
    解决办法:
    1.给父容器box加overflow:hidden;属性
    2.父容器box加border除none以外的属性
    3.用父容器box的padding-top代替margin-top

    参考文章:CSS中margin-top属性失效问题解决

    知其然,知其所以然。

    展开全文
  • ``` <ul> <li> ... </li> ... <li> ... </li> ....movepicture ul li{ float: left; list-style-type:none; padding: 40px; list-style: none; } ```
  • ul&gt; &lt;li&gt;&lt;a href="#" style="border-radius:5px 0 0 5px;"&gt;注册字母邮箱&lt;/a&gt; &lt;li&gt;&lt;a href="#" style=...
    第一种:<div class="one">
    <ul>
    <li><a href="#" style="border-radius:5px 0 0 5px;">注册字母邮箱</a>
    <li><a href="#" style="border-left: none; border-right: none;">注册手机号码邮箱</a>
    <li><a href="#" style="border-radius:0 5px 5px 0;">注册VIP邮箱</a>
    </ul>

    </div>

    CSS样式
    .one{
    width: 500px;
    height: 200px;
    margin: 200px auto;

    }
    .one a{
    width: 140px;
        height: 30px;
    text-decoration: none;
    display: block;
        text-align: center;
        line-height: 30px;

    }
    .one ul  li{
    float: left;//设置浮动,让标签并排显示
    list-style: none;//设置li的的样式
    }
     a:link {
        background: #FFFFFF;
        color: #000000;
        border:1px solid  #999999 ;//给超链接a加边框

       } 



    第二种;
     <ul>
              <li><span>这里是文字</span></li>
              <li><span>这里是文字</span></li>
              <li><span>这里是文字</span></li>
           </ul>
    CSS样式
    li{
    list-style: none;
    float: left;
    border: 1px solid blue;
    }
    .li{
    border-right: none;
    }
    .li1{
    border-radius:5px 0 0 5px ;//给li加圆角边框
    }
    .li2{
    border-radius:0 5px 5px 0 ;

    }


    展开全文
  • 为了对html不同标签加边框虚线,我们选择几个常用标签对齐设置边框虚线效果。 1、html常用标签 p标签 span ul li table tr td 2、实例用到CSS属性单词 border width height 3、实现虚线的CSS重点介绍 border为边框...
  • 2.标题用ul,li:给ul加下边框2px,高度30px,行高30px;给li加高度28px,行高28px;给选中li加上边框2px,下边框2px白色;&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta ...

    标题与内容连接中间不显示边框布局:


    1.给最外层div加个宽度,包住标题和内容;

    2.标题用ul,li:给ul加下边框2px,高度30px,行高30px;给li加高度28px,行高28px;给选中li加上边框2px,下边框2px白色;

    <!DOCTYPE html>

    <html>


    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box{
    width: 430px;
    }
    .clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
    }

    .clearfloat {
    zoom: 1
    }

    ul,
    li {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    .title {
    border-bottom: 2px solid red;
    height: 30px;
    line-height: 30px;
    }

    .title li {
    float: left;
    width: 70px;
    margin: 0 3px;
    cursor: pointer;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 28px;
    height: 28px;
    border-bottom: 0;
    }
    .title li.active{
    border-top: 2px solid red;
    border-bottom: 2px solid #fff;
    }
    .content{
    border: 1px solid blue;
    padding-left: 20px;
    padding-bottom: 30px;
    border-top: none;
    }
    .content a{
    color: #333;
    text-decoration: none;
    line-height: 24px;
    margin-bottom: 5px;
    display: block;
    }
    .hide{
    display: none;
    }
    </style>
    <script>
    window.οnlοad=function(){
    var title=document.getElementById("title");
    var Oli=title.getElementsByTagName("li");

    var content=document.getElementById("content");
    var Oul=content.getElementsByTagName("ul");

    for(var i=0;i<Oli.length;i++){
    Oli[i].index=i;
    Oli[i].οnmοuseοver=function(){
    for(var i=0;i<Oli.length;i++){
    Oli[i].className=" ";
    }
    this.className="active";

    for(var j=0;j<Oul.length;j++){
    Oul[j].className="hide";
    }
    Oul[this.index].className=" ";
    }
    }
    }

    </script>
    </head>


    <body>
    <div class="box">
    <ul id="title" class="title clearfloat">
    <li class="active">房产</li>
    <li>家居</li>
    <li>二手房</li>
    </ul>
    <div id="content" class="content">
    <ul>
    <li>
    <a href="#">275万购昌平邻铁三居 总价20万买一居</a>
    </li>
    <li>
    <a href="#">200万内购五环三居 140万安家东三环</a>
    </li>
    <li>
    <a href="#">北京首现零首付楼盘 53万购东5环50平</a>
    </li>
    <li>
    <a href="#">京楼盘直降5000 中信府 公园楼王现房</a>
    </li>
    </ul>
    <ul class="hide">
    <li>
    <a href="#">40平出租屋大改造 美少女的混搭小窝</a>
    </li>
    <li>
    <a href="#">经典清新简欧爱家 90平老房焕发新生</a>
    </li>
    <li>
    <a href="#">新中式的酷色温情 66平撞色活泼家居</a>
    </li>
    <li>
    <a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
    </li>
    </ul>
    <ul class="hide">
    <li>
    <a href="#">通州豪华3居260万 二环稀缺2居250w甩</a>
    </li>
    <li>
    <a href="#">西3环通透2居290万 130万2居限量抢购</a>
    </li>
    <li>
    <a href="#">黄城根小学学区仅260万 121平70万抛!</a>
    </li>
    <li>
    <a href="#">独家别墅280万 苏州桥2居优惠价248万</a>
    </li>
    </ul>
    </div>
    </div>

    </body>


    </html>
    展开全文
  •  如果给每个li加border的话盒子就会被撑开,则依照浮动特性一行就容纳不下4个li,li会自动掉下来。这时,可以给ul一个宽度,li就不会掉下来,如下图所示  这时,刚好ul会比外面的盒子高几像素和几及像素(如果不...

      如图为jd的广告页面

      如果想给每个盒子加上美观的border,实现如下效果

      如果给每个li加border的话盒子就会被撑开,则依照浮动特性一行就容纳不下4个li,li会自动掉下来。这时,可以给ul一个宽度,li就不会掉下来,如下图所示

      这时,刚好ul会比外面的盒子高几像素和几及像素(如果不清除浮动ul的高度是0),这时再给最外面的盒子overflow-hidden就能达到目的。如图所示

      把最外面盒子的border去掉就能得到想要的效果了。

     

     

       代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>消除多个边缘的margin</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .box{
                height: 300px;
                width: 400px;
                margin: 40px auto;
                overflow:hidden;
                /*溢出的边界消除*/
    /*            border:1px solid #000;*/
            }
            ul{
                width: 500px;
                overflow: hidden;/*触发bfc就可以在浏览器看到ul*/
            }
            li{
                width: 100px;
                height: 100px;
                float: left;
                border-bottom:1px solid #ccc;
                border-right: 1px solid #ccc;
            }
            /*使用三层盒子模型做出效果
            box给overflow:hideen消除右边和下面的总边距
            ul拿来撑开以便一行能容纳4个li
            li拿来给border
            */
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/mugglean/p/9152468.html

    展开全文
  • .good ul li a{ font-size: 16px; margin-left: 30px; padding:0 30px; color: #050505; border-left: 2px solid #c5bfc5; } .good a{ float: right; font-size: 16px; margin-right: 30px; color: #00a4ff...
  • <ul><li>[ ] 边框</li><li>[ ] 装饰</li><li>[√ ] 图表</li><li>[ ] 其他</li></ul> 这个组件的功能描述 (边框及装饰类,请提供样图)? 是否愿意为此组件提交PR?</h4><p>该提问来源于开源项目&#...
  • #nav ul li ul li { float: none;/* 调整二级菜单怎么显示 , none竖着显示*/ z-index:99999px; opacity:0.85; } #frame {/*----------图片轮播相框容器----------*/ position:...
  • css如何解决border的重叠问题

    千次阅读 2020-02-27 14:46:06
    我现在在做一个ul列表,然后给每个li加上边框,但是完了之后,相邻列表的边框就会变成2px,比如第一个li的下边框和第二个li的上边框就会重叠在一起,请问这有什么办法解决一下么? 解决方法是: 试试给li在样式...
  • 我现在在做一个ul列表,然后给每个li加上边框,但是完了之后,相邻列表的边框就会变成2px,比如第一个li的下边框和第二个li的上边框就会重叠在一起,请问这有什么办法解决一下么? 解决方法是: 试试给li在样式...
  • 认识标签<二>

    2015-12-07 22:55:45
    css样式为表格加边框 caption标签 摘要 标题使用ul添加新闻信息列表,可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。语法:<ul> <li>信息</li> <li>信息</li> ...... </ul>ul-li在网页中显示的默认...
  • css伪类处理技巧记录

    2020-12-10 10:57:07
    处理ul li的左边框或者右边框问题 我们经常会遇到一系列的list组合,要求加上,上下左右的分割线,但是这些分割线最后一个标签都不需要分割线 我之前最常用的做法就是先给每个li加上下边框,然后给最后一个去掉...
  • 去除有序和无序列表中前面的序号

    千次阅读 2018-11-29 18:08:37
    这是无序列表,为了方便显示我在div和ulli外边都边框 ①在css层叠样式表中设置ul的样式 通过加入list-style:none; 将无序列表中前面的符号去除 这时又有一个问题,样式虽然去除了,但是ul符号占据的空间还是...
  • 浮动后边框元素边框重叠问题 如图所示,当相同的拥有外边框的元素浮动后会产生外边框重叠的问题。 解决方法如下: margin-left: -1px;... ul li { position: relative; float: left; list-..
  • html+css+javascript编程实战项目及心得

    千次阅读 2017-04-24 19:57:31
    一部分是ul,它的border-bottom是褐色的,ul里面有三个li,他们是inline-block的,才能水平排列,或者使用float:left属性也行。每个li边框,字体居中排列,被选中的li的css发生变化,border-top变色加粗
  • 博雅首页:网页设计

    2020-09-14 19:29:13
    最后一个么有边框,单独类名,设置右边框 **调整a标签:**给li加a类,设置属性,加宽高,转为行内元素 行高等于盒子高度 **调整位置:**多用padding,用父盒子的padding挤, **圆角:**border -radius:15p
  • IE低版本常见CSS Bug!

    2020-04-01 03:59:45
    1、加入图片有边框 当图片img会在IE浏览器中出现边框 解决方案:给img添加border:0或者border:none ...在写ulli标签的时,给li添加margin-left:10px,会出现大于10px的情况 解决方案:给li添加displa...
  • 新闻列表-练习

    2020-05-10 22:12:51
    2.背景颜色与边框线的关系:把边框线写到li 而背景颜色在ul 就会是想要的效果 因为ul是大盒子里面包着很多小li; 3.看边框, 明明有了背景颜色了padding却这么窄的原因 :背景颜色和padding不在一个选择器内; 4....
  • 一、margin负值运用 1. 消除两个盒子外边框重合1+1=2的效果。 解决方法:让每个盒子margin往左侧移动-1px,正好压住相邻盒子边框。...ul li { position: relative; float: left; list-style: none;
  • 1.文字加粗及斜体等的字体的默认样式 ...2.清除body,ul等元素的边距及填充的默认样式 padding:0; margin:0; 3.li的默认样式清除 li-style:none; 4.清除img在ie浏览器下的边框及其文字对齐...
  • HTML表格

    2018-03-17 19:14:00
    表格常用标签 1.无边框的表格 ...2.有边框的表格 ...border 属性定义表格边框大小 ...用caption表格标题,默认居中黑 5.表格内的标签 列表的定义:<ul><li>定义的列表 <ol&...
  • 表格 把两个单元格相邻的边框线合并为一条线,去掉表格边框之间的空隙 要放在<table></table>里 border-collapse:collapse; 设置表格悬停样式 ...ul li{list-style-image: url(img/1145584.gif)}...
  • 高级css-常见布局技巧

    2020-08-19 19:56:01
    1.margin负值的应用 1)让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框 2)鼠标经过某个盒子的时候,提高当前盒子的层级即可... ul li { position: relative; float: left; list-style: none; width: 15
  • 边框。 3. float 往往和html中父级节点的 overflow:auto; 联用,确保父级节点的高度。 三、ul < ul > 标签定义无序列表。 将 < ul > 标签与 < li > 标签一起使用,创建无序列表。 四、工程代码 ...
  • 最近经常遇到检查可视区域元素的场景,以前作者都用scroll事件和getBoundingClientRect方法,当然还需要为scroll...直接用demo验证这个API图1如果图1,用ul+li做出一个可滚动的页面,用红色边框区分每个li。我们现...
  • 最近经常遇到检查可视区域元素的场景,以前作者都用scroll事件和getBoundingClientRect方法,当然还需要为scroll...直接用demo验证这个API图1如果图1,用ul+li做出一个可滚动的页面,用红色边框区分每个li。我们现...
  • 最近经常遇到检查可视区域元素的场景,以前作者都用scroll事件和getBoundingClientRect方法,当然还需要为scroll...直接用demo验证这个API图1如果图1,用ul+li做出一个可滚动的页面,用红色边框区分每个li。我们现...
  • Qt Forum</a></li><li>[SOLVED]box-shadow in stylesheet | Qt Forum</a></li><li><a href="https://blog.csdn.net/GoForwardToStep/article/details/91871439">Qt之使用QGraphicsDropShadowEffect添加窗口边框以及...
  • h5记录

    2021-01-07 06:10:46
    列表:无序列表 ul li 有序列表 ol li type属性 type=”A”;start开始=”3″,自定义 di dt dd 图片 img (src 写路径,alt=”我是文字”,图片加载不出来的时候 ,title 鼠标悬停时侯的信息) 超链接 :href 路径 新...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

liul加边框