网页制作之CSS篇

于 2020-07-21 15:23:24 发布
阅读量590 收藏 2
点赞数
分类专栏： 网页制作 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuefeng/article/details/107489333
版权

  1. 标签的style属性

  2. 写在head里面，style标签中写样式

             -   id选择器
             #i1{
                 ...
             }
             为所有ID为i1的标签加上上面的样式
         -   class选择器
             .c1{
                 ...
             }
             为所有class为c1的标签添加上面的样式
         -   标签选择器
             div{
                 ...
             }
             为所有的div标签添加上面的样式
         -   层级选择器
             div input{
                 ...
             }
             为所有在div标签内部的input标签添加上面的样式
         -   属性选择器
             .c1[n="3"]{
                 ...
             }
             为所有的属于class为c1且属性n为5的标签添加上面的样式
         -   组合选择器
             #i1,.c1,input{
                 ...
             }
             为所有的id为i1和class为c1和input标签添加上面的样式
             PS:
                 优先级，标签中的style优先级最高，其次就近原则
         -   还可以将style样式写在一个CSS文件中，用link标签进行引用
             <link rel="" href="common.css"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*#i1{*/
        /*    background-color: black;*/
        /*    color: red;*/
        /*}*/
        /*.c1{*/
        /*    background-color: aliceblue;*/
        /*    color: red;*/
        /*}*/
        /*input[n="5"]{*/
        /*    background-color: brown;*/
        /*    color: red;*/
        /*}*/
        #i2,#i3{
            background-color: aqua;
            color: red;
        }
        div #i6{
            background-color: aquamarine;
            color: red;
        }
    </style>
</head>
<body>
    <div style="background-color: red;height: 90px;">
        hello,world!
    </div>
    <input id="i1" type="text">
    <input id="i2" type="text" n="5">
    <input id="i3" type="text">
    <input class="c1" type="text">
    <input class="c1" type="text">
    <input class="c1" type="button">
    <div>
        <input id="i6" type="text">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/common.css">
</head>
<body>
    <div class="c1 c2">Hello world!</div>
    <div class="c1 c2">Hello world!</div>
    <div class="c1 c2">Hello world!</div>
    <div class="c3 c2">Hello world!</div>
    <div class="c1 c2">Hello world!</div>
</body>
</html>

//common.css文件
.c1{
    background-color: aqua;
    color: red;
}
.c2{
    font-size: 30px;
}

  1. 添加注释

            /* */

  2. float

            飘，两个div能够在同一行上
        当存在嵌套时，在子标签最后添加一个下面的标签，使之完全显示父标签
        <div style="clear:both;"></div>

  3. display

             后天改造标签类型：行内标签与块级标签
         inline          行内标签    无法设置高度，宽度，padding margin
         block           块级标签    设置高度，宽度，padding margin
         inline-block    集合标签    具有两重属性
         none            隐藏标签    让标签消失

  4. padding margin(0,auto)

            边距：
            padding 内边距
            margin  外边距
        auto    将标签的内容居中

  5. text_align, 水平居中

            height，         高度
        width，          宽度
        line-height,    垂直居中
        color,          字体颜色
        font-size,      字体大小
        font-weight，    字体粗细
        border:1px solid red 边框粗细，实线还是虚线，颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border:1px dotted red;
    height: 50px;
    width: 80%;
    color: red;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    font-weight: bold;"
    >
        Hello world!
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0">
    <div style="line-height:38px;background-color:#dddd;height:38px;border: 1px solid black">
        <div style="float: left;">收藏网址</div>
        <div style="float: right;">退出</div>
        <div style="float: right;">登录</div>
    </div>
    <div style="height:800px;border: 1px solid black">
        <div style="margin:3px;width: 18%;height:790px;float: left;border: 1px solid red;"></div>
        <div style="margin:3px;width: 78%;height:790px;float: right;border: 1px solid red;">
            <div style="margin: 2px;width: 33%;height: 31%;border: 1px solid red;float: left;"></div>
            <div style="margin: 2px;width: 33%;height: 31%;border: 1px solid red;float: left;"></div>
            <div style="margin: 2px;width: 32%;height: 31%;border: 1px solid red;float:left;"></div>
            <div style="margin: 2px;width: 32%;height: 31%;border: 1px solid red;float:left;"></div>
            <div style="margin: 2px;width: 32%;height: 31%;border: 1px solid red;float:left;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

  1. position：

         fix 固定在页面的某一个位置

     relative与absolute搭配着使用,里面的标签页是在外面的标签页的基础上进行定位的
         <div style="position:relative;">
             <div style="position:absolute;">
             </div>
         </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            background-color: red;
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height:5000px;
            margin-top: 51px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">
        <div style="height: 200px;
                    width: 200px;
                    margin: 0 auto;
                    position: relative;
                    background-color: black
        ">
            <div style="background-color: white;
                        margin: 0 auto;
                        height: 20px;
                        width: 100px;
                        position: absolute;"
                 >
                Hello world!
            </div>
        </div>
    </div>
    <div οnclick="GoTop();"
         style="
        width: 40px;
        height: 50px;
        background-color: black;
        color: white;
        position: fixed;
        right: 10px;
        bottom: 10px;"
         >
        返回顶部
    </div>
    <script>
        function GoTop() {
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

  1. onclick属性设置 回到顶部

             onclick="GoTop();"
         <script>
             function GoTop(){
                 document.body.scrollTop=0;
             }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div οnclick="GoTop();" style="height: 100px;width:100px;background-color: black;color: white;position: fixed;
    right: 20px;
    bottom: 20px;">
        返回顶部
    </div>
    <div style="height: 5000px;background-color: #dddddd">
    </div>
    <script>
        function GoTop() {
            document.body.scrollTop=0;
        }
    </script>
</body>
</html>
  1. opacity 设置透明度
  2. z-index 设置层数优先级，越大优先级越高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="z-index:1;background-color:#dddddd; height: 900px;width: 100%;">
        第一层
    </div>
    <div style="z-index:2;background-color: red;height: 100px;width: 100px;position: fixed;top: 50%;left: 50%;
                margin-left: -50px;margin-top: -50px;">
        第二层
    </div>
    <div style="z-index:3;background-color:black;height: 50px;width: 50px;position: fixed;top: 50%;left: 50%;
                margin-left: -25px;margin-top: -25px;opacity:0.5;color: white">
        第三层
    </div>
</body>
</html>

  1. 将fixed位置固定的标签居于页面中心

        <div style="height:50px;width:50px;
                position:fixed;top:50%;left:50%;
                margin-left=-25px;margin=-25px;">
    </div>

<!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: #382eff;
            line-height: 48px;
        }
        .pg_body{
            margin-top: 50px;
        }
        .w{
            width: 960px;
            margin: 0 auto;
        }
        .pg_header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        .pg_header menu:hover{
            background-color: red;
            color: red;
        }
    </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>
</body>
</html>

  1. overflow标签

            auto属性，当外标签小于内标签的大小时，会形成进度条
        hidden属性，当外标签小于内标签大小时，会将多余的部分隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 500px;width: 700px;overflow: auto;">
        <img src="../../Day_14/HTML/1.jpg">
    </div>
    <div style="height: 500px;width: 700px;overflow: hidden;">
        <img src="../../Day_14/HTML/1.jpg">
    </div>
    <div style="height: 500px;width: 700px;overflow: fragments;">
        <img src="../../Day_14/HTML/1.jpg">
    </div>
</body>
</html>

  1. hover

    .menu:hover{
    background-color:white;
}
只有当鼠标移动到该标签时才会匹配相应的背景颜色

  2. background属性：

    background-image:url("图片路径")
    当标签远远比图片大时，图片会复制成多个占用整个空间
background-repeat:repeat-x/repeat-y/no-repeat
    分别表示图片横向复制或纵向复制或不堆叠
background-position-x:10px;
background-position-y:10px;
background-position:10px 10px;
上面的一系列操作等同于---->
background:url() 10px 10px norepeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position:relative; height: 70px;width: 700px;border: 1px solid red;">
        <input type="text" style="font-size:50px;height: 66px;width: 600px;padding-right: 96px;display: inline-block" />
        <span style="background-image:url('i_name.png');position: absolute;right: 10px;top: 0;height: 65px;width: 57px;display: inline-block;">
        </span>
<!--        <div style="clear: both"></div>-->
    </div>
</body>
</html>

网页模板

BootStrap
百度搜
Xue__Feng
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值