美文网首页
2018-08-15 day03 CSS属性

2018-08-15 day03 CSS属性

作者: Kris_Shin | 来源:发表于2018-08-15 21:49 被阅读0次

    选择题的权重

    <!--选择器的权重
    类型选择(元素选择器)：0001
    class选择器：0010
    id选择器：0100
    伪类选择器:0001
    层级(包含)选择器：多个选择器的权重之和
    群组选择器: 分开看每个选择器的权重
    
    谁的权重的值大，谁的优先级就高
    
-->

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body #d1{
                color: peru;
            }
            .c1{
                color: deepskyblue;
            }
            #d1{
                color: green;
            }
            a{
                color: red;
            }
            
        </style>
    </head>
    <body>
        <a href=""  id="d1" class="c1">百度一下</a>
    </body>
</html>

    浮动html

    <!--
    标准流：块标签一个占一行，从上往下布局。默认宽度是100%
           行内标签一行可以显示多个，从左往右布局，知道遇到边界就自动换行  
           
    脱流：浮动、定位  
    1.浮动：就是让竖着显示的标签横着来,块的默认宽度是内容的宽度
    float: left和right
    
    注意:1.如果要使用浮动，那么同一级的所有的标签都要浮动
         2.如果父标签浮动，那么子标签的位置会跟着一起动
         3.布局基本顺序：从上往下，从左往右
        
    
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #top{
                float: left;
                background-color: red;
                /*background-color: rgba(0,0,0,0);*/
                height: 150px;
                width: 100%;  
                
            }
            #m1{
                float: left;
                
                height: 500px;
                width: 20%;
                background-color: deeppink;
                /*background-color: rgba(0,0,0,0);*/
            }
            #m2{
                float: left;
                height: 500px;
                width: 70%;
                background-color: goldenrod;
                /*background-color: rgba(0,0,0,0);*/
            }
            #m3{
                /*float: right;*/
                height: 500px;
                /*width: 10%;*/
                background-color: green;
            }
            #bottom{
                float: left;
                width: 100%;
                height: 100px;
                background: yellowgreen;
            }
            
        </style>
    </head>
    <body>
        
        <div id="top"></div>
        <div id="m1"></div>
        <div id="m2">
            <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私</p>
        </div>
        <div id="m3">
            阿是否可江安河上的发
        </div>
        <div id="bottom"></div>
    </body>
</html>

    文字环绕

    <!--
    文字环绕: 被文字环绕的标签浮动，文字标签不浮动
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*被环绕的对象浮动*/
            #d1{
                float: left;
                width: 60px;
                height: 60px;
                /*background-color: yellow;*/
            }
            #d2{
                width: 400px;
            }
            
        </style>
    </head>
    <body>
        <img id="d1" src="img/luffy3.png"/>
            
        <p id="d2">
            方递费加哈萨克货到付款撒都<br />分开哈萨克东方航<br />空撒货到付款阿士大夫<br />看撒谎快递费开始浇返回
        </p>
    </body>
</html>

    清除浮动

    <!--
    1.清除浮动：是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的
    
    2.怎么清除浮动？
    a.添加空的div：
        在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表: clear:both
        
        （可能会产生大量的额外的代码）
    b.设置overflow：
        在父标签中设置样式表的overflow的值为hidden  
        
    c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}
    
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*2.清除浮动方案2*/
            /*.clear{
                overflow: hidden;
            }*/
            
            /*3.清除浮动方案3*/
            .clear:after{
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            .clear{
                zoom: 1;
            }
        </style>
    </head>
    <body>
        
        <div style="height: 100px; background-color: red;"></div>
        <div style="background-color: royalblue;" class="clear">
            <div style="width: 30%; background-color: peru; float: left;">
                <img src="img/luffy3.png" alt="" />
            </div>
            <div style="width: 30%; background-color: plum; height: 200px; float: left;"></div>
            
            <!--1.清除浮动方案1-->
            <!--<div id="" style="clear: both;"></div>-->
        </div>
        <div style="height: 100px; background-color: green;"></div>
    </body>
</html>

    display属性

    <!--
    1.HTML中标签分为块和行内
    2.CSS中中标签分为3类：块、行内块、行内（display）
    （在标准流中）
    block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
    inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
    inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)
    
    通过改变标签的display的值，可以让一个标签在块、行内块个行内之间任意切换
    
    
    注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个间隙目前没有办法清除)
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                /*display: block;*/
                background-color: hotpink;
                width: 200px;
                height: 100px;
            }
            
        </style>
    </head>
    <body>
        <input type="text" name="" id="" value=""  style="width: 100px;height: 100px; display: block;"/>
        <span id="" style="background-color: wheat; width: 300px; height: 100px;">
            ABC拿到的
        </span>
        <span id="" style="background-color: brown; display: inline-block;">
            ABC拿到的
        </span>
        
        <p id="" style="display: inline-block;">
            aaa     <br />
            bbb
        </p>
        <span id="">
            ajssjjdh
        </span>
        
    </body>
</html>

    定位

    
<!--定位
    1.距离
    top: 标签顶部距离其他标签的位置
    bottom: 标签的底部距离其他标签的位置
    left: 标签的左边距离其他标签的位置
    right: 标签的右边到其他标签的位置
    
    2.position
    想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
    --- initial:（默认值）没有参考对象
    absolute: 相对第一个position的值是非static,非initial的父标签进行定位
    relative: 正常位置定位（按标准流定位）
    fixed: 相对于浏览器定位
    sticky: 不滚动的时候按标准流布局，滚动的时候相对浏览器定位
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #d1{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: cadetblue;
                /*margin-top: 320px;*/
                /*top: 320px;*/
                top: 20px;
            }
            #d2{
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: salmon;
                /*top: 100px;*/
                right: 20px;
                bottom: 50px;
            }
            #d3{
                /*float: right;*/
                position: sticky;
                /*top: 120px;*/
                width: 100px;
                bottom: 20px;
                /*right: 20px;*/
                
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                
            </div>
        </div>
        
        <div id="" style="height: 20px; background-color: yellow; width: 200%;">
            
        </div>
        
        <div id="d3" style="height: 60px; background-color: purple;">
            
        </div>
        
        
        
    </body>
</html>

    relative练习

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            div div{
                float: left;
                width: 100px;
                height: 100px;
                background-color: green;
                /*position: relative;*/
                /*left: 20px;*/
                /*top: 20px;*/
                margin-left: 20px;
                margin-top: 20px;
            }
            
            #d1{
                overflow: hidden;
            }
            
        </style>
        
    </head>
    <body>

        
        <div id="d1" style="width: 500px; background-color: yellow;">
            
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            
            <!--js代码-->
            <!--<script type="text/javascript">
                
                for (var i = 0; i < 100; i++) {
                    document.write("<div></div>")
                }
            </script>-->
            
            
            
        </div>
        
        <div id="" style="height: 200px; background-color: salmon;">
            
        </div>
        
        
    </body>
</html>

    盒子模型

    <!--
    每一个标签都是由4个部分组成：
    1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
    2.内边距(padding):可见的，不能显示内容（通过设置padding来改变其值，默认是0）
    3.边框(border):可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
    4.外边距(margin):不可见的，但是会占据浏览器的空间
    
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            /*注意：以后在写网页的时候，在样式表的最前面关闭自带的所有的margin和padding*/
            /**{
                margin: 0;
                padding: 0;
            }*/
            body,p,a{
                margin: 0;
                padding: 0;
            }
                
            #d1{
                
                
                
                float: left;
                background-color: sandybrown;
                /*1. 设置内容大小*/
                width: 100px;
                height: 100px;
                
                /*2. padding的值有四个
                 * 可以单独设，也可以一起设
                 */
                /*padding-left:20px ;
                padding-top: 10px;*/
                padding: 10px;  /*上下左右的内边距都是10*/
                padding: 20px 40px;  /*上下是20，左右是40*/
                
                /*3.边框
                 * 可以单独设，也可以一起设
                 * 格式: 宽度 样式 颜色
                 * a.样式 solid-实线 dotted-点状线  double-双线  dashed-虚线
                 */
                
                /*单独设置一条边框的宽度、样式和颜色*/
                /*border-left:5px solid red;
                border-bottom:8px solid green;*/
                
                /*同时设置4条边框的宽度、样式和颜色*/
                border: 3px solid black;
                
                /*单独设置某一条边的颜色*/
                border-left-color: royalblue;  
                
                /*设置边框圆角的弧度*/
                /*border-radius: 5px;*/
                border-top-left-radius: 30px;
                border-bottom-right-radius: 30px;
                
                
                /*4.外边距*/
                /*单独设置每个外边距*/
                /*margin-top: 100px;
                margin-left: 50px;
                margin-right: 100px;*/
                
                /*给所有的外边距设置成一样的值*/
                /*margin:上 右 下 左
                 *margin: 上/下 右/左
                 */
                margin: 20px;
                
                
            }
        </style>
        
    </head>
    <body>
        
        <div id="d1">
            abc
        </div>
        <div id="" style="height: 100px; width: 100px; background-color: blueviolet; float: left;">
            
        </div>
        
    </body>
</html>

    居中

    
<!--1.垂直居中
    a.固定标签高度
    b.设置line-height的值和高度一样
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #d1{
    
                height: 100px;
                width: 100%;
                line-height: 100px;
                background-color: hotpink;
                text-align: center;
                
            }
            #p1{
        
                display: inline-block;
                /*垂直居中*/
                height: 50px;
                line-height: 50px;
                
                width: 300px;
                background-color: green;
                
                /*水平居中*/
                text-align: center;
                
            }
        </style>
    </head>
    <body>
        
        <div id="d1">
            <div id="p2">
                <p id="p1">床前明月光,疑是地上霜</p>
            </div>
            
        </div>
        
    </body>
</html>

    作业

    case.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>——<span id="title">居家优品</span>——</h1>
    <div id="boxs">
        <div id="boxP">
            <div id="no1box">
            </div>
            <img src="img/1.jpg" id="img1">
        </div>
        <div class="box">
            <div class="subBox"><span class="subTitle">家电馆</span><img class="red1" src="img/1.png"><span class="smallTitle">家电好物节</span></div>
            <img class="imgHorizental" src="img/2.jpg">
            <img class="smallImg sl" src="img/3.jpg">
            <img class="smallImg" src="img/4.jpg">
        </div>
        <div class="box">
            <div class="subBox"><span class="subTitle">我爱我家</span><img class="red1" src="img/1.png"><span class="smallTitle">品质生活家</span></div>
            <img class="imgHorizental" src="img/5.jpg">
            <img class="smallImg sl" src="img/6.jpg">
            <img class="smallImg" src="img/7.jpg">
        </div>
    </div>
    <div id="logo">
        <img src="img/1_02.png">
        <img src="img/1_04.png">
        <img src="img/1_05.png">
        <img src="img/1_07.png">
        <img src="img/1_09.png">
        <img src="img/1_11.png">
        <img src="img/1_13.png">
    </div>
    <div id="boxs">
        <div id="boxP">
            <div id="no1box">
            </div>
            <img src="img/1.jpg" id="img1">
        </div>
        <div class="box">
            <div class="subBox"><span class="subTitle">家电馆</span><img class="red1" src="img/1.png"><span class="smallTitle">家电好物节</span></div>
            <img class="imgHorizental" src="img/2.jpg">
            <img class="smallImg sl" src="img/3.jpg">
            <img class="smallImg" src="img/4.jpg">
        </div>
        <div class="box">
            <div class="subBox"><span class="subTitle">我爱我家</span><img class="red1" src="img/1.png"><span class="smallTitle">品质生活家</span></div>
            <img class="imgHorizental" src="img/5.jpg">
            <img class="smallImg sl" src="img/6.jpg">
            <img class="smallImg" src="img/7.jpg">
        </div>
    </div>
    <div id="boxs">
        <div id="boxP">
            <div id="no1box">
            </div>
            <img src="img/1.jpg" id="img1">
        </div>
        <div class="box">
            <div class="subBox"><span class="subTitle">家电馆</span><img class="red1" src="img/1.png"><span class="smallTitle">家电好物节</span></div>
            <img class="imgHorizental" src="img/2.jpg">
            <img class="smallImg sl" src="img/3.jpg">
            <img class="smallImg" src="img/4.jpg">
        </div>
        <div class="box">
            <div class="subBox"><span class="subTitle">我爱我家</span><img class="red1" src="img/1.png"><span class="smallTitle">品质生活家</span></div>
            <img class="imgHorizental" src="img/5.jpg">
            <img class="smallImg sl" src="img/6.jpg">
            <img class="smallImg" src="img/7.jpg">
        </div>
    </div>
</body>
<link rel="stylesheet" href="./css/css.css">
</html>

    css.css

    html,
body {
    margin: 0px;
    padding: 0px;
    background-color: rgb(201, 201, 201);
}

h1 {
    text-align: center;
}

#title {
    letter-spacing: 2px;
}

#boxs {
    overflow: hidden;
    width: 1150px;
    margin: auto;
    padding-left: -30px;
    margin-bottom: 50px;
}

#boxP {
    float: left;
}

#no1box {
    border: 6px solid black;
    width: 290px;
    height: 360px;
    float: left;
    margin: 25px -265px 0px 0px;
}

#img1 {
    float: left;
    width: 290px;
}

.box {
    padding: 10px;
    background-color: rgb(255, 255, 255);
    margin-left: 50px;
    width: 330px;
    float: left;
}

.subBox {
    float: left;
    margin: 5px 0px 10px 0px;
}

.subTitle {
    font-size: 23px;
    float: left;
}

.red1 {
    float: left;
    margin: 0px 4px -10px 4px;
    width: 30px;
}

.smallTitle {
    float: left;
    font-size: 16px;
    color: gray;
    margin-top: 5px;
}

.imgHorizental {
    width: 330px;
}

#logo{ 
    position: fixed;
    top: 400px;
    right: 0;
    width: 36px;
}
#logo img{
    border-radius: 5px;
    background-color: rgb(77, 77, 77);
}
#logo img:hover{
    background-color: rgb(147, 147, 255);
}

.smallImg {
    margin-top: 6px;
    width: 160px;
}

.sl {
    margin-right: 6px
}
    image.png

    相关文章

      网友评论

          本文标题：2018-08-15 day03 CSS属性

          本文链接：https://www.haomeiwen.com/subject/bjjgbftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2018-08-15 day03 CSS属性|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！