前端学习之路——css高级

最新推荐文章于 2023-02-01 20:01:28 发布

gyt478922579

最新推荐文章于 2023-02-01 20:01:28 发布

阅读量661

点赞数 2

分类专栏： jQuery css

本文链接：https://blog.csdn.net/gyt478922579/article/details/52475193

版权

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

css高级

html:

<!doctype html>
/*css 定位，css 浮动，css 尺寸，css 导航栏，css 图片*/
<html>

     <head>

         <meta charset="UTF-8">
         <title></title>
         <link href="css高级.css" type="text/css" rel="stylesheet">

    </head>
    <body>

        <div class="position1"></div>
        <div class="position2"></div>
        <p>this is china!</p>
        <p>this is beijing!</p>
        <p>this is Bianca!</p>
        <p>this is a rich girl!</p>


    <div class="container">
         <div class="qd">ds</div>
         <div class="wd">dd</div>
         <div class="text">hello world</div>
         <div class="ed"></div>
    </div>

    <p class="p1">hellllllllllloooooooooooooooo<br>ooooooooooooooooooooooooooooooooooooo</p>
    <p class="p2">helllllllllllooooooooooooooooo<br>oooooooooooooooooooooooooooooooooooo</p>
    <p class="p3">helllllllllllooooooooooooooooo<br>oooooooooooooooooooooooooooooooooooo</p>  

    <ul class="ul1">
        <li><a href="http://www.baidu.com">link1</a></li>
        <li><a href="http://www.baidu.com">link2</a></li>
        <li><a href="http://www.baidu.com">link2</a></li>
        <li><a href="http://www.baidu.com">link2</a></li>
    </ul>

     <ul class="ul2">
        <li><a href="http://www.baidu.com">link1</a></li>
        <li><a href="http://www.baidu.com">link2</a></li>
        <li><a href="http://www.baidu.com">link2</a></li>
        <li><a href="http://www.baidu.com">link2</a></li>
    </ul>


    </body>


</html>

css:

.position1{
    width:100px;
    height:100px;
    background-color: cornflowerblue;
    position:relative;/*相对的*/
    /*position: absolute;/*绝对的*/
    /*position: fixed;/*元素固定*/
    left:60px;/*向左偏移*/
    z-index: 2;
}

.position2{
    width:100px;
    height:100px;
    background-color: aquamarine;
    position:relative;
    left:10px;
    top:10px;
    z-index: 1;/*在最下面*/
}

.qd{
    width:100px;
    height:100px;
    background-color: lightskyblue;
    float: left;/*浮动*/
}

.wd{
    width:100px;
    height:100px;
    background-color:lightseagreen;
    float:left;
}

.ed{
    width:100px;
    height:100px;
    background-color:palevioletred;
    float: right;
}

.container{
    width:280px;

    height:600px;
    background-color: gray;

}

.text{
    clear:both;/*取消div浮动属性*/
}

.p1{
    line-height:normal;/*css尺寸*/
    width:400px;
}

.p2{
    line-height:50%;
    width:400px;
}

.p3{
    line-height: 200%;
    width:400px;
}

ul{
    text-align: center;
    color:white;
    list-style: none;/*去掉无序链表前的修饰*/
    width:200px;

}



.ul1 a:link,a:visited{
    text-decoration: none;
    background-color: lightgray;
    display:block;/*作为块来显示*/
}
.ul2  a:link,a:visited{
    text-decoration: none;
    background-color: lightgray;
}

.ul2 li{
    display:inline;
}

a:active,a:hover{/*一定放在link和visited后面*/
    background-color: cadetblue;
}

gyt478922579

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路——css高级

css高级html:<!doctype html>/*css 定位，css 浮动，css 尺寸，css 导航栏，css 图片*/<html> <head> <meta charset="UTF-8"> <title></title> <link href="css高级.css" type="text/css" rel="styleshe
复制链接

扫一扫