CSS常用操作-CSDN博客

本文链接：https://blog.csdn.net/qq_34290202/article/details/78367803

index01.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div"></div>
    <p class="p1">CSS操作之设置行高，这个是正常行高</p>
    <br/>
    <p class="p2">CSS操作之设置行高，这个是拉伸行高</p>
    <br/>
    <p class="p3">CSS操作之设置行高，这个是压缩行高</p>
    <br/>
    <p>Hello world!</p>
<br/>
   <div> <ul>
        <li><a href="http://www.w3school.com.cn/">W3C</a></li>
        <li><a href="http://www.jikexueyuan.com/">极客学院</a></li>
        <li><a href="http://www.runoob.com/">菜鸟联盟</a></li>
    </ul>
    <br/></div>
    <div class="content"><div class="image">
        <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
            <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
        </a>
        <div class="text" >变形金刚大黄蜂</div>
    </div>
        <div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div>
        <div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div>
        <div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div>
        <div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div>
        <div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div><div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div><div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div><div class="image">
            <a href="https://baike.so.com/doc/5390870-7595057.html" target="_blank">
                <img src="1.jpg" alt="大黄蜂" width="300px" height="300px">
            </a>
            <div class="text" >变形金刚大黄蜂</div>
        </div></div>
</body>
</html>

style.css

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 500px;
    background-color: red;
    margin: 20px auto;
}
.p1{
    width: 150px;
    line-height: normal;
}
.p2{
    width: 150px;
    line-height: 300%;
}
.p3{
    width: 150px;
    line-height: 50%;
}

p{
    cursor:all-scroll;
}
ul{
    list-style-type: none;
    margin: 20px;
    padding: 20px;
    line-height: 40px;
}
/*垂直导航栏*/
/*a:link,a:visited{*/
    /*text-decoration: none;*/
    /*display: block;*/
    /*background-color: bisque;*/
    /*color: aqua;*/
    /*width: 100px;*/
    /*text-align: center;*/
/*}*/
/*a:hover,a:active{*/
    /*background-color: chartreuse;*/
/*}*/


/*水平导航栏*/
ul{
    list-style-type: none;
    margin: 20px;
    padding: 20px;
    background-color: sandybrown;
    width: 250px;
    height:30px;
    text-align: center;
}
a:link,a:visited{
    text-decoration: none;
    font-weight: bold;
    background-color: aquamarine;
    color: brown;
    width: 100px;
    text-align: center;
}
a:active,a:hover{
    background-color: darkslateblue;
}
li{
    line-height: 30px;
    display: inline;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

body{
    margin: 10px auto;
    width: 70%;
    height: auto;
    background-color: bisque;
}
.image{
    border: 1px solid red;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 5px;
}
img{
    margin: 5px;
    opacity: 1;
}
.text{
    font-size: 20px;
    margin-bottom: 5px;
}