精灵图

盒子总结

'''
block:
默认宽高
1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)
2.没有设置高, 高由内容撑开

设置了宽高
一定采用设置的宽高

显示宽高
border+padding+content

自身布局(通过调节以下两个参数进行布局)
margin-top | margin-left

兄弟布局(通过调节以下两个参数进行布局)
margin-bottom | margin-right

父级水平居中
margin: 0 auto; | margin-left:auto;&margin-right:auto;

与inline相关的盒子
vertical-align
'''

字体设置

'''
text-align: center; # 字体水平居中方式
color: red; # 字体颜色
font: 900 30px/120px "STSong"; # 字重 大小/行高 字族

# 了解
# em(自身->父->html) | rem(html)
text-indent: 2em;    字体缩进

# 字划线
# underline | line-through | overline   下划线|中划线|上划线
eg： text-decoration: overline;
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字体案例</title>
    <style>
        /* 清除系统默认样式 => reset操作 */
        /*h2, p, h3 {*/
            /*margin: 0;*/
        /*}*/
        .box {
            width: 800px;
            border-bottom: 1px solid #999;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>领先的 Web 技术教程 - 全部免费</h2>
        <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
        <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
        <h3>从左侧的菜单选择你需要的教程！</h3>
    </div>
</body>
</html>

View Code

reset操作

# what|why: 大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作

'''
body, h1, h6, p {
    margin: 0;
}
ul {
    margin: 0px;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}
'''

高级选择器

'''
1.群组
div, p, a {

}

2.后代  >代表父子关系 | 空格代表后代关系 
body div {

}
# div可以是body的子级标签，也可以是body子级标签的子级标签
3.兄弟  通过关系层次控制一个目标选择器
.div1 ~ .div2 {

}
被控制的标签为最后一个，其余标签不受选择器的影响
4.位置
li:nth-child(2n)：控制所有的列表ul选项 有效位置为1,3,5....
ul:nth-child(10) > li:nth-child(2n)：控制单个列表（第一个列表）的有效位置（1,3,5....）改变，如果将2n变为具体数字则变成控制具体位置改变。

5.多类   即一个标签含有两个或两个以上的类名
.d.dd {

}
'''

高级选择器优先级

"""
优先级和个数(权重)相关
基础选择器优先级占主导: id 无限大于 class 无限大于 标签
选择器优先级相同时, 和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
"""

边界圆角

/*左上为第一个角, 顺时针赋值, 不足找对角*/
/*border-radius: 30px 60px;*/

/*border-radius: 150px;*/
/*border-radius: 50%;*/

/*横向第一个角50px, 第二个角10px, 不足找对角*/
/*纵向均是150px*/
border-radius: 50px 10px / 150px;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边界圆角</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div {
            /*左上为第一个角, 顺时针赋值, 不足找对角*/
            /*border-radius: 30px 60px;*/

            /*border-radius: 150px;*/
            /*border-radius: 50%;*/

            /*横向第一个角50px, 第二个角10px, 不足找对角*/
            /*纵向均是150px*/
            border-radius: 50px 10px / 150px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

a的四大伪类

'''
:link  链接初始状态 
:hover  鼠标悬浮状态 *****
:visited  链接访问后的状态 
:active  鼠标按下时的状态 ***
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a的四大伪类</title>
    <style>
        /*链接初始状态 | 鼠标悬浮状态 | 链接访问后的状态 | 鼠标按下时的状态*/
        /*a:link {*/
            /*color: black;*/
        /*}*/

        /*a:hover {*/
            /*cursor: pointer;*/
        /*}*/

        /*a:visited {*/
            /*color: yellow;*/
        /*}*/

        /*a:active {*/
            /*color: green;*/
        /*}*/
        /*鼠标悬浮状态 | 鼠标按下时的状态*/
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div:hover {
            background-color: yellowgreen;
            cursor: pointer;
        }

        div:active {
            background-color: red;
        }

    </style>

    <style>
        body {
            margin: 0;
            user-select: none;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            color: black;
            text-decoration: none;
        }
        h3 {
            margin: 0;
        }

        .ul1 {
            /*border: 1px solid black;*/
            padding: 20px 0 15px 10px;
            width: 180px;
        }
        .ul1 h3 {
            font-size: 16px;
        }
        .ul1 li {
            text-indent: 10px;
            font-size: 14px;
        }
        .ul1 li:hover {
            background-color: #666;
        }
        .ul1 li:hover > a {
            color: white;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">标签a</a>
<div></div>

View Code

背景图片之精灵图

'''
div {
    background: url("img/bg.png") no-repeat 10px 20px;
    图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
    backgroud-position-y: -20px;
}
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片</title>
    <style>

        .div {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        .div {
            background-image: url("img/001.png");
            /*平铺: repeat-x | repeat-y | repeat | no-repeat*/
            background-repeat: no-repeat;
            /*背景图片位置*/
            /*水平: left|center|right  垂直:top|center|bottom*/
            background-position: -200px 50px;
        }
        .div:hover {
            transition: 2s;
            background-position-x: center;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

背景图片案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>精灵图</title>
    <style>
        a {
            color: #333;
            text-decoration: none;
        }
        h1 {
            width: 500px;
            height: 100px;
            border: 1px solid black;
        }
        h1 a {
            width: 500px;
            height: 100px;
            display: block;
            background-color: yellow;

            background: url("img/bg.png") no-repeat 0 -150px;
        }
        h1 a:hover {
            background-position-y: -250px;
        }
    </style>
    <style>
        .li {
            width: 157px;
            height: 48px;
            border: 1px solid black;
            background: url("img/bg.png") no-repeat -155px 0;
        }
        .li:hover {
            cursor: pointer;
            background-position-y: -48px;
        }
    </style>
</head>
<body>
<h1><a href=""></a></h1>

<div class="li"></div>

</body>
</html>

精灵图片案例

posted @ 2019-01-17 19:46 zhao_peng 阅读(342) 评论(0) 收藏举报

刷新页面返回顶部

zhao_peng

精灵图

盒子总结

字体设置

reset操作

高级选择器

高级选择器优先级

边界圆角

a的四大伪类

背景图片之精灵图

公告