前端第八天

  1. 动态图片按钮
    做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次 不佳的用户体验
    产生问题的原因：
    背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
    但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
    我们这个练习，一上来浏览器只会加载link.png
    由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
    当hover被触发时，浏览器才去加载hover.png
    当active被触发时，浏览器才去加载active.png
    由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
    为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
    然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
    优点：
    1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
    2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
  2. 亚马逊_雪碧图
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>亚马逊雪碧图</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    .btn{
    display: block;
    width: 125px;
    height: 40px;
    background-image: url(img/1.png);
    background-repeat: repeat;
    background-attachment: fixed;
    }
    .btn1{
    display: block;
    width: 42px;
    height: 28px;
    background-position: -10px -340px;
    background-image: url(img/1.png);
    }
    .btn1:hover{
    background-position: -10px -340px;
    }
    .btn1:active{
    background-position: -57px -340px;
    }
    </style>
    </head>
    <body>
    <a href="#" class="btn"></a>
    <a href="#" class="btn1"></a>
    </body>
    </html>
  3. 简写背景属性
    设置一个背景颜色
    background-color: #bfa;
    设置一个背景图片
    background-image: url(img/3.png);
    设置背景不重复
    background-repeat: no-repeat;
    设置背景图片的位置
    ackground-position: center center;
    设置背景图片不随滚动条滚动
    background-attachment: fixed;
    background
    • 通过该属性可以同时设置所有背景相关的样式
    • 没有顺序的要求，谁在前睡在后都行
    • 也没有数量的要求，不写的样式就使用默认值
  4. 表格
    在HTML中，使用table标签来创建一个表格
    在table标签中使用tr来表示表格中的一行，有几行就有几对tr
    在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
    rowspan用来设置纵向的合并单元格
    <td rowspan="2">B4</td>
    colspan横向的合并单元格
    <td colspan="2">D3</td>
    table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
    border-spacing: 10px;
    border-collapse可以用来设置表格的边框合并
    如果设置了边框合并，则border-spacing自动失效
    border-collapse: collapse;
    设置隔行变色
    tbody > tr:nth-child(even){
    background-color: #bfa;
    }
  5. 表格样式
    <！DOCTYPE html >
    < html xmlns = “ http://www.w3.org/1999/xhtml” >
    < meta charset = “ utf-8” />
    < title > 指定对象内表设置样式</ title >
    < 样式>
    .divcss5 {width：400px}
    .divcss5表{背景：#CCC; 颜色：＃F00}
    .divcss5表td {背景：#FFF}
    </ style >
    </ head >
    < 身体>
    < div class = “ divcss5” >
    < 表格宽度= “ 100％” 边框= “ 0”单元间距= “ 1”单元格填充= “ 0” >
    < tr >
    < td > 内容一</ td >
    < td > 内容一</ td >
    < td > 内容一</ td >
    </ tr >
    < tr >
    < td > 内容二</ td >
    < td > 内容</ td >
    < td > 内容</ td >
    </ tr >
    </ 表格>
    </ div >
    </ body >
    </ html >
  6. 长表格
    有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
    在HTML中为我们提供了三个标签：
    thead 表头
    tbody 表格主体
    tfoot 表格底部
    这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
    thead中的内容，永远会显示在表格的头部
    tfoot中的内容，永远都会显示表格的底部
    tbody中的内容，永远都会显示表格的中间
    如果表格中没有写tbody，浏览器会自动在表格中添加tbody
    并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
    通过table > tr 无法选中行 需要通过tbody > tr
  7. 表格布局
    以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
    表格的列数由td最多的那行决定
    表格是可以嵌套，可以在td中在放置一个表格
  8. 完善
    经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
    .clearfix:before,
    .clearfix:after{
    content: "";
    display: table;
    clear: both;
    }
    .clearfix{
    zoom: 1;
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容