zoukankan      html  css  js  c++  java
  • 护工列表页

    护工列表页

    CSS Sprite雪碧图

    什么是雪碧图

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分

    使用场景
    • 静态图片,不随用户信息的变化而变化。
    • 小图片,容量比较小(2~3k)。
    • 图片加载量比较大。
    使用目的

    减少Http请求数量,加速内容显示。因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的。

    优点
    • 加快网页加载速度网页上面每一张图片,都要向浏览器请求下载图片,而浏览器接受的同时请求数是10个,一次能处理的请求数目是两个。

    • 后期维护简单
      该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,更换图片的时候也只要更改一下图片的位置就可以了。直接生成代码,简单易用。

    • CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

    • 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

    • 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

    缺点
    • 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
    • 至于可维护性,这是一把双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
    • 由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

    CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。

    初识Bootstrap

    “Bootstrap是一组用于网站和网络应用程序开发的开源前端框架,包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。

    特点
    • 移动端设备优先
    • 响应式设计
    Bootstrap 栅格系统的工作原理:
    • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
    • 通过“行(row)”在水平方向创建一组“列(column)”。
    • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
    • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
    布局容器
    • .container 类用于固定宽度并支持响应式布局的容器。
    • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

    固定布局根据浏览器不同分辨率,固定尺寸不同,不同阈值对应的宽度如下:

    >=1200   width为1170px      列的class是: col-lg-*
    
    >=992    width为970px       列的class是: col-md-*
    
    >=768    width为750px       列的class是: col-sm-*
    
    <768     为自适应宽度auto   列的class是: col-xs-*
    

    此外列偏移col-[*]-offset-*
    含义:表示在对应的屏幕分辨率下偏移多少个栅格

    清除浮动在需要清除浮动的元素前面添加一个空的div,给div添加类名clearfix

    Bootstrap也提供了许多的字体图标

    使用字体图片的优点:①减少网页请求②样式容易控制,可以通过css直接设置样式

    用法:
    创建一个空标签,给该空标签添加一个基类和对应图标的类

    Bootstrap也提供了很多的组件只需要添加对应的类名来使用

    深度思考

    去除inline-block元素间间距的N种方法

    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距

    有时候这种间距会对布局产生影响,需要去掉这种间距常见去除inline-block间距的方法有哪些?

    方法一:改变书写方式来移除空格

    元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就消失了。

    <div class="space">
        <a href="##">
        惆怅</a><a href="##">
        淡定</a><a href="##">
        热血</a>
    </div>
    

    或者是:

    <div class="space">
        <a href="##">惆怅</a
        ><a href="##">淡定</a
        ><a href="##">热血</a>
    </div>
    

    或者是借助HTML注释:

    <div class="space">
        <a href="##">惆怅</a><!--
        --><a href="##">淡定</a><!--
        --><a href="##">热血</a>
    </div>
    

    方法二 使用margin负值

    margin负值的大小与上下文的字体和文字大小相关吗,由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

    方法三 去掉闭合标签

    <div class="space">
        <a href="##">惆怅
        <a href="##">淡定
        <a href="##">热血
    </div>
    如果需要考虑兼容IE6/IE7则把最后一个标签的闭合标签</a>加上
    

    方法四 使用font-size:0

    .space {
        font-size: 0;
    }
    .space a {
        font-size: 12px;
    }
    

    这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。

    方法五 使用word-spacing或letter-spacing

    一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。 父元素letter-spacing负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,即使父元素letter-spacing负值很大,也不会发生重叠。但是子元素要设置letter-spacing为0,不然会继承父元素的值;使用word-spacing时,只需设置父元素word-spacing为合适值即可。

    css有哪些属性可以继承?

    对于一些可以继承的属性,可以只设置上级的CSS样式表树形,子级(下级)不用设置,会自动继承此CSS属性,可以减少CSS代码,便于维护。

    • 字体系列属性
      • font:组合字体
      • font-family:规定元素的字体系列
      • font-weight:设置字体的粗细
      • font-size:设置字体的尺寸
      • font-style:定义字体的风格
      • font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
    • 文本系列属性
      • text-indent:文本缩进
      • text-align:文本水平对齐
      • text-shadow:设置文本阴影
      • line-height:行高
      • word-spacing:增加或减少单词间的空白(即字间隔)
      • letter-spacing:增加或减少字符间的空白(字符间距)
      • text-transform:控制文本大小写
      • direction:规定文本的书写方向
      • color:文本颜色
    • 元素可见性:visibility
    • 表格布局属性
      • caption-side:设置表格标题的位置。
      • border-collapse:设置是否将表格边框折叠为单一边框。
      • border-spacing:设置分隔单元格边框的距离。
      • table-layout:设置显示单元、行和列的算法。
      • empty-cells:设置是否显示表格中的空单元格。
    • 列表属性
      • list-style:列表风格,包括list-style-type、list-style-image等
      • list-style:简写列表样式,用于把所有用于列表的属性设置于一个声明中。
      • list-style-type:修改用于列表项的标志类型。
      • list-style-image:对各标志使用一个图像。
      • list-style-position:可以确定标志出现在列表项内容之外还是内容内部。
    • 设置嵌套引用的引号类型
    • 光标属性
      • cursor:光标显示为何种形态
    • 生成内容属性
      • quotes:设置嵌套引用的引号类型。
    • 页面样式属性
      • page:规定元素应该被显示的页面特定类型。
      • page-break-inside:设置在表格元素内部避免进行分页的分页行为。
      • windows:设置当元素内部发生分页时必须在页面顶部保留的最少行数。
      • orphans:设置当元素内部发生分页时必须在页面底部保留的最少行数。
    • 声音样式属性
    opacity是能继承的属性吗?

    当opacity作用于某个元素时,是把这个元素(包括它的内容)作为一个整体看待,即使这个值没有被子元素继承。因此 ,这个元素和它的所有子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素拥有不同的opacity属性值。

  • 相关阅读:
    跑酷游戏的一些bug总结(滥用FixedUpdate的坑)
    Unity在编辑器状态下清空控制台信息
    Unity脚本在层级面板中的执行顺序测试3
    IronPython使用
    RSA加密的测试demo
    常用加密算法学习
    c#读写ini文件
    Jrebel激活方法(转)
    ThreadLocal Memory Leak in Java web application
    Java Thread Local – How to use and code sample(转)
  • 原文地址:https://www.cnblogs.com/housheng/p/11953794.html
Copyright © 2011-2022 走看看