8 .html样式

最新推荐文章于 2024-09-29 21:22:01 发布

jack576

最新推荐文章于 2024-09-29 21:22:01 发布

阅读量159

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/hysnba/article/details/114679540

版权

1.1选择器

属性选择器: (了解)
根据元素的某个属性,或者属性值选中一个或者一组元素
伪列选择器 :

任意元素都可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        a:link {color:#FF0000;} /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已访问的链接 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接 */
        a:active {color:#0000FF;} /* 已选中的链接 */

        div{
            width: 300px;
            height: 300px;
            background: red;
            /*圆角*/
            border-radius:100% ;
        }

        div:hover{
            background: yellow;
        }
        div:active{
            background: green;
        }
    </style>
</head>
<body>
   
    <a href="#">哈哈</a>
    <div></div>
</body>
</html>

2 display

标签元素的分类:
块元素
行内元素

display :
block 块元素
独占一行
可以设置宽高
可以设置内外边距
inline 行内元素
宽度有内容撑起,可以与其他行内元素或者文本同行显示
不能设置宽高
不能设置上下的内外边距
inline_block 行内块

行内元素,块元素的特点都有
宽度有内容撑起,可以与其他行内元素或者文本同行显示
可以设置宽高
可以设置内外边距
注意: 可以让块元素同行显示

none :消失了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height : 200px;
            background: #FF00FF;

            /*元素消失*/
            /*display: none;*/
            /*透明*/
            /*opacity: 0;*/

            display: block;
            display: inline;
            display: inline-block;
        }

        span{
            width: 200px;
            height : 200px;
            background: yellowgreen;

            display: block;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>box</div>
    <span>span</span>
</body>
</html>

3 inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            /*清除列表项标记*/
            list-style: none;

            font-size: 0;
            background: black;
            height: 60px;


            /*水平剧中*/
            text-align: center;
        }

        ul li{
            /*块元素同行显示 行内块*/
            display: inline-block;

            /*占据父级宽度的25%*/
            width: 25%;
            /*内容垂直居中*/
            line-height: 60px;
            height: 60px;
        }

        ul li a{
            color: #ccc;
            text-decoration: none;
            font-family: "华文彩云";
            font-size: 32px;
        }

        ul li:hover{
            border-bottom: 3px solid red;
        }

        ul li a:hover{
            color: #FF00FF;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">我的说说</a></li>
        <li><a href="#">我的心情</a></li>
        <li><a href="#">我的音乐</a></li>
        <li><a href="#">我的相册</a></li>
    </ul>
</body>
</html>

4 浮动

css 中的浮动
让块元素同行显示
float 浮动 : 元素向指定方向移动,当遇到其他浮动元素或者浏览器的边界的时候停下
注意:
浮动会半脱离文档流
文档流: 块元素从上到下

块元素一旦浮动,让出文档流的位置,后面的块元素会占据前面浮动元素的位置,内容会让出前面浮动元素的位置->版脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            height: 100px;
            background: black;
        }
        .item{
            width: 100px;
            height: 150px;
        }
        .div1{
            background: royalblue;
            /*浮动*/
            float: right;
        }
        .div2{
            background: aquamarine;
            float: right;
        }
        .div3{
            background: bisque;
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item div1">div1 </div>
        <div class="item div2">div2 </div>
        <div class="item div3">div3 </div>
    </div>
    <p></p>
</body>
</html>

4.1清除浮动

需求: p标签不要占据前面浮动元素的位置 box
1) 在p中使用clear
2) 浮动元素的父级box设置高度
3) overflow: hidden; 父级设置overflow:hidden;作用是:子级元素浮动了
需求: p标签不要占据前面浮动元素的位置 box

1) 在p中使用clear
2) 浮动元素的父级box设置高度
3) overflow: hidden; 父级设置overflow:hidden;作用是:子级元素浮动了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
          /*  height: 150px;*/
            overflow: hidden;
        }
        .item{
            width: 100px;
            height: 150px;
            float: right;
        }
        .div1{
            background: royalblue;
            /*浮动*/
        }
        .div2{
            background: aquamarine;
           /* clear: both;*/
        }
        .div3{
            background: bisque;
        }

        p{
            height: 100px;
            background: black;

            /*clear: both;*/
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item div1">div1 </div>
        <div class="item div2">div2 </div>
        <div class="item div3">div3 </div>
    </div>
    <p></p>
</body>
</html>