HTML-4

1.CSS高级技巧

  • 精灵图

　　　　为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称作CSS Sprites、CSS 雪碧）

  • 精灵图（Sprites）的使用
    • 精灵图技术主要针对的是背景图片使用，就是把多个小背景图整合到一张大图片中
    • 移动背景图片的位置，此时可以使用background-position
    • 使用精灵图时需要精确测量，每个背景图片的大小和位置
  • 王者荣耀精灵图使用案例
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             div {
 8                 height: 60px;
 9                 width: 60px;
10                 background-image: url(img/sprites.png);
11                 background-repeat: no-repeat;
12                 background-position: -182px 0;
13             }
14         </style>
15     </head>
16     <body>
17         <div>
18         </div>
19     </body>
20 </html>
  • 拼出名字
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             div {
 8                 width: 110px;
 9                 height: 120px;
10                 background-image: url(img/abcd.jpg);
11                 float: left;
12                 background-repeat: no-repeat;
13             }
14             
15             .b {
16                 background-position: -120px 0px;
17             }
18             
19             .e {
20                 background-position: -480px 0px ;
21             }
22             
23             .k {
24                 background-position: -495px -135px;
25             }
26             
27             .h {
28                 background-position: -215px -135px;
29             }
30             
31             .y {
32                 background-position: -365px -550px;
33             }
34             
35             .u {
36                 background-position: -475px -415px;
37             }
38             
39             .n {
40                 background-position: -255px -270px;
41             }
42         </style>
43     </head>
44     <body>
45         <div class = "b"></div>
46         <div class = "a"></div>
47         <div class = "e"></div>
48         <div class = "k"></div>
49         <div class = "h"></div>
50         <div class = "y"></div>
51         <div class = "u"></div>
52         <div class = "n"></div>
53     </body>
54 </html>
  • 字体图标iconfont

　　　　字体图标是为前端工程师提供的一种方便高校的图标使用方式，展示的是图标，本质上属于字体

    • 轻量级：一个字体图标要比一系列的图像小，减少了服务器请求
    • 灵活性：本质上是文字，可以随意的更改颜色，产生阴影等效果
    • 兼容性：几乎支持所有的浏览器
  • 字体图标的使用
    • 将下载包里面的fonts文件夹放入页面的根目录下
    • 通过css将字体文件引入到页面中（style.css）
    • 打开demo.html复制后面的方框，粘贴到标签里面
    • 给标签声明字体，font-family与之前一直
    • 添加新的字体图标，把压缩包里面的selection.json上传，选中想要的新图标后，重新下载压缩包
  • CSS三角制作
1 div {
2     width: 0;
3     height: 0;
4　　　/*下面两句针对的是浏览器的兼容性问题*/
5     line-height: 0;
6     font-size: 0;
7     border: 50px solid transparent;
9     border-left-color: pink;
10 }
  •  京东类似
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS三角制作</title>
        <style type="text/css">
            .box {
                display: none;
                position: relative;
                width: 150px;
                height: 200px;
                margin-top: 15px;
                background-color: pink;
            }
        
            .tangle {
                position: absolute;
                height: 0;
                width: 0;
                top: -20px;
                left: 5px;
                border: 10px solid transparent;
                border-bottom-color: pink;
            }
            
            .data:hover+.box {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="data">编辑</div>
        <div class="box">
            <div class="tangle"></div>
        </div>
    </body>
</html>
  • 界面样式

　　　　界面样式，就是更改一些用户的操作，以便提高用户的体验

    • 更改用户的鼠标样式
属性值 描述
default 小白箭头，默认
pointer 小手
move 移动
text 文本
not-allowed 禁止 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li style = "cursor: default">我是默认的小白鼠标样式</li>
            <li style = "cursor: pointer">我是鼠标小手样式</li>
            <li style = "cursor: move">我是鼠标移动样式</li>
            <li style = "cursor: text">我是鼠标文本样式</li>
            <li style = "cursor: not-allowed">我是鼠标禁止样式</li>
        </ul>
    </body>
</html>
    • 表单轮廓线outline/防止拖拽文本域
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 1.取消表单轮廓 -->
        <!-- 给表达添加outline:0 或者 outline:none -->
        <input style="outline: 0;" type="text"  />
        <!-- 2.防止拖拽文本域 -->
        <textarea style="resize: none;"></textarea>
    </body>
</html>
  • vertical-align属性应用

　　　　CSS的vertical-align属性经常用于设置图片或者表单（行内块元素）和文字垂直对齐（只对行内元素或者行内块元素有效）

值 描述
baseline 默认，元素放在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素顶端与行中最低元素的顶端对齐 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img {
                width: 200px;
                vertical-align: top;
            }
        </style>
    </head>
    <body>
        <img src="img/2.jpg" />可可爱爱(*╹▽╹*)
    </body>
</html>
    • 解决图片底部默认空白间隙问题
      • 给图片添加vertical-align:middle|top|bottom（提倡使用）
      • 将图片转换为块级元素display:block
  • 溢出文字使用…表示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /*      #one {
                width: 150px;
                height: 100px;
                background-color: pink;
                white-space: nowrap;
                white-space: normal;意思是如果文字显示不开自动换行 
                overflow: hidden;
                text-overflow: ellipsis;
            } */
            #one {
                width: 150px;
                height: 100px;
                background-color: pink;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        </style>
    </head>
    <body>
        <!-- 1.单行文本溢出 -->
        <!--  先强制一行内显示文本 white-space:nowrap -->
        <!--  超出的部分隐藏 overflow:hidden -->
        <!--  文字用省略号替代超出的部分 text-overflow:eclipsis -->
        <div id="one">
            我是一行我是一行我是一行我是一行我是一行我是一行
        </div>
        <!-- 2.多行文本溢出，需要调整边框的高度，推荐让后端人员来做 -->
        <!--  多行文本溢出显示省略号有较大的兼容性问题，适合于webKi浏览器或移动端 -->
        <!--  overflow:hidden text-overflow:eclipsis -->
        <!--  弹性伸缩盒子模型显示  displa -webkit-box-->
        <!--  限制在一个块元素显示的文本行数 -webkit-line-clamp:2 -->
        <!--  设置或检查伸缩盒对象的子元素的排列方式 -webkit-box-orient: vertical -->
        
    </body>
</html>
  • 常见的布局技巧
    • 边框重叠
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul li {
                float: left;
                width: 150px;
                height: 200px;
                border:  1px solid red;
                margin-left: -1px;
                list-style: none;
            }
            /* 鼠标经过事件添加边框，当鼠标经过盒子提高当前盒子的层级即可
               如果没有定位，则添加相对定位，如果有定位，则添加z-index*/
            ul li:hover {
                /* 1.如果盒子没有定位，则鼠标经过添加相对定位即可position: relative; */
                border: 1px solid blue;
                /* 如果盒子有定位，提高盒子层级（z-index 只有有定位才能起作用） */
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <!-- 1.margin负值的运用 -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>
    • 文字围绕浮动元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .pic {
                float: left;
                width: 200px;
                height: 134px;
            }
            
            .pic img {
                width: 100%;
            }
            
            .box {
                width: 400px;
                height: 134px;
                padding: 10px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="pic"><img src="img/2.jpg" /></div>
            【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
        </div>
    </body>
</html>
    • 行内块巧妙应用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                text-align: center;
            }
        
            .box a {
                display: inline-block;
                width: 36px;
                height: 36px;
                background-color: #f7f7f7;
                border:  1px solid #CCC;
                text-decoration: none;
                line-height: 36px;
                color: #333;
                font-size: 14px;
            }
            
            .box .prev,
            .box .next {
                width: 85px;
            }
            
            .box .current,
            .box .elp {
                border: none;
                background-color: #fff;
            }
            
            .page {
                width: 36px;
                height: 36px;
                background-color: #fff;
                border:  1px solid #CCC;
                outline: none;
                text-align: center;
            }
            
            .btn {
                width: 44px;
                height: 40px;
                background-color: #f7f7f7;
                border:  1px solid #CCC;
                outline: none;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <a href="#" class="prev">&lt;&lt;上一页</a>
            <a href="#" class="current">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#" class="elp">...</a>
            <a href="#" class="next">下一页&gt;&gt;</a>
            到第<input type="text" class="page"/>页
            <input type="button" value="确定" class="btn"/>
        </div>
    </body>
</html>
    • 三角强化
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                height: 0px;
                width: 0px;
                /* 把上边框宽度调大 */
                border-top: 40px solid transparent;
                /* 将左边和下边的边框宽度设置为0 */
                border-left: 0px solid orange;
                border-bottom: 0px solid yellow;
                border-right: 20px solid green;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>
      • 秒杀价案例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .price {
                height: 30px;
                width: 160px;
                line-height: 30px;
                border: 1px solid red;
                text-align: center;
            }
            
            .lower {
                position: relative;
                float: left;
                display: block;
                height: 30px;
                width: 90px;
                background-color: red;
                color: #fff;
                font-weight: 800;
            }
            
            .tan {
                position: absolute;
                right: 0;
                top: 0;
                height: 0;
                width: 0;
                border-color: transparent #fff transparent transparent;
                border-width: 30px 10px 0px 0px;
                border-style: solid;
            }
            
            .old {
                font-size: 14px;
                text-align: center;
                text-decoration: line-through;
                color: #777;
            }
        </style>
    </head>
    <body>
        <div class="price">
            <span class="lower">￥5600
                <i class="tan"></i>
            </span>
            <span class="old">￥7800</span>
        </div>
    </body>
</html>
  • CSS初始化（CSS reset）

　　　　不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，我们需要对CSS初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
}

/* em和i的斜体文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li的小圆点 */
li {
    list-style: none;
}

img {
    /* 照顾低版本浏览器 如果 图片外面包含了连接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}

/* 当我们鼠标经过button按钮时，鼠标变成小手 */
button {
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none;
}

body {
    /* 抗锯齿性 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: "";
    height: 0;
}

.clearfix {
    *zoom: 1;
}
/* Unicode编码字体
    -把中文字体的名称使用相应的Unicode编码来代替，这样可以有效地避免浏览器解释CSS代码的时候出现乱码
*/
posted @ 2022-05-03 10:22  Miraitowa56  阅读(29)  评论(0)    收藏  举报