HTML初学（四）

最新推荐文章于 2022-02-21 16:48:03 发布
L511602
最新推荐文章于 2022-02-21 16:48:03 发布
阅读量89
点赞数
原文链接：http://www.cnblogs.com/jason-yijun/p/5589354.html
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        p{font-style: italic}/*包括斜体等样式*/

        .a01{border: 5px solid #000000}
        /*顺序为粗细、线条形式、颜色*/

        .a01 p{
            text-indent: 50px;
            letter-spacing: 100px;
        }
        /*文本的首行缩进；单字或者字母之间的间距*/

        .a01 span{
            word-spacing: 20px;
            text-transform: capitalize
        }
        /*字母语言的单词间距，拼写方式：全部小写，全部大写，首字母大写*/

        .a02{
            border: 5px solid #0001ff;
            text-align: right;
            text-decoration: line-through;
            line-height: 40px
        }
        /*边框属性；文本对齐方式；文本划线种类；行间距*/

        .a03{
            width: 800px;
            height: 500px;
            background-image: url("../img/card1.gif");
            border: 5px solid #ff0b00;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 555px 333px ;/*top center button*/
            background-size: 50px auto;
        }
        /*宽，高；背景图片引用（必须事先定义div的宽高）；边框属性；背景循环方式；背景附着；背景图片定位坐标；背景图片大小*/

        .a04{
            margin: auto;
            width: 300px;height: 300px;
            border-bottom: 5px solid #000000;
            border-top: 5px double #ff0b00;
            border-left: 5px dashed #23ff09;
            border-right: 5px dotted #0300ff;
            border-radius: 180px;
        }
        /*边框与外围的距离；宽高；下边框属性；上、左、右*/

        ul li{
            list-style: none;
        }
        /*列表样式*/

        .a05{
            width: 154px;height: 30px;
            background-image: url("../img/logo_db.png");
            background-repeat: no-repeat;
            overflow: hidden;
        }
        .a05 a{
            line-height: 200px;
            display: block;
            height: 300px;
        }

        .a06{
            width: 154px;height: 30px;
            background-image: url("../img/logo_db.png");
            background-repeat: no-repeat;
        }
        .a06 a{
            text-indent: -100px;
            display: block;
        }

        .a07{
            position: relative;
        }
        .a07 span{
            position: absolute;
            width: 100%;height: 100%;
            background-image: url("../img/logo_db.png");
            background-repeat: no-repeat;
        }
        .a08{
            text-decoration: none;
        }

        .spr1{
            width: 180px;height: 180px;
            background: url("../img/30d5bc953b7afba77514.jpg");
            background-repeat: no-repeat;
            border-radius: 90px;
            outline: 5px solid #00ff9f;
            box-shadow: 15px 15px 5px 0px #10ff82;
        }
        .spr1:hover{
            background-position: -280px 0;
        }
        .spr1:active{
            background-position: 0 -270px;
        }

        .box1{
            width: 200px;height: 200px;
            /*background:linear-gradient(yellow,blue);*/
            /*background: linear-gradient(to top,yellow,blue);*/
            /*background: linear-gradient(45deg,yellow,orange);*/
            /*background: linear-gradient(yellow 20%,orange 0);*/
            background: linear-gradient(yellow,orange,#000000);
            /*径向渐变*/
            /*background: radial-gradient(yellow,orange);*/
        }

        .box2{
            width: 150px;height: 150px;
            border: 50px solid #0c04ff;
            border-radius: 70px;
            text-shadow: 10px 10px 5px #ff110e;
            font-size: 40px;
        }

        .box3{
            width: 200px;height: 100px;
            border: 1px solid #000000;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }

        .box4{
            width: 100px;height: 100px;
            border: 1px solid #000000;
            border-radius: 50px;
            border-bottom: double #f4ff00 ;
            /*transform: rotate(45deg);*/
            /*transform: translate(-50px,0)*/
            /*transform: scale(2);*/
            /*transform: skew(30deg,30deg);*/
            transform: translate(40px,100px);
        }
        .box5{
            width: 100px;height: 100px;background: #55ff30;
            border: 1px solid #ff2520;
            animation: donghua 2s linear infinite;
        }
        @keyframes donghua {
            /*from{*/
                /*width: 100px;height: 100px;background: #55ff30;*/
            /*}*/
            /*to{*/
                /*width: 50px;height: 50px;background: #221fff;*/
            /*}*/
            0%{
                width: 100px;height: 100px;background: #55ff30;
            }
            50%{
                width: 50px;height: 50px;background: #221fff;
            }
            100%{
                width: 100px;height: 100px;background: #55ff30;
            }
        }
    </style>
</head>
<body>
<p>我是一段文字</p><br/><br/>

<div class="a01">
    <p>我也是一段文字</p>
    <span>we're English words</span>
</div>

<div class="a02">
    <b>我是另一段文字</b>
</div>

<div class="a03"></div>
<br/><br/>
<div class="a04"></div>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<hr/>

<h1 class="a05">
    <a href="http://www.bilibili.com">百度</a>
</h1>

<h1 class="a06">
    <a href="http://www.douban.com">豆瓣</a>
</h1>

<a href="http://www.baidu.com" class="a08">
    <h1 class="a07">
        <span></span>百度
    </h1>
</a>

<div class="spr1"></div>

<div class="box1"></div>
<div class="box2">嘿嘿嘿</div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>


</body>
</html>