2019-08-01 css07 ~完

代码

    <link rel="stylesheet" href="css/style.css">
    <title>微信导航栏</title>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">
            <span>首页</span>
        </a></li>
        <li><a href="#">
            <span>帮助与反馈</span>
        </a></li>
        <li><a href="#">
            <span>公众平台</span>
        </a></li>
        <li><a href="#">
            <span>开放平台</span>
        </a></li>
        <li><a href="#">
            <span>微信支付</span>
        </a></li>
        <li><a href="#">
            <span>微信广告</span>
        </a></li>
        <li><a href="#">
            <span>表情开放平台</span>
        </a></li>
        <li><a href="#">
            <span>微信网页版</span>
        </a></li>
    </ul>
</div>

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

body {
    background: url(../images/3S9sFMD.jpg) repeat-x;
}

.nav {
    height: 75px;
}
.nav li {
    float: left;
    margin: 0 10px;
    padding-top: 21px;
}
.nav li a {
    display: block;
    height: 33px;
    background:url("../images/lTcb_ve.png") no-repeat;
    color: #ffffff;
    font-size: 14px;
    line-height: 33px;
    padding-left: 15px;
    text-decoration: none;
}
/*.nav li a:hover {*/
/*    background-image:url("");*/
/*}*/
.nav li a span {
    display: block;
    line-height: 33px;
    background: url("../images/lTcb_ve.png") no-repeat right center;
    padding-right: 15px;
}

结果

image.png

代码

    <link rel="stylesheet" href="css/style.css">
    <title>伪元素选择器</title>
</head>
<body>
<div>是</div>

div::before {
    content: "楚乔";
    background-color: pink;
    border:1px solid red;
    width: 100px;
    height: 100px;
    display: block;
    /*类选择，伪类选择器都是选区对象*/
    /*伪元素选择器本质是插入一个元素（标签 盒子） 只不过是行内元素span a*/
}
div::after {
    content: "宇文玥的";
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid skyblue;
}

结果

image.png

代码

    <link rel="stylesheet" href="css/style.css">
    <title>鼠标经过显示边框</title>
</head>
<body>
<div><img src="images/timg.jpg" width="296" height="180" alt=""></div>
<div><img src="images/timg.jpg" width="296" height="180" alt=""></div>
<div><img src="images/timg.jpg" width="296" height="180" alt=""></div>

div {
    width: 296px;
    height: 180px;
    margin: 20px auto;
    position: relative;/*子绝父相*/
}
div:hover::before {/*鼠标经过之后，前面加个为伪元素*/
    content: "";
    width: 100%;
    height: 100%;
    border: 10px solid rgba(255, 255, 255, .4);
    display: block;/*伪元素属于行内元素*/
    position: absolute;/*要伪元素不占位，就用绝对定位*/
    top: 0;
    left: 0;
    box-sizing:border-box;/*把padding和border都算入width里面*/
}

结果

image.png

代码

    <link rel="stylesheet" href="css/style.css">
    <title>过渡</title>
</head>
<body>
<div>小米</div>

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    color: green;
/*    transition:要过度的属性 花费时间 运动曲线 何时开始*/
/*    transition: width 3s ease-in 3s, height 0.3s ease-in 1s;*/
/*    transition 过度的意思，这句话写到div里面而不是hover里面*/
    /* transition: all 0.6s; 所有属性都变化用all 就可以了 后面两个属性可以省略*/
    transition:all 5s;
}
div:hover {
    background-color: green;
    color: pink;
}

结果

image.png

2019-08-01 css07 ~完

代码

结果

代码

结果

代码

结果

代码

结果

推荐阅读更多精彩内容