您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:li精粹案例,盒子模型

新葡亰496net:li精粹案例,盒子模型

发布时间:2019-10-01 01:02编辑:新葡亰官网浏览(67)

    风趣的CSS标题(7):消失的边界线难点

    2016/10/14 · CSS · 1 评论 · CSS

    本文小编: 伯乐在线 - chokcoco 。未经小编许可,防止转发!
    应接加入伯乐在线 专辑笔者。

    一、HTMLCSS是什么

    开本体系,谈谈一些妙不可言的 CSS 标题,标题类型天马行空,想到什么说怎么,不止为了推广一下解决难题的笔触,更波及部分轻易忽视的 CSS 细节。

    开本体系,谈谈一些交相辉映的 CSS 标题,标题类型天马行空,想到如何说如何,不止为了推广一下消除难题的思绪,更波及一些便于忽略的 CSS 细节。

    css部分

    7、消失的边界线难题

    会见下图,平日会在一些导航栏中看看,供给每行中最终一列的入手框消失,怎样在富有浏览器中最方便温婉的达成?

    新葡亰496net 1

    只假设不须求宽容 IE8- ,那么使用 CSS3 新添的选择器无疑是一种好办法。

    JavaScript

    // 使用伪类采用器,选拔第 3n 个元素去掉边框 li:nth-child(3n){ border-right:none; }

    1
    2
    3
    4
    // 使用伪类选择器,选择第 3n 个元素去掉边框
    li:nth-child(3n){
      border-right:none;
    }

    自然,要是个数确定也非常少,给必要去掉右侧框的成分直接抬高贰个一定的 class 也就马到功成。大概,使用 table 就算烦琐一点,可是也能兑现。

    但是这样都相当不够名贵。

    此地有个小本领,正是通过抬高反向边框何况扩张七个负的 margin 来实现。

    率先,假定我们的 ul 结构如下:

    XHTML

    <div class="ul-container"> <ul> <li>测试</li> <li>消失</li> <li>边界线</li> <li>右侧</li> <li>边界线</li> <li>消失</li> <li>测试</li> </ul> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="ul-container">
        <ul>
            <li>测试</li>
            <li>消失</li>
            <li>边界线</li>
            <li>右侧</li>
            <li>边界线</li>
            <li>消失</li>
            <li>测试</li>
        </ul>
    </div>

    如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,我们的 ul 和 ul-container 宽度都设为 300px 。

    最关键的是,每一个 li 设置叁个左手框实际不是侧面框:

    CSS

    .ul-container, ul{ width:300px; } li{ float:left; width:99px; border-left:1px solid #999; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .ul-container,
    ul{
      width:300px;
    }
    li{
      float:left;
      width:99px;
      border-left:1px solid #999;
    }

    咱俩会赢得如下那样的结果:

    新葡亰496net 2

    接下去,大家将容器 ul-container 设置为 overflow:hidden ,并且将 ul 左移叁个像素 margin-left:-1px

    这样 ul 中首先列的具有边框都因为左移了一像素相同的时候被 overflow:hidden 而熄灭了,形成了下一个 li 的侧面框瞧着像左侧框同样,其实只是个障眼法:

    CSS

    .ul-container{   overflow:hidden; } ul{   margin-left:-1px; }

    1
    2
    3
    4
    5
    6
    .ul-container{
      overflow:hidden;
    }
    ul{
      margin-left:-1px;
    }

    功能图就像一开端图示所示:

    新葡亰496net 3

    Demo戳我

    See the Pen borderDisappear by Chokcoco (@Chokcoco) on CodePen.

    这种做法得以适应不同 li 个数不一样行数的有着情状,因为各个新加上的 li ,都会调换二个侧边框与上三个 li 元素分开,只是在视觉上看起来像是上一个 li 成分的左臂框。

     

    不无难题汇总在自家的 Github ,发到博客希望收获越多的调换。

    到此本文甘休,假若还会有哪些疑点照旧提出,能够多多交换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    打赏援助自个儿写出越多好小说,多谢!

    打赏小编

    • 网页就是由一个个 HTML标签 组成
    • CSS样式负责修饰HTML标签

    解题不驰念宽容性,标题天马行空,想到什么说怎样,假设解题中有您倍以为生僻的 CSS 属性,赶紧去补习一下吧。

    解题不考虑宽容性,标题天马行空,想到什么说什么样,若是解题中有您以为到生僻的 CSS 属性,赶紧去补习一下吗。

    *{通配符选拔器 设置有着填充0边距0

    打赏支持笔者写出越多好作品,感激!

    任选一种支付办法

    新葡亰496net 4 新葡亰496net 5

    1 赞 5 收藏 1 评论

    二、了解HTML标签

    不断更新,不断更新,不断更新,主要的作业说一回。

    不断更新,不断更新,不断更新,主要的事情说三遍。

    padding:0px; 

    关于小编:chokcoco

    新葡亰496net 6

    经不住流年似水,逃可是此间少年。 个人主页 · 作者的文章 · 63 ·    

    新葡亰496net 7

    1.HTML标签的结构:
    发端标签<body>
    利落标签<body>

    探究一些珠璧交辉的CSS标题(一)-- 左边竖条的贯彻情势

    商讨一些幽默的CSS标题(一)-- 侧面竖条的兑现格局

    margin:0px;

    三.常用的HTML标签

    座谈一些相映生辉的CSS标题(二)-- 从条纹边框的兑现谈盒子模型

    商量一些风趣的CSS标题(二)-- 从条纹边框的兑现谈盒子模型

    }

    • 1.DIV:盒子标签
      1. h1-h6标签:标题标签
      1. p:段落标签
      1. img:图片标签
      1. input:输入框标签
      1. button:开关标签
    • 7.ul:冬季列表
      li:列表描述
      <ul>
      <li> <li>
      <li> <li>
      <ul>

    • 8.dl :定义标签
      dt dd:定义描述
      <dl>
      <dt> <dt>
      <dd> <dd>
      <dl>

    座谈一些风趣的CSS标题(三)-- 层叠顺序与仓库上下文知多少

    商议一些珠辉玉映的CSS标题(三)-- 层叠顺序与堆栈上下文知多少

    #div-box1{id采取器  id为div-box1的块成分 宽度500 中度400 边框1像素 实线 银桃红 边距上40 右0 下0 左40像素

    四、常用的CSS样式

    探究一些幽默的CSS题目(四)-- 从倒影聊到,谈谈 CSS 承袭inherit

    座谈一些交相辉映的CSS标题(四)-- 从倒影聊到,谈谈 CSS 承接inherit

    width:500px;

      1. background-color:背景颜色
    • 2.color:字体颜色

    • 3.width:宽度

    • 4.heigh:高度

    • 5.line-height:行高

    • 6.text-aline:文本对齐方向

    • 7.background-image:背景图片

      1. border-width :边框的小幅度
        border-style :边框的体制
        border-color :边框的颜色
      1. P:hover{color:颜色名}
        效率:当鼠标移到成分上时,可以改动成分的CSS样式

    商讨一些妙不可言的CSS标题(五)-- 单行居中,两行居左,超过两行省略

    座谈一些有趣的CSS标题(五)-- 单行居中,两行居左,当先两行省略

    height:400px;

    五、CSS常用选取器

    座谈一些有意思的CSS标题(六)-- 全宽容的多列均匀布局难点

    评论一些妙不可言的CSS标题(六)-- 全宽容的多列均匀布局难题

    border:1px solid silver;

    <p class=”one”id=”two>helloworld<p>

    有着难点汇总在本人的 Github 。

    不无标题汇总在自身的 Github 。

    margin:40px 0 0 40px;

    • 1.p{}成分选用器

    • 2.one{}class选择器

    • 3.#two{}id选择器

    • 4.p:hover{}伪类选拔器
      input:focus{}

     

     

    }

    六、盒子模型

    7、消失的边界线难点

    拜访下图,平时会在一些导航栏中看看,供给每行中最后一列的出手框消失,如何在装有浏览器中最方便文雅的得以实现?

    新葡亰496net 8

    借使是不必要宽容 IE8- ,那么使用 CSS3 新扩展的采纳器无疑是一种好法子。

    // 使用伪类选择器,选择第 3n 个元素去掉边框
    li:nth-child(3n){
      border-right:none;
    }
    

    自然,即使个数分明也非常的少,给急需去掉侧边框的因素直接助长一个特定的 class 也就成功。可能,使用 table 尽管麻烦一点,但是也能实现。

    可是这样都非常的矮贵。

    style="font-family: verdana, geneva; font-size: 14px;">这里有个小技术,正是经过丰盛反向边框并且扩张贰个负的 margin 来实现。

    第一,假定大家的 ul 结构如下:

    <div class="ul-container">
        <ul>
            <li>测试</li>
            <li>消失</li>
            <li>边界线</li>
            <li>右侧</li>
            <li>边界线</li>
            <li>消失</li>
            <li>测试</li>
        </ul>
    </div>
    

    如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,我们的 ul 和 ul-container 宽度都设为 300px 。

    最注重的是,各种 li 设置叁个左边手框并不是侧面框:

    .ul-container, 
    ul{
      width:300px;
    }
    
    li{
      float:left;
      width:99px;
      border-left:1px solid #999;
    }
    

    大家会获取如下那样的结果:

    新葡亰496net 9

    接下去,我们将容器 ul-container 设置为 overflow:hidden ,并且将 ul 左移一个像素 margin-left:-1px

    这样 ul 中首先列的具有边框都归因于左移了一像素同有的时候间被 overflow:hidden 而泯没了,产生了下一个 li 的左臂框望着像侧边框一样,其实只是个障眼法:

    .ul-container{
      overflow:hidden;
    }
    ul{
      margin-left:-1px;
    }
    

    效率图就好像一齐先图示所示:

    新葡亰496net 10

    Demo戳我

    这种做法能够适应不同 li 个数区别行数的具有情状,因为各样新扩张长的 li ,都会扭转二个左边手框与上叁个 li 成分分开,只是在视觉上看起来疑似上贰个 li 成分的入手框。

     

    享有题目汇总在自个儿的 Github ,发到博客希望收获越多的沟通。

    到此本文结束,借使还应该有啥样疑点依旧提出,能够多多调换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    7、消失的边界线难点

    拜候下图,平常会在有些导航栏中看到,供给每行中最后一列的左侧框消失,怎么着在具备浏览器中最简便高雅的兑现?

    新葡亰496net 11

    即使是不须求包容 IE8- ,那么使用 CSS3 新扩充的选拔器无疑是一种好点子。

    // 使用伪类选择器,选择第 3n 个元素去掉边框
    li:nth-child(3n){
      border-right:none;
    }
    

    本来,假若个数分明也十分少,给急需去掉右侧框的成分间接助长贰个特定的 class 也就完了。或许,使用 table 即便麻烦一点,不过也能落到实处。

    唯独那样都非常不够名贵。

    style="font-family: verdana, geneva; font-size: 14px;">这里有个小技术,正是经过加多反向边框而且扩展四个负的 margin 来实现。

    首先,假定大家的 ul 结构如下:

    <div class="ul-container">
        <ul>
            <li>测试</li>
            <li>消失</li>
            <li>边界线</li>
            <li>右侧</li>
            <li>边界线</li>
            <li>消失</li>
            <li>测试</li>
        </ul>
    </div>
    

    如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,大家的 ul 和 ul-container 宽度都设为 300px 。

    最重点的是,每种 li 设置一个左方框并不是右侧框:

    .ul-container, 
    ul{
      width:300px;
    }
    
    li{
      float:left;
      width:99px;
      border-left:1px solid #999;
    }
    

    大家会获得如下那样的结果:

    新葡亰496net 12

    接下去,我们将容器 ul-container 设置为 overflow:hidden ,并且将 ul 左移二个像素 margin-left:-1px

    这样 ul 中率先列的享有边框都因为左移了一像素同不平日候被 overflow:hidden 而消退了,变成了下二个 li 的入手框看着像左侧框一样,其实只是个障眼法:

    .ul-container{
      overflow:hidden;
    }
    ul{
      margin-left:-1px;
    }
    

    作用图如同一同头图示所示:

    新葡亰496net 13

    Demo戳我

    这种做法得以适应不同 li 个数差别行数的持有情况,因为每一种新加上的 li ,都会转移二个侧面框与上三个 li 成分分开,只是在视觉上看起来疑似上三个 li 成分的侧边框。

     

    装有毛病汇总在自身的 Github ,发到博客希望收获越多的交换。

    到此本文截至,假如还会有啥难题照旧建议,能够多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    .faceul{类选取器 list-style-type 设置化解列表标志

    新葡亰496net 14

    list-style-type:none;

    image.png

    background:#F00;背景色

    1.成分居中:
    margin-left:auto
    margin-right:auto
    仅针对块成分有效

    }

    2.盒子总增加率:width(宽度) padding(填充) border(边框)

    .faceul img{后代成分选用器 设置ul中的图片的肥瘦和边距

    七.margin(边界)和padding(填充)盒子距离

    width:40px;

    margin:18px
    //margin:上 右 下 左

    margin:5px 0px 0px 10px;

    margin:10px 20px
    //margin:上 下 左 右

    }

    margin:10px 20px 30px 40px
    margin:上 右 下 左
    padding同理

    .faceul li{设置浮动

    /*为了让li放到一排,使用了左浮动*/

    float:left;

    border:1px solid red;

    width:60px;

    height:70px;

    margin-left:25px;

    margin-top:25px;

    }

    .faceul span{

    新葡亰496net,font-size:small;

    margin-left:15px;

    margin-top:5px;

    display:block;

    }

    .faceul a:link{ 伪类选择器

    color:black;  链接颜色

    text-decoration:none; 不添Gavin本的修饰

    }

    .faceul a:hover{ 

    color:red;

    text-decoration:underline;

    }

    body部分

    <div id = "div-box1">

    <ul class = "faceul">

    <li><img src=""/><span><a href = "#">明星</a></span>

    新葡亰496net:li精粹案例,盒子模型。</li>

    </ul>

    </div>

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:li精粹案例,盒子模型

    关键词:

上一篇:多行居左显示,单行居中

下一篇:没有了