• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

1.半铸钢钢性铸铁(铸造半钢)高级技巧

精灵图

为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度,出现了半铸钢钢性铸铁(铸造半钢)精灵技术(也称作半铸钢钢性铸铁(Cast Semi-Steel)精灵、CSS雪碧)

精灵图(精灵)的使用

精灵图技术主要针对的是背景图片使用,就是把多个小背景图整合到一张大图片中

移动背景图片的位置,此时可以使用背景位置

使用精灵图时需要精确测量,每个背景图片的大小和位置

王者荣耀精灵图使用案例

1 !声明文档类型

2 html

3个头

四元字符集='utf-8 '

5标题/标题

6 style type='text/css '

七区

8高: 60px

9宽度: 60px

10背景图片: URL(img/sprites。png);

11后台-重复:不重复;

12后台-位置:-182 px 0;

13 }

14/款式

15/头

16车身

17区

18/格

19/车身

20 /html

拼出名字

1 !声明文档类型

2 html

3个头

四元字符集='utf-8 '

5标题/标题

6 style type='text/css '

七区

8宽度: 110 px

9高: 120像素

10背景图片:网址(img/ABCD。jpg);

左11 float:

12后台-重复:不重复;

13 }

14

15 .b {

16后台-位置:-120 px 0px;

17 }

18

19 .e {

20后台-位置:-480 px 0px;

21 }

22

23 .k {

24后台-位置:-495 px-135 px;

25 }

26

27 .h {

28后台-位置:-215 px-135 px;

29 }

30

31 .y {

32背景位置:-365 px-550 px;

33 }

34

35 .u {

36后台-位置:-475 px-415 px;

37 }

38

39 .n {

40背景-位置:-255 px-270 px;

41 }

42/款式

43/头

44车身

45 div class='b'/div

46 div class='a'/di

v> 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代码的时候出现乱码
*/
Link to comment
Share on other sites