zoukankan html css js c++ java

css

class选择器

.名称{

　　...

}

<标签 class = "名称"> </标签>

备注：这里的注释是使用 /* 。。。 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: #2459a2;
            height: 48px
        }

        .c1{
            background-color: #2459a2;
            height: 10px
        }

    </style>
</head>
<body>
    <!--
    编写css样式
    1.标签的style属性
    2.id选择器（head里面写style样式以#开头）
    3.以.开头的css样式，标签里用class对应
    -->
    <div style="background-color: #2459a2;height: 48px">1</div>
    <div id = "i1">2</div>
    <div class="c1">3</div>

    <span class="c1">ddssdsfsfsafsdf</span>
</body>
</html>

css选择器

标签选择器

/*  找到所有的div，让其背景变成黑色，字体颜色变成白色  这个叫标签选择器*/
div {
    background: black;
    color: white;
}

层级选择器

/*层级选择器

下面是sapn下的div才使用该样式
*/
span div{
    background: green;
    color: black;
}

/*
class为c2的时候，嵌入了div的才使用该样式
*/
.c2 div{
    background: red;
    color: green;
}

组合选择器

#i1,#i2,#i3{
    
    height: 48px
}

.c1,.c3,.c4{
    background-color: #2459a2;
    height: 10px
}

属性选择器

/*属性选择器*/
input[type="text"]{100px;height:200px;}
input[n="alex"]{100px;height:200px;}

.c1[n="jack"]{100px;height:200px;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        这个是id选择器
        #i1{
            background-color: #2459a2;
            height: 48px
        }
        组合选择器
        #i1,#i2,#i3{
            background-color: #2459a2;
            height: 48px
        }
        */
        .c1{
            background-color: #2459a2;
            height: 10px
        }

        .c1,.c3,.c4{
            background-color: #2459a2;
            height: 10px
        }

        /*  找到所有的div，让其背景变成黑色，字体颜色变成白色  这个叫标签选择器*/
        div {
            background: black;
            color: white;
        }

        /*层级选择器
        下面是sapn下的div才使用该样式
        */
        span div{
            background: green;
            color: black;
        }

        /*
        class为c2的时候，嵌入了div的才使用该样式
        */
        .c2 div{
            background: red;
            color: green;
        }
        /*属性选择器*/
        input[type="text"]{width:100px;height:200px;}
        input[n="alex"]{width:100px;height:200px;}

        .c1[n="jack"]{width:100px;height:200px;}
    </style>
</head>
<body>
    <!--
    编写css样式
    1.标签的style属性
    2.id选择器（head里面写style样式以#开头）
    3.以.开头的css样式，标签里用class对应
    -->
    <div style="background-color: #2459a2;height: 48px">1</div>
    <div id = "i1">2</div>
    <div class="c1">3</div>
    <!--层级选择器
        span div
     -->
    <span class="c1">11111111
        <div>22222222222222222222</div>
    </span>

    <div>88888888888888888888888888888888</div>

     <!--层级选择器
         .c2 div
     -->
    <span class="c2">333333333333
        <div>4444444444444</div>
    </span>
    <!--
    属性选择器,因为上述就描述了type="text"的属性选择器，所以密码框那个没有使用样式-
    input[type="text"]{100px;height:200px;}
    ->
    <input type="text"/>
    <input type="password"/>
    <!-- 上面自定义了一个属性选择器，所以这里会有样式
    input[n="alex"]{100px;height:200px;}
    -->
    <input n = "alex"/>
    <!-- .c1[n="jack"]{100px;height:200px;}-->
    <input class="c1" n="jack"/>

</body>
</html>

class选择器

css优先级

优先级：标签上的style有限，编写顺序，就近原则，越下方，越靠近

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

    <style>
        .c1{
            background: red;
            color: white;
        }
        .c2{
            font-size:30px;
        }

        .c3{
            font-size:30px;
            color:black;
        }

    </style>
</head>
<body>
    <!-- 两种样式的内容不重叠的情况下，会将所有的样式应用-->
    <div class="c1 c2">两种样式的内容不重叠的情况下，会将所有的样式应用</div>
    <div>88888888888888</div>
    <div class="c1 c3" style="color:pink">css样式三种情况下，写在这里的style优先级最高，其次到上面样式中的越下方的顺序，优先级越高</div>
    <div>88888888888888</div>
    <div class="c1 c3">两种css样式情况下，上面排序下方的，优先级较高</div>

</body>
</html>

css优先级

css的存在形式

独立一个文件存放css样式，然后其他HTML文件引用

<link rel="stylesheet" href="commons.css">

.c1 {
    background: red;
    color: white;
}

.c2 {
    font-size: 30px;
}

.c3 {
    font-size: 30px;
    color: black;
}

commons.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
     <div class="c1 c2">两种样式的内容不重叠的情况下，会将所有的样式应用</div>
</body>
</html>

s13

边框以及常用属性

宽度，样式，颜色（border: 4px dotted red;）

<div style="border: 1px solid red;">div标签，边框大小为1，红色边框</div>
<div style="height:48px; 80%; border: 1px solid red;">div标签，边框大小为1，红色边框,高度为48，宽度占用80%（高度不要占用百分比，除非外面有限制高度的另外标签</div>

border: 1px solid red;边框大小以及颜色
font-size: 16px; 字体大小
text-align: center; 水平居中
line-height: 48px; 根据标签高度居中，一般标签多高，这里写多高，就是正中间
font-weight:bold; 字体加粗
height,高度
width，宽度，可以写像素，也可以写百分比

float：让标签浪起来，块级标签也可以堆叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 20%;background-color: red;float: left">使用float左占用同一行20%</div>
    <!--
    <div style=" 30%;background-color: black;float: left;color: white">使用float占用同一行30%</div>
    -->
    <div style=" 50%;background-color: blue;float: right;color: white">使用float右占用同一行50%</div>
</body>
</html>

float

可以将块级的转换为内联，内联标签也可以转换为块级的

<div style="display: inline;">asdf</div>

<span style="display: block;">asdf</span>

display :inline-block;
具有inline，默认自己有多少占多少，也具有block，可以设置无法设置高度，宽度，padding，margin

display : None;让标签消失（这个就可以做到显示或者隐藏某些东西）

注意：
行内标签：无法设置高度，宽度，padding，margin
块级标签：可以设置高度，宽度，padding，margin

padding（内边距），margin(外边距）

margin-top   

HTML默认是有边距的，所以去掉边距就加上style="margin:0"

回顾以及补充

CSS样式代码减少

自适应和改变大小变形

需要使用左右滚动条

宽度使用百分比

页面的最外层设置一个像素的宽度

自适应：media

图片默认是有边框的，IE会显示出来，这个要注意将边框改为0

css补充

position：

fixed =》固定在某个位置，这个是相对位置

  <!--
    position: fixed;固定位置
    bottom:20px;离底部20像素
    right: 20px;离右边20像素 
    -->
    <div onclick="GoTop();" style=" 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom:20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>

固定右下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        position: fixed;
            top:0;离上方0像素
            right: 0;离右边0像素
            left: 0;离左边0像素
        */
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        /*
         margin-top: 50px;与上标签间隔50像素，这样就不会被上面覆盖
        */
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

固定上方

relative+absolute;绝对位置，固定了就不会变化（单独relative是没有效果的）

只有absolute的时候，第一次会定位，可以在指定位置，滚轮滚动时，不在了

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

    <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left:0;bottom:0; 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;bottom:0; 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;top:0; 50px;height: 50px;background-color: black;"></div>
    </div>
</body>
</html>

相对位置

opcity:0.5 透明度

z-index：层级顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <!-- display:none;
        默认隐藏起来了

        <div style="display:none;z-index:10;

        -->
        <div style="z-index:10;
        position: fixed;
        top: 50%;
        left:50%;
        margin-left: -250px;
        margin-top: -200px;
        background-color:white;
        height: 400px;
        500px; ">


        <input type="text" />
        <input type="text" />
        <input type="text" />

    </div>
<!--
    <div style="display:none;z-index:9; position: fixed;background-color: black;
    -->
        <div style="z-index:9; position: fixed;background-color: black;

    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    "></div>

    <div style="height: 5000px;background-color: green;">
        asdfasdf
    </div>
</body>
</html>

View Code

overflow

overflow: auto超过范围就出现滚动条

overflow: hidden 超过范围就隐藏起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    overflow: auto超过范围就出现滚动条
-->
    <div style="height: 200px; 300px;overflow: auto">
        <img src="1.jpg">
    </div>
<!--
    overflow: hidden 超过范围就隐藏起来
-->
    <div style="height: 200px; 300px;overflow: hidden">
        <img src="1.jpg">
    </div>
</body>
</html>

overflow

hover：当鼠标移动到当前标签上时，才会生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        /*
        margin-top: 50px;往下走50像素，防止被上面的覆盖
        */
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        /*
         padding: 上 右 下 左
        */
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>

hover

.pg-header .menu:hover{
    background-color: blue;
}

background


<div style="background-image: url(icon_18_118.png)"></div>

默认div足够大的时候，图片会重复放（这样可以用很小的图片做出渐变颜色）

backgroud-repeat：no-repeat这样就能让图片不同行堆叠

backgroud-repeat：repeat-x 横向堆叠

backgroud-repeat：repeat-y 竖向堆叠

backgroud-position ；0px 0px

backgroud-position-x:0px 默认为0，

backgroud-position-y:0px 默认为0

当然，可以直接backgroud后面直接加值的简写

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 100px;"></div>
    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;20px;border: 1px solid red;"></div>
</body>
</html>

background

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

    <div style="height: 35px; 400px;position: relative;">
        <input type="text" style="height: 35px; 400px;" />
        <!--  span是内联标签，默认高度宽度没用，所以加上display: inline-block;将其变成拥有块级标签的属性
        然后利用外层的position: relative + 内层的position:absolute实现内标签相对于外标签的位置
        -->
        <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px; 16px;display: inline-block;"></span>
    </div>
</body>
</html>

文本显示图片

补充：页面布局
主站

后台管理布局：

左侧菜单跟随滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理页面</title>

    <style>
        /*
        margin: 0;去掉边框间距
        */
        body{
            margin: 0;
        }
        /*
        设定公共样式，需要的时候，加上样式即可，不需要重复写
        */

        .left{
            float: left;
        }

        .right{
            float: right;
        }

        /*
        头部菜单样式
        */
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }

        /*
        中间页面样式
        position: absolute;固定标签，与position：relative配合使用
            top: 48px;
            left:0;
            bottom: 0;
             200px;
            background-color: #dddddd;

        */
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left:0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
/*
        中间页面样式

         overflow: auto;增加滚动条
        */
        .pg-content .content{
            position: absolute;
            top: 48px;
            right:0;
            bottom:0;
            left: 200px;
            /*overflow: auto;*/

        }


    </style>
</head>
<body>
    <!-- 头页面-->
    <div class="pg-header"></div>

    <!-- 中间页面-->
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <div style="position: fixed;bottom: 0;right: 0; 50px;height: 50px;">返回顶部</div>

            <div style="margin: 0;background-color: purple">
                <p style="margin: 0">ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
            </div>
        </div>
    </div>


    <!-- 底部页面-->
    <div class="pg-footer"></div>


</body>
</html>

布局一

左侧以及上不动（这个布局用的较多）布局二比布局一多了overflow: auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理页面</title>

    <style>
        /*
        margin: 0;去掉边框间距
        */
        body{
            margin: 0;
        }
        /*
        设定公共样式，需要的时候，加上样式即可，不需要重复写
        */

        .left{
            float: left;
        }

        .right{
            float: right;
        }

        /*
        头部菜单样式
        */
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }

        /*
        中间页面样式
        position: absolute;固定标签，与position：relative配合使用
            top: 48px;
            left:0;
            bottom: 0;
             200px;
            background-color: #dddddd;

        */
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left:0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
/*
        中间页面样式

         overflow: auto;增加滚动条
        */
        .pg-content .content{
            position: absolute;
            top: 48px;
            right:0;
            bottom:0;
            left: 200px;
            overflow: auto;

        }


    </style>
</head>
<body>
    <!-- 头页面-->
    <div class="pg-header"></div>

    <!-- 中间页面-->
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <div style="position: fixed;bottom: 0;right: 0; 50px;height: 50px;">返回顶部</div>

            <div style="margin: 0;background-color: purple">
                <p style="margin: 0">ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
                <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p>
            </div>
        </div>
    </div>


    <!-- 底部页面-->
    <div class="pg-footer"></div>


</body>
</html>

布局二

查看全文

相关阅读:
刷皇室成员
 python 2.7中matplotlib的所有版本
 Linux命令使用时路径存在空格、特殊符号
 路径名太长导致无法读取文件
 谷歌浏览器打包插件
 Upload 上载新生
 Linux的终端（base），进入base环境
 Ubuntu16.04系统语言设置为中文以及搜狗输入法的安装
 R语言3D图导出矢量图有bug
将本地文件复制到hadoop文件系统

原文地址：https://www.cnblogs.com/cheng662540/p/9265219.html