zoukankan      html  css  js  c++  java
  • CSS的应用下

    样式继承:

    就是父类的颜色如果变了,子类下的div(或者其他属性)会继承父类的。

    参考代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            .c1{
                color: red;
            }
    
            p{
                color: green;
            }
    
            ul li a{
                color: RGB(200,122,111);
            }
        </style>
    
    <body>
    
    
    
    <div class="c1">
        DIV1
        <div class="c2">DIV2</div>
        <p>PPP</p>
        <a href="">click</a>
    </div>
    
    
    
    
    
    
    
    
    
    <ul>
        <li><a href="">11</a></li>
        <li><a href="">22</a></li>
        <li><a href="">2222</a></li>
        <li><a href="">222</a></li>
    </ul>
    </body>
    </html>
    

     

    line-height:高度

      文本行高,通俗地讲,文字高度加上文字上下的空白区域的高度(基于字体的高度)50%等于总高度

    verticle-align属性:

      设置元素内容的垂直对其方式,只对行内元素有效,对块级元素无效。

    当文字和图片同时存在一行时,是利用底线来对其的,这样的话会造成对不齐的现象。

    这时候需要在修改img的属性,在style里边调整:

    img{

      vertical-align:middle;(这里的middle也可以改为其他对齐方式)

    }

    也可以调像素,改为多少px就行。

    其他的一些属性:

    text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
    
    font-family: 'Lucida Bright'
    
    font-weight: lighter/bold/border/
    
    font-style: oblique
    
    text-indent: 150px;      首行缩进150px
    
    letter-spacing: 10px;  字母间距
    
    word-spacing: 20px;  单词间距
    
    text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写

    背景属性:

    background-color(背景颜色)
    background-image(背景图片)
    background-repeat(填充方式:不填充,填充等)
    background-position(定位位置)
    
    background-color: cornflowerblue
     
    background-image: url('1.jpg');
     
    background-repeat: no-repeat;(repeat:平铺满)
     
    background-position: right top(20px 20px);(距离左边多少,距离上面多少)
    简写

    改变数字前面的标示符可以利用list-style:~~~;来改变

    Display属性:可以把一个块级标签设置成内联标签

    一共有这么几个属性:

    none (常用,部分隐藏,部分显示,none的部分隐藏)

    block(设置成块级,然后长宽高有效)

    inline(设置成内联,设置的长宽高无效)

    inline-block

    css布局关键点:如何能够在一行显示多个可以调节长宽的元素。

    一个标签即兼具了块级设备可以调长宽的属性,又具备了内联标签在一行显示的特性。

    代码示例:

     <style>
            /*.c1{*/
                /*display: inline;*/
                /* 200px;*/
                /*height: 200px;*/
                /*background-color: green;*/
    
            /*}*/
    
    
            /*span{*/
                /* 200px;*/
                /*height: 200px;*/
                /*background-color: wheat;*/
                /*display: block;*/
            /*}*/
    
    
    
    
    
               .c1{
                  200px;
                height: 200px;
                background-color: wheat;
                display: inline-block;
               }
    
            .c2{
                  200px;
                height: 200px;
                background-color: goldenrod;
                display: inline-block;
    
    
               }
    
    
            .c3{
                  200px;
                height: 200px;
                background-color: green;
                display: inline-block;
    
               }
    
            span{
                margin-left: -4px;
            }
    
    
    
            .Myhide{
                display: none;
            }
         /*===========================*/
    
            .box{
                border:1px solid red;
            }
            .ico,.egon{
                display: inline-block;
            }
    
    
            .box:hover img{
                display: block;
            }
    
        </style>
    
    </head>
    <body>
    
    <!--<div class="c1">DIV</div>-->
    
    <!--<span>SPAN</span>-->
    
    
    
    <span class="c1 Myhide">111</span>
    <span class="c2">222</span>
    <span class="c3">333</span>
    
    
    
    
    <div class="box">
        <div class="text">hkjfdashfkas</div>
        <div class="text">
            <div class="ico">???????????????</div>
            <div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div>
        </div>
    </div>
    
    </body>

    图片一开始隐藏的,悬浮左边显示右边。

        <style>
       .box{
                border:1px solid red;
            }
            .ico,.egon{
                display: inline-block;
            }
    
    
            .box:hover img{
                display: block;
            }
    
        </style>
    

    <div class="box"> <div class="text">hkjfdashfkas</div> <div class="text"> <div class="ico">???????????????</div> <div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div> </div> </div>

    清除浮动:

    浮动元素上一个是浮动元素,紧贴着上一个。

    上一个不是浮动元素,就在他的下面。

      <style>
    
            body{
                margin: 0;
            }
            .c1{
                 100px;
                height: 170px;
                background-color: #53868B;
                float: left;
                clear: left;
            }
            .c2{
                 200px;
                height: 70px;
                background-color: cornflowerblue;
                float: left;
                clear: both;
            }
            .c3{
                 300px;
                height: 120px;
                background-color: darkmagenta;
                float: left;
            }
    
                .c4{
                 300px;
                height: 300px;
                background-color: green;
    
            }
        </style>
    
    </head>
    <body>
    
    
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <!--<div class="c4"></div>-->
    
    
    </body>
    View Code
    clear: both;
    clear: left;
    clear: right;

    Position定位:

    position之fix定位:做一个一直在某个位置的按钮(例如返回顶部)

    代码:

       <style>
            .c1{
    
                 100%;
                height: 2000px;
                background-color: wheat;
            }
            .returnTop{
                   120px;
                height: 40px;
                background-color: gray;
                color: white;
                text-align: center;
                line-height: 40px;
                position: fixed;
                right: 20px;
                bottom: 20px ;
            }
        </style>
    
    </head>
    <body>
    
    <div class="c1"></div>
    
    <div class="returnTop">返回顶部</div>
    
    </body>

    清除浮动的应用:

    float父级塌陷:

    设置的子级元素不跟父级一样,然后就会出现高度不一样的情况(或其他情况)。

      <style>
            *{
                margin: 0;
            }
            .header{
                 100%;
                /*height: 80px;*/
    
                background-color: #53868B;
            }
    
            .header .item1,.header .item2{
                 60px;
                height: 80px;
                background-color: goldenrod;
                float: left;
            }
    
            .item2{
                background-color: green!important;
            }
    
            .header .item3{
                 60px;
                height: 50px;
                background-color: goldenrod;
                float: right;
            }
            .content{
                 100%;
                height: 300px;
                background-color: darkmagenta;
            }
    
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
    
        </style>
    
    </head>
    <body>
    
    
    <div class="header clearfix">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    
    </div>
    
    
    <div class="content"></div>
    
    
    </body>
    

    relative与absolute定位:

      fixed:完全脱离文档流,参照物是可视窗口,可以设置top,left,right,bottom

      relative:不脱离文档流,参照物是自己原本的位置,可以设置top,left,right,bottom

      absolute:完全脱离文档流,参照物已定位的父级标签,可以设置top,left,right,bottom

    一般,

      (1)给某些元素进行定位,设置absolute;

      (2)改定位标签的父元素设置定位;

        <style>
    
            body{
                margin: 0;
            }
            .c1{
                 200px;
                height: 200px;
                background-color: #53868B;
    
            }
            .c2{
                 200px;
                height:200px;
                background-color: cornflowerblue;
                position: absolute;
                top:200px;
                left: 200px;
    
            }
            .c3{
                 200px;
                height: 200px;
                background-color: darkmagenta;
    
            }
    
            .box{
                position: relative;
            }
    
    
        </style>
    
    </head>
    <body>
    
    
    <div class="c1"></div>
    <div class="box"><div class="c2"></div></div>
    <div class="c3"></div>
    View Code

     

    京东轮播图布局:

    14

  • 相关阅读:
    2021年搭建Java环境最快办法
    teprunner测试平台Django引入pytest完整源码
    teprunner测试平台用例前置模块开发
    JMeter扩展Java请求实现WebRTC本地音视频推流压测脚本
    teprunner测试平台部署到Linux系统Docker
    学习版pytest内核测试平台开发万字长文入门篇
    JUC---02
    JUC——01
    【小白学PyTorch】11 MobileNet详解及PyTorch实现
    【小白学PyTorch】10 pytorch常见运算详解
  • 原文地址:https://www.cnblogs.com/sexiaoshuai/p/7646860.html
Copyright © 2011-2022 走看看