zoukankan html css js c++ java

css层叠样式表

css 层叠样式表

作用：
    - 颜色
    - 位置
注释 /*  这是注释  */
形式
    - 内嵌样式 标签style
    - 内联样式 head style
    - 外联样式 单独文件
选择器
    - id选择器 #
    - class选择器 .
    - 标签选择器
    - 层级选择器 空格隔开父-子
    - 组合选择器 逗号隔开同级元素
    - 属性选择器 [] 里边写属性=值
优先级：
    style由上至下
边框 border  宽度 样式 颜色
height高度  width宽度  像素，百分比
text-align:center水平位置，
line-height行高 垂直方向居中
color字体颜色
font-size字体大小
font-weight字体加粗
float  标签漂浮，块级标签堆叠
        老子管不住：clear：both
display
    - inline 行内显示 无法设置高度，宽度，边距
    - block 块级显示 可以设置高度，宽度，边距
    - none 不显示
    - inline-block 双重属性
padding  内边距
margin  外边距
代码重用
    两个样式相同的部分可以单独提出来
自适应media
布局变形解决办法：最外层用绝对宽度，内部可以使用百分比
img标签，默认有1像素的边框，border:0;
position
    - fixed 固定
    - relative+absolute 相对定位+绝对定位
z-index: 层级顺序，立体堆叠，值越大越靠前
opacity：模糊度0-1
overflow：auto  hidden
hover
background-image: url("img/icon.png"); 默认重复
background-repeat: no-repeat;
background-position-x:0; 相当于扣了一个小洞
background-position-y:0;

代码实例

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-head{
            height: 38px;
            background-color: darkgray;
        }
        .pg-head-left{
            float: left;
        }
        .pg-head-right{
            float: right;
        }
        .pg-body{
             900px;
            height:400px;
            border: 1px solid red;

        }
        .pg-element{
             150px;
            height:200px;
            border: 1px solid green;
            float: left;
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="pg-head">
        <div class="pg-head-left">左边的内容</div>
        <div class="pg-head-right">右边的内容</div>
    </div>

    <div class="pg-body">
        <div class="pg-element">内部元素</div>
        <div class="pg-element">内部元素</div>
        <div class="pg-element">内部元素</div>
        <div class="pg-element">内部元素</div>
        <div class="pg-element">内部元素</div>
        <div class="pg-element">内部元素</div>
        <div style="clear: both"></div>
    </div>

</body>
</html>

效果
这里写图片描述

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-head{
            background-color: black;
            color:white;
            position: fixed;
             100%;
            height: 48px;
            top:0;
            text-align: center;
            line-height: 48px;
        }
        .pg-body{
            height: 5000px;
            background-color: #dddddd;
            margin-top: 48px;
            color:green;
            text-align: center;
            font-size:50px;
        }
        #pg-goto-top{
             80px;
            height: 50px;
            background-color: black;
            position: fixed;
            right: 10px;
            bottom:10px;
            color:white;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-head">顶部内容</div>
    <div class="pg-body">主体内容</div>
    <div onclick="gotoTop()" id="pg-goto-top">返回顶部</div>
    <script>
        function gotoTop() {
            document.body.scrollTop=0;
        }
    </script>
</body>
</html>

效果

这里写图片描述

background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon{
             18px;
            height: 18px;
            background-image: url("img/icon.png");
            background-repeat: no-repeat;
            background-position-x:0;
            /*border: 1px solid green;*/
            float: left;
            margin-right:10px ;
        }
        .icon-1{background-position-y:0;}
        .icon-2{background-position-y:-20px;}
        .icon-3{background-position-y:-40px;}
        .icon-4{background-position-y:-60px;}
        .icon-5{background-position-y:-100px;}
        .icon-6{background-position-y:-120px;}
        .icon-7{background-position-y:-140px;}
        .icon-8{background-position-y:-160px;}
        .icon-9{background-position-y:-180px;}
    </style>
</head>
<body>
<p>原图：</p>
<div>
    <img src="img/icon.png" alt="">
</div>
<p>背景图：</p>
<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
<div class="icon icon-3"></div>
<div class="icon icon-4"></div>
<div class="icon icon-5"></div>
<div class="icon icon-6"></div>
<div class="icon icon-7"></div>
<div class="icon icon-8"></div>
<div class="icon icon-9"></div>
</body>
</html>

icon.png
这里写图片描述

效果
这里写图片描述

hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
            height: 5000px;
        }
        .pg-head{
            background-color: #2459a2;
            height:48px;
            position: fixed;
            top:0;
            left:0;
            right:0;
            color:white;
            line-height: 48px;
        }
        .w{
            960px;
            margin: 0 auto;
         }
        .pg-body{
            margin-top: 50px;
        }
        .pg-head .menu{
            display: inline-block;
            padding: 0 20px;
        }
        /*鼠标经过生效*/
        .pg-head .menu:hover{
            background-color: #0d3ea2;
        }

    </style>
</head>
<body>
<div class="pg-head">
    <div class="w">
        <a class="logo" >logo</a>
        <a class="menu" >主页</a>
        <a class="menu" >段子</a>
        <a class="menu" >图片</a>
        <a class="menu" >1024</a>
    </div>
</div>
<div class="pg-body">
    <div class="w">这里是主体内容</div></div>
</body>
</html>

效果
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login{
             300px;
            height:35px;
            position: relative;
            display: inline-block;
        }
        .icon{
            height: 35px;
             35px;
            background-image: url("img/pwd-icons-new.png");
            background-repeat: no-repeat;
            background-position-x: 0;
            background-position-y: -48px;
            position: absolute;
            top:3px;
            right:-15px;

        }
        input{
             275px;
            height:35px;
            font-size:20px;
            padding-right:40px;  /*右边内边距增加*/
        }
        label{
            height:35px;
        }
    </style>
</head>
<body>
    <label for="username">登陆：</label>
    <div class="login">
        <input id="username" type="text">
        <span class="icon"></span>
    </div>
</body>
</html>

pwd-icons-new.png (来自京东商城登陆页面)
这里写图片描述

显示效果
这里写图片描述

margin-padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-margin{
            border:1px solid red;
            200px;
            height:200px
        }
        .pg-margin-box{
            border:1px solid green;
            180px;
            height:180px;
            background-color: green;
            margin:10px;
        }
        .pg-padding{
            border:1px solid red;
            180px;
            height:180px;
            padding: 10px
        }
        .pg-padding-box{
            border:1px solid green;
            180px;
            height:180px;
            background-color: green
        }
    </style>
</head>
<body>
    <div class="pg-margin">
        <div class="pg-margin-box">
            外边距margin
        </div>
    </div>

    <div class="pg-padding">
        <div class="pg-padding-box">
            内边距padding
        </div>
    </div>
</body>
</html>

显示效果
这里写图片描述

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--超出范围隐藏-->
<div style="200px; height: 200px;overflow: hidden">
    <img src="img/sun.jpg" alt="">
</div>

<!--超出范围出现滚动条-->
<div style="200px; height: 200px;overflow: auto">
    <img src="img/sun.jpg" alt="">
</div>
</body>
</html>

图片：
这里写图片描述

显示效果：
这里写图片描述

property

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;  /* 边框 */
             200px;  /* 宽 */
            height: 200px;  /* 高 */
            text-align: center;  /* 水平居中 */
            line-height: 200px;  /* 垂直居中 */
            color: green;  /* 字体颜色 */
            font-size: 20px;  /* 字体大小 */
            font-weight: bold;  /* 字体加粗 */
        }
    </style>
</head>
<body>
<div>简单的div测试</div>
</body>
</html>

显示效果
这里写图片描述

selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        p{
            background-color:green;
        }
        /*id选择器*/
        #i1{
            background-color:yellow;
        }
        /*类选择器*/
        .c1{
            background-color:blue;
        }
        /*层级选择器*/
        div p{
            background-color:red;
        }
        /*组合选择器*/
        #i2, .c2{
            background-color:orange;
        }
        /*属性选择器*/
        p[color="pink"]{
            background-color:pink;
        }
    </style>


</head>
<body>

<p>标签选择器 green</p>
<p id="i1">id选择器 yellow</p>
<p class="c1">类选择器 blue</p>
<div><p>层级选择器 red</p></div>
<p class="c2">组合选择器 orange</p>
<p id="i2">组合选择器 orange</p>
<p color="pink">属性选择器 pink</p>

</body>
</html>

显示效果
这里写图片描述

z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-body{
            height: 5000px;
            background-color: #dddddd;
            color:green;
        }
        .pg-background{
            z-index:9;
            background-color: orange;
            position: fixed;
            top:0;bottom:0;
            left:0;
            right:0;
            opacity:0.5;
            /*display:none*/
        }
        .pg-box{
            z-index:10;
            background-color: white;
            500px;
            height:400px;
            position:fixed;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left: -250px;
            /*display:none;*/
        }
    </style>
</head>
<body>
<div class="pg-box"></div>
<div class="pg-background"></div>
<div class="pg-body">
   <button onclick="showBox()">注册</button>
</div>

</body>
</html>

显示效果
这里写图片描述

布局实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .pg-body-left-li{
        height:60px;
        line-height: 60px;
        background-color: coral;
        text-align: center;
        font-weight: bold;
        border:1px solid lawngreen;
    }
    .pg-body-right-div{
        150px;
        height:220px;
        background-color: #dddddd;
        padding: 10px;
        float:left;
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>
<body style="margin: 0 auto;">
<!--页面头部部分-->
<div style=" height:36px">
    <div style=" 960px;margin: 0 auto">
         <div style="float: left;line-height: 36px">收藏本站</div>
         <div style="float: right;line-height: 36px">登陆</div>
         <div style="float: right;line-height: 36px"> | </div>
         <div style="float: right;line-height: 36px">注册</div>
    </div>
</div>

<!--购物车-->
<div style="960px;margin: 0 auto;height:36px">
    <div style="100px;height: 36px;line-height: 36px;text-align:center;float:right">购物车</div>
</div>

<!--导航栏-->
<div style="height: 40px">
    <div style=" 960px; margin: 0 auto">
        <div style="float:left;color:white;line-height: 40px;margin: 0 50px">全部分类</div>
        <div style="float:left;color:white;line-height: 40px;margin-right: 10px">首页</div>
        <div style="float:left;color:white;line-height: 40px;margin-right: 10px">|</div>
        <div style="float:left;color:white;line-height: 40px;margin-right: 10px">天猫超市</div>
        <div style="float:right;color:white;line-height: 40px;">研究院</div>
        <div style="float:right;color:white;line-height: 40px;margin-right: 10px">|</div>
        <div style="float:right;color:white;line-height: 40px;margin-right: 10px">论坛</div>
    </div>
    <!--清除浮动-->
    <div style="clear: both;height:10px"></div>

    <!--主体部分-->
<div style=" 960px;margin: 0 auto">
    <!--左边栏-->
    <div style="height:520px;200px;float:left;background-color: green">
        <div class="pg-body-left-li">南方水果</div>
        <div class="pg-body-left-li">南方水果</div>
        <div class="pg-body-left-li">南方水果</div>
        <div class="pg-body-left-li">南方水果</div>
        <div class="pg-body-left-li">南方水果</div>
        <div class="pg-body-left-li">南方水果</div>

    </div>
    <!--右边栏-->
    <div style="height:500px; 720px; float:right; padding:10px ">
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>
        <div class="pg-body-right-div">
            <div style="height:180px;"></div>
            <div style="height: 5px"></div>
            <div style="height: 40px;line-height: 40px; text-align:center;商品信息</div>
        </div>


    </div>
</div>
</div>
</body>
</html>

查看全文

相关阅读:
RN-Android构建失败：Caused by: org.gradle.api.ProjectConfigurationException: A problem occurred configuring root project 'AwesomeProject'.
Android更新包下载成功后不出现安装界面
 真机调试： The application could not be installed: INSTALL_FAILED_TEST_ONLY
react native 屏幕尺寸转换
 Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
 React Native安卓真机调试
 git提交代码报错Permission denied, please try again
The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.
命令行设置快捷命令
 Linux 常用指令

原文地址：https://www.cnblogs.com/cainingning/p/9614934.html