2）前端的css排版布局

服务端 2018-07-06 10:44:39 阅读次数: 0

回顾重点：

 

 图片1.png

伪元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:first-letter{
            color: red;
        }
    </style>
</head>
<body>
<p>李晓峰</p>
</body>
</html>

 图片2.png

 

在名字前面加字段博客作者：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:first-letter{
            color: red;
        }
        p:before{
            content: '博客作者'
        }
    </style>
</head>
<body>
<p>李晓峰</p>
</body>
</html>

 

 图片3.png

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p::first-letter{
            color: red;
        }
        p::before{
            content: '博客作者';
        }
        p::after{
            content: '.';
        }
    </style>
</head>
<body>
<p>李晓峰</p>
</body>
</html>

 图片4.png

 

p::after{
    content: '.';
    /*设置成块标签*/
    display: block;
    width: 100px;
    height: 100px;
    background-color: green;
}

 图片5.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p::first-letter{
            color: red;
        }
        p::before{
            content: '博客作者';
        }
        p::after{
            content: '.';
            /*设置成块标签*/
            display: block;
            /*width: 100px;*/
            /*height: 100px;*/
            /*background-color: green;*/
            /*visibility: hidden;*/
        }
    </style>
</head>
<body>
<p>李晓峰</p>
<div>nginx</div>
</body>
</html>

 

图片6.png

 

解决浮动带来的问题：

p::after{
    content: '.';
    /*设置成块标签*/
    display: block;
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: green;*/
    visibility: hidden;
    height:0;
}

 

 图片7.png

文字在中间显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        div p{
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <p>
        德国
    </p>
</div>
<p>sss</p>
</body>
</html>

 图片8.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        div p{
            color: red;
            width: 100px;
            font-size: 20px;
            background-color: green;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div>
    <p>
        德国
    </p>
</div>
</body>
</html>

 图片9.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        div {
            color: red;
            width: 200px;
            background-color: green;
            text-align: center;
            line-height: 100px;
        }
        p{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <p>
        德国
    </p>
</div>
</body>
</html>

图片10.png 

（1）css的继承性：

继承来的属性权重为0，如果权重都为0，谁描述的近谁优先

#tt{}

.active{}


继承和权重


记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

 

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

盒模型：

 图片11.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
        }
    </style>
</head>
<body>
<div>

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

 图片12.png

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10pxb solid red;

举例：

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 50px;
        border-top: 10px solid grey;

</style>

 图片13.png

 

Margin:(填坑)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box">

</div>
<div class="box2"></div>
</body>
</html>

 图片14.png

 

Margin 塌陷：

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 50px;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-top: 100px;
    }
</style>

 图片15.png

span{
    background-color: #0000CC        }
.t{
    margin-right: 50px;
}
.f{
    margin-left: 30px;
}

 图片16.png

注：：要写垂直距离在一个上面写不要写两个，水平的没问题

 

 

 

标准文档流：

（1）空白折叠现象

（2）高矮不齐，底边对齐

（3）自动换行，一行写不满，换行写

 

图片17.png 

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0px;
        }
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
<div class="box3">

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

 图片18.png

 

    *{
        padding: 0;
        margin: 0px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: red;
        float: left;
    }
    .box2{
        background-color: green;
        width: 230px;
    }
    .box3{
        background-color: yellow;
    }
</style>

 

 图片19.png

 

<style type="text/css">
    *{
        padding: 0;
        margin: 0px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: red;
        float: left;
    }
    .box2{
        background-color: green;
        width: 230px;
        float: left;
    }
    .box3{
        background-color: yellow;
        height: 230px;
    }
</style>

 

 图片20.png

贴边现象：

<style type="text/css">
    *{
        padding: 0;
        margin: 0px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: red;
        float: left;
        height: 300px;
    }
    .box2{
        background-color: green;
        width: 230px;
        float: left;
    }
    .box3{
        background-color: yellow;
        height: 230px;
        float: left;
    }
</style>

 

图片21.png

图片22.png图片23.png

浮动的好处：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0;
        }
        .father{
            width: 1210px;
            height: 300px;
            margin: 0 auto;
            background-color: black;
        }
        .box1{
            background-color: red;
            height: 300px;
            width: 200px;
            float: left;
        }
        .box2{
            background-color: yellow;
            height: 230px;
            width: 200px;
            float: right;
        }
        .box3{
            background-color: green;
            height: 200px;
            width: 200px;
            margin: 0 auto;

        }
        .active{
            width: 1210px;
            height: 300px;
            background-color: purple;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1">
    1
</div>
<div class="box2">
    2
</div>
<div class="box3">
    3
</div>

</div>
<div class="active"></div>
</body>
</html>

 

 图片24.png

Overflow：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow:scroll;
        }
    </style>
</head>
<body>
<div>文字文字文字文字文字文字文字文字文字文字文
    字文字文字文字文字文字文字文字文字文字文字文字
    字文字文字文字文字文字文字文字文字文字文字文字
    字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
</html>

 

图片25.png 

图片26.png

 

Margin:

 

 

如果漂浮的盒子不存在margin的塌陷

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
*{
    padding:0;
    margin: 0px;
}
        .head{
            width: 100%;
            height: 80px;
            background-color:black;
            padding-top: 20px;
        }
        .container{
            width: 1210px;
            margin: 0 auto;
            background-color: deeppink;

        }
        .head .logo{
            width: 50px;
            height: 50px;
            background-color:#ff6700;

        }
    </style>
</head>
<body>
<div class="head">
    <div class="container">
        <div class="logo">

        </div>
    </div>
</div>

</body>
</html>

 

 图片27.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
*{
    padding:0;
    margin: 0px;
}
        .head{
            width: 100%;
            height: 100px;
            background-color:black;
            /*padding-top: 20px;*/
        }
        .container{
            width: 1210px;
            margin: 0 auto;
            background-color:lawngreen;

        }
        .head .logo{
            width: 50px;
            height: 50px;
            background-color:#ff6700;
            float: left;
            margin-top: 20px;

        }
    </style>
</head>
<body>
<div class="head">
    <div class="container">
        <div class="logo">

        </div>
    </div>
</div>

</body>
</html>

 图片28.png

总结漂浮的盒子是不能够margin 0 auto居中的

 

添加：

font-size: 30px;

调整字体大小

list-style: none;

去除圆点的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            font-size: 30px;
            /*开头空两个字符*/
            text-indent: 2em;
            /*加下滑线*/
            text-decoration: underline;
            /*变成小手*/
            cursor: pointer;
            /*高度居中*/
            line-height: 40px;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    aaaddddf fdsfdsafsa efadsafasdf
</div>
</body>
</html>

 

border-radius: 50px;

这个是用来切园的  可以100% 或者50%

图片29.png

Background 颜色：

 

Rgb表示法、十六进制表示法

 

Rgb：红色、蓝色、绿色 三种原色组成

color: rgb(220,0,110);

 

图片30.png

图片31.png

图片平铺：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            width: 1200px;
            height: 1000px;
            background-image: url("./jieyi.jpg");
        }
    </style>
</head>
<body>
<div class="jieyi">
    
</div>
</body>
</html>

图片32.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            width: 1200px;
            height: 1000px;
            background-image: url("./jieyi.jpg");
            /*不平埔 */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="jieyi">
    
</div>
</body>
</html>

 图片33.png

这个就是精灵图技术：

 

接下来切割圆形头像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            border: 1px solid red;
            /*想左和上面移动剩下的数值*/
            width: 200px;
            height: 200px;
            background-image: url("./jieyi.jpg");
            /*不平埔 */
            background-repeat: no-repeat;
            /*想左和上面移动的px*/
            background-position: -180px -100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="jieyi">
    
</div>
</body>
</html>

 图片34.png

可以动态的去调整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            border: 1px solid red;
            /*想左和上面移动剩下的数值*/
            width: 200px;
            height: 200px;
            background-image: url("./jieyi.jpg");
            /*不平埔 */
            background-repeat: no-repeat;
            /*想左和上面移动的px*/
            /*background-position: -180px -100px;*/
            border-radius: 50%;
            background-attachment: fixed;
            margin-left: 150px;
            margin-top: 150px;
        }
    </style>
</head>
<body style="height: 2000px; width: 2000px">
<div class="jieyi">
    
</div>
</body>
</html>

 

 图片35.png

 

www.iconfont.cn 阿里巴巴图标库中选择图标

 

 图片36.png

选择要使用的图标：

 图片37.png

然后在购物车中选择：

 图片38.png

然后会出现：

 图片39.png

编写项目名称：

 图片40.png

再到代码应用中去：

图片41.png 

Unicode的引用：

 

 图片42.png图片43.png

将图片下载到本地：

图片44.png 

下载之后 解压到使用连接的目录下面：

 图片45.png

上面的散步，不过要修改一下啊在前面加上./font目录去连接图片

 图片46.png

 

 图片47.png

查看一下：

 图片48.png

优化一下：

 

 图片49.png

图片50.png

 

在一次优化

 

 图片51.png


 图片52.png

另外这里有在线连接，但是每次如果加了图片或者减少图片需要更新在线连接：

 

 图片53.png

 图片54.png

 图片55.png

 


猜你喜欢

转载自blog.51cto.com/xiaorenwutest/2136997
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022