链条传动

砥砺前行，不忘初心！
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
CSS

CSS

CSS
        存在形式
            标签属性
            style块
            文件
            最牛的：color:red !important;

        寻找：
            标签选择器
            class选择器
            ID选择器
            层级选择器
            组合选择器

            属性选择器
            .c1[alex='a']{
                color: red;
            }

        样式：

            color，width,height
            width:百分比

            background:

            透明度：
                opcity:0.6
                background:rgba(0,0,0,.6)

            position:
                fixed

                absolute
                    定义位置：
                    滚动：

                relative


                relative && absolute

                ===> z-index:
                ===> 页面布局：fixed
            边距补充
                input
                图标（补充 font awesome）

            ===================
            font awesome

            float:    好方式
                :hover
                :after
                :before

                网站：
                    css:
                        .clearfix:after{
                            content: '.';
                            clear: both;
                            display: block;
                            visibility: hidden;
                            height: 0;
                        }

                    HTML:
                        <div class='clearfix'>
                            <div style='float'>
                            <div style='float'>
                        </div>

            over-flow:hide/auto


            布局：
                主站（w,剧中）
                后台管理
CSS总结

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <!--head中添加style标签，CSS对当前页面都生效-->
    <style>
        /*对所有div标签都生效*/
        div{
            background-color: blue !important;
            color: white;
        }
    </style>

    <!--调用外部CSS文件-->
    <link rel="stylesheet" href="common.css"/>
</head>
<body>
    <!--标签内添加CSS-->
    <div style="background-color: red;color: white;">888</div>

    <!--css优先级：标签内css最高--页面内style标签---外部css文件-->
    <!--要想打破上述优先级，可以在css属性后面加上 ！important。如：color:red !important;，这样写优先级最高-->

    <div>99</div>
    <div>99</div>
    <div>99</div>
</body>
</html>
CSS的3种实现方式

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器：对所有div标签都生效*/
        div{
            background-color: red;
            color: white;
        }

        /*id选择器：对id等于i1的标签生效（标签的id是唯一的、不重复的）------不常用*/
        #i1{
            font-size: 32px;
        }

        /*class选择器：对所有class等于c1的标签都生效------最常用*/
        .c1{
            background-color: gray;
        }

        /*层级选择器：对class为c1的标签下的div标签下的p标签下的a标签生效------常用*/
        .c2 div p a{
            color: brown;
            font-size: 50px;
        }

        /*组合选择器：对class为c3，c4，c5的标签都生效-------常用*/
        .c3,.c4,.c5{
            background-color: aqua;
        }

        /*属性选中器：对所有class为p，并且自定义属性alex为a的所有标签都生效*/
        .p[alex='a']{
            color: green;
        }
    </style>
</head>
<body>
    <div>88</div>

    <p id="i1">99</p>

    <span class="c1">hello</span>

    <div class="c1">hahahaha</div>

    <div class="c2">
        <div></div>
        <div>
            <span>ss</span>
            <p>
                <a>uu</a>
            </p>
        </div>
    </div>

    <div class="c3">44</div>
    <div class="c4">44</div>
    <div class="c5">44</div>


    <div class="p" alex="a">1</div>
    <div class="p">2</div>
    <div class="p" alex="b">3</div>
    <div class="p" alex="a">4</div>
</body>
</html>
CSS选择器

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        .c1{
            /*背景颜色*/
            background-color: gray;
            /*字体颜色*/
            color: red;
            /*字体大小*/
            font-size: 50px;
            /*标签高度：高度不能用百分比，因为高度不固定*/
            height: 200px;
            /*标签宽带：可以是像素，也可以是百分比*/
            width: 500px;

        }
    </style>
</head>
<body>
    <div class="c1">Hello CSS!</div>

    <!--子标签的width用百分比表示的时候是相对于父标签的width来计算的-->
    <div style="width: 500px;background-color: aqua">
        <div style="width: 20%;background-color: burlywood">哈哈</div>
        <div style="width: 80%;background-color: darkcyan">哈哈</div>
    </div>
</body>
</html>
CSS样式：基本

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    
    <style>
        /*背景图片要有高度和宽度才能显示出来，默认背景是铺满整个高度和宽度的，图片不够大就重复显示*/
        .img{
            /*背景图片地址*/
            background-image: url("1.JPG");
            /*高度*/
            height: 500px;
            /*宽带*/
            width: 1000px;
            /*图片是否重复：no-repeat表示不重复（默认铺满整个宽带和高度，图片不够大就重复）*/
            background-repeat: no-repeat;
        }

        .img2{
            background-image: url("2.jpg");
            height: 100px;
            width: 100px;
            /*调整图片位置：高度和宽度小于图片高度和宽度，可以使用background-position调整图片位置，显示想要看到的图片部位*/
            background-position: -24px -10px;
        }
    </style>
</head>
<body>
    <div class="img"></div>

    <div class="img2"></div>
</body>
</html>
CSS样式：背景图片

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        .c1{
            /*边框实线*/
            /*border: 1px solid red;*/
            /*边框点线*/
            /*border: 1px dotted red;*/
            /*边框虚线*/
            border: 1px dashed red;
            /*隐藏标签：标签内容和位置都消失   display其他选项：block、inline---人为转换标签为块级标签或内联标签*/
            display: none;
            /*隐藏标签：标签内容隐藏，位置以空白表示*/
            visibility: hidden;
        }
    </style>
</head>
<body>
    <span class="c1">Hello CSS</span>

    <!--内联标签设置高度和宽度都是不生效的-->
    <span style="background-color: green;height: 100px;width: 200px">Hello CSS</span>
    <!--添加display: inline-block"，使高度和宽度生效-->
    <span style="background-color: green;height: 100px;width: 200px;display: inline-block">Hello CSS</span>


    <hr />

    <!--自定义鼠标移动到相应内容上时的鼠标图标展示的形态-----一般用不上-->
    <span style="cursor: pointer">hello</span>
    <span style="cursor: help">hello</span>
    <span style="cursor: wait">hello</span>
    <span style="cursor: move">hello</span>
    <span style="cursor: crosshair">hello</span>
</body>
</html>
CSS样式：边框、display、cursor

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
    <!--margin：外边距（本身不增加）   padding：内边距（本身需要增加）-->
    <div style="height: 70px;border: 1px solid red">
        <div style="height: 30px;background-color: green;margin-top: 10px;padding-top: 20px"></div>
    </div>
</body>
</html>
CSS样式：边距

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
    <!--float：漂浮，子标签总宽度小于符标签的宽带，则子标签漂浮显示在一行，大于父标签宽度，则显示多行-->
    <div style="width: 500px;background-color: blue">
        <div style="width: 20%;background-color: antiquewhite;float: left">Hello</div>
        <div style="width: 60%;background-color: cadetblue;float: left">CSS</div>

        <!--使用float之后，子标签就脱离了父标签，不能撑起父标签的高度。要想子标签仍然在父标签中，需要清除浮动：在所有float之后，加上下面一句-->
        <!--清除浮动也可以在父标签中添加css：overflow: auto;-->
        <div style="clear: both"></div>
    </div>
</body>
</html>
CSS样式：漂浮

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div style="height: 2000px;background-color: gainsboro"></div>-->

    <!--position: fixed---固定，相对于整个窗口来进行固定，使用top/bottom/left/right来调整标签在窗口的位置-->
    <!--页面上下滚动，而fixed固定的标签一直不变-->
    <!--<div style="color: red;position: fixed;bottom: 20px;right: 100px">返回顶部</div>-->


    <!--position: fixed---固定，相对于整个窗口来进行固定,使用top/bottom/left/right来调整标签在窗口的位置-->
    <!--会随着页面的上下滚动而滚动-->
    <!--<div style="color: red;position: absolute;bottom: 20px;right: 100px">返回顶部</div>-->


    <!--单独使用relative没什么效果，一般都是absolute和relative搭配使用的-->
    <!--absolute默认相对于整个窗口定位，但是当absolute标签的上层（可能是多层）标签有relative时，就相对于有relative的标签来进行定位-->
    <div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
        <div style="position: absolute;bottom: 0;right: 0">相对定位</div>
    </div>

</body>
</html>
CSS样式：定位

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        .hide{
            display: none;
        }
        .mode{
            height: 300px;
            width: 400px;
            background-color: gainsboro;
            position: fixed;
            /*居中：先将左上角一点调至中间，然后根据标签高度和宽度进行移动即可*/
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
            /*优先级，数值越大优先级越高----优先级高的显示在最外面*/
            z-index: 10;
        }
        .shadow{
            position: fixed;
            /*铺满整个窗口：上下左右都为0*/
            top: 0;
            right:0;
            bottom: 0;
            left: 0;
            background-color: antiquewhite;
            /*透明度：1表示完全不透明*/
            opacity: 0.7;
            z-index: 9;
        }
    </style>
</head>
<body>
    <input type="button" value="添加"/>

    <!--遮罩层-->
    <div class="shadow"></div>

    <!--对话框-->
    <div class="mode">
        <input type="text"/>
        <input type="text"/>
    </div>
</body>
</html>
CSS示例：对话框

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        /*html标签之间默认是有间距的，想要取消间距，可以使用margin:0*/
        body{
            margin: 0;
        }
        .header{
            height: 44px;
            background-color: #1459a2;
            /*标签中添加的内容时，按照高度44px居中放置*/
            line-height: 44px;

        }
        .center{
            width: 980px;
            /*左右居中*/
            margin: 0 auto;
        }
        ul{
            /*去除外边距*/
            margin: 0;
            /*去除ul标签左边的点*/
            list-style-type: none;
        }
        ul li{
            float: left;
            padding: 0 8px 0 8px;
            cursor: pointer;
        }
        /*伪类：当鼠标放在li标签上时，显示的CSS样式*/
        ul li:hover{
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <!--页面头部：标题栏、菜单栏等-->
    <div class="header">
        <div class="center">
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
                <li>菜单四</li>
            </ul>
        </div>
    </div>

    <!--页面内容：正文-->
    <div class="body"></div>

    <!--页面底部：各种说明-->
    <div class="footer"></div>
</body>
</html>
CSS布局示例

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <!--引入font-awesome的css文件-->
    <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css" />
</head>
<body>
    <i style="font-size: 50px" class="fa fa-life-ring" aria-hidden="true"></i>
</body>
</html>
CSS插件：font-awesome使用

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        /*鼠标移动到标签触发的操作*/
        .c1:hover{
            color: red;
        }

        /*在标签前面添加东西*/
        .c2:before{
            content: '666';
        }

        /*在标签后面添加东西*/
        .c3:after{
            content: '999';
        }

        .left{
            float: left;
        }

        .clearfix{
            background-color: blueviolet;
        }

        /*利用伪类清除浮动*/
        .clearfix:after{
            /*标签后面添加一个内容用于撑起标签*/
            content: '.';
            /*隐藏添加的内容，但保留标签格式和大小*/
            visibility: hidden;
            /*设置添加内容高度为0*/
            height: 0;
            /*清除浮动*/
            clear: both;
            /*clear: both;只能针对块级标签生效*/
            display: block;

        }
    </style>
</head>
<body>
    <div class="c1">hello</div>
    <div class="c2">hello</div>
    <div class="c3">hello</div>


    <!--利用伪类清除浮动-->
    <div class="clearfix">
        <div class="left" style="background-color: #1459a2;height: 50px">111</div>
        <div class="left" style="background-color: #616435">222</div>
        <!--<div style="clear: both"></div>-->
    </div>
</body>
</html>
CSS样式：利用伪类清除浮动

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        .icon{
            display: inline-block;
            border-top: 15px solid red;
            border-right: 15px solid blue;
            border-bottom: 15px solid green;
            border-left: 15px solid blueviolet;
        }
        .icon1{
            display: inline-block;
            border-top: 15px solid green;
            border-right: 15px solid green;
            /*transparent：透明色*/
            border-bottom: 15px solid transparent;
            border-left: 15px solid transparent;
        }
    </style>
</head>
<body>
    <div class="icon"></div>

    <!--自定义小尖角-->
    <div class="icon1"></div>


    <!--示例-->
    <div style="background-color: gray;width: 980px;height: 1000px;margin: 0 auto;padding-top: 50px">
        <div style="height: 50px;background-color: green;margin-left: -30px">标题</div>
        <div class="icon1" style="margin-left: -30px"></div>
    </div>
</body>
</html>
CSS示例：自定义小尖角

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0;
        }
        .header{
            height: 48px;
            background-color: #1459a2;
        }
        .body .body-menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #616435;
        }
        .body .body-content{
            position: absolute;
            top: 48px;
            left: 205px;
            /*没有bottom: 0，内容有多少，高度就是多少。整个页面一起滚动*/
            /*bottom: 0;*/

            /*有bottom: 0，但是加上了overflow: auto，表示内容超出边界后自动添加滚动条（为标签添加滚动条）。这样就形成了只有该标签可以上下滚动，其他标签不动*/
            bottom: 0;
            /*超出边界，进行的操作，auto表示超出边界会自动添加滚动条*/
            overflow: auto;
            right: 0;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="header"></div>

    <div class="body">
        <div class="body-menu"></div>
        <div class="body-content">
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
            hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
        </div>
    </div>

    <div class="footer"></div>
</body>
</html>
CSS后台管理页布局

 

posted on 2017-01-05 16:38  链条君  阅读(124)  评论(0)  编辑  收藏  举报