首页 > 其他分享 >CSS网页布局（了解CSS各种布局只需一篇）

CSS网页布局（了解CSS各种布局只需一篇）

时间：2024-11-10 16:16:18浏览次数：3  
标签：网页 color 布局 solid rgb black background border CSS

        传统网站是采用表格进行布局的,但这种方式已经逐渐淡出设计舞台,取而代之的是符合Web 标准的 Div+CSS 布局方式。Web标准提出将网页的内容与表现分离,同时要求 HTML 文档具有良好的结构。如何进行 Div+CSS 布局,就是本章所要介绍的内容。

目录

1.两列布局 （主要用于PC端）

2.三列布局（主要用于PC端）

3.多行多列布局

4.百分百布局

5.补充（特殊选择器） 

伪类选择器 

 伪元素选择器

1.两列布局 （主要用于PC端）

 示意图

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(239, 241, 164);
            border: 5px black solid;
        }
        header{
            margin: 1%;                      
            text-align: center;
            width: 98%;
            height: 50px;
            background-color: rgb(102, 209, 233);
            border: 1px black solid;
        }
        section{
            margin: 1%;                      
            text-align: center;
            width: 98%;
            height: 500px;
            background-color: rgb(102, 209, 233);
            border: 1px black solid;
        }
        #d1{
            width: 60%;
            height: 350px;
            background-color: rgb(235, 235, 201);
            border: 1px black solid;
            float: left;
            margin-left: 20px;
        }
        #d2{
            width: 30%;
            height: 300px; 
            background-color: rgb(235, 235, 201);
            border: 1px black solid;
            float: right;
            margin-right: 20px;
        }
        footer{
            margin: 1%;                      
            text-align: center;
            width: 98%;
            height: 50px;
            background-color: rgb(102, 209, 233);
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <header>
        <p>
            hearder
        </p>
    </header>
    <section>
        <p>
            container
        </p>
        <div id="d1">
            mainBox
        </div>
        <div id="d2">
            sideBox
        </div>
    </section>
    <footer>
        <p>
            footer
        </p>
    </footer>
</body>
</html>

2.三列布局（主要用于PC端）

 示意图

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(239, 241, 164);
            border: 5px black solid;
        }
        header{
            margin: 1%;                      
            text-align: center;
            width: 98%;
            height: 50px;
            background-color: rgb(102, 209, 233);
            border: 1px black solid;
        }
        section{
            margin: 1%;                      
            text-align: center;
            width: 98%;
            height: 500px;
            background-color: rgb(102, 209, 233);
            border: 1px black solid;
        }
        #d0{
            width: 25%;
            height: 350px;
            background-color: rgb(235, 235, 201);
            border: 1px black solid;
            float: left;
            margin-left: 20px;
        }
        #d1{
            width:49%;
            height: 350px;
            background-color: rgb(235, 235, 201);
            border: 1px black solid;
            float: left;
            margin-left: 20px;
        }
        #d2{
            width: 20%;
            height: 300px; 
            background-color: rgb(235, 235, 201);
            border: 1px black solid;
            float: right;
            margin-right: 20px;
        }
        footer{
            margin: 1%;                      
            text-align: center;
            width: 98%;
            height: 50px;
            background-color: rgb(102, 209, 233);
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <header>
        <p>
            hearder
        </p>
    </header>
    <section>
        <p>
            container
        </p>
        <div id="d0">
            SubsideBox
        </div>
        <div id="d1">
            mainBox
        </div>
        <div id="d2">
            sideBox
        </div>
    </section>
    <footer>
        <p>
            footer
        </p>
    </footer>
</body>
</html>

3.多行多列布局

 示意图

实现代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典多行多列布局</title>
    <style>


        .clear_ele::after{
            content: "";  /* 这个伪元素的内容属性必须有 */
            display: block;
            clear: both;
        }

        .container{
            width: 50%;
            background-color: rgb(226, 244, 203);
            border: 6px black solid;
        }

        .container ul{
            margin: 0;
            padding: 0;
        }

        .container ul li{
            list-style: none;

            width: 20%;
            height: 150px;
            background-color: rgb(206, 141, 152);
            border: 2px rgb(117, 21, 21) solid;
            margin-right: 2%;
            margin-bottom: 2%;
            float: left;
        }

    </style>

</head>
<body>
    <section class="container">
        <ul class="clear_ele">  
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</body>
</html>

4.百分百布局

示意图

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1{
            padding: 15% 0 0;
            position: relative;
        }
        .c1 img{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <img src="../image/未标题-1.jpg">
    </div>
</body>
</html>

5.补充（特殊选择器） 

伪类选择器 

 伪类是超链接标签 <a> 的一种动态属性（虚拟属性），可以在CSS代码中通过伪类选择器对这个动态属性进行设置。

:link链接访问前的样式
:visited链接访问后的样式
:hover鼠标悬停在链接上的样式
:active链接被激活时的样式

 :active 要写在 :hover 后面，否则可能不能生效。

 示意图 

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            color: rgb(40, 84, 40);
        }
        a:visited{
            color: rgb(51, 94, 143);
        }
        a:hover{
            background-color: rgb(34, 82, 82);
            border: 3px black solid;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <p>鼠标指向<a href="#">变脸</a>看发生了什么变化</p>
</body>
</html>
 伪元素选择器

 在同一层级的所有元素中，HTML默认在所有元素的最前面有个虚拟元素 ::before ,在所有元素的最后面有个虚拟元素 ::after。

虚拟元素平时是不显现的，但可以在CSS代码中通过伪元素选择器设置虚拟元素的样式和属性。

伪元素作        用
:first-letter将特殊的样式添加到文本的首字母
:first-line将特殊的样式添加到文本的首行
:before在某元素之前插入某些内容
:after在某元素之后插入某些内容

效果图

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h4::first-letter{
            color: rgb(170, 142, 187);
            font-size: 50px;
        }
        p::first-line{
            color: rgb(170, 142, 187);
        }
    </style>
</head>
<body>
    <h4>尊贵的客户，您好！欢迎进入 H5 创新学院服务中心。</h4>
    <p>我们的服务宗旨是“品质第一，服务第一，顾客满意度最佳”，为客户创造完美的体验，携手并进，共创美好明天。<br>
        我们的服务宗旨是“品质第一，服务第一，顾客满意度最佳”，为客户创造完美的体验，携手并进，共创美好明天。<br>
        我们的服务宗旨是“品质第一，服务第一，顾客满意度最佳”，为客户创造完美的体验，携手并进，共创美好明天。
    </p>
</body>
</html>

本章内容已结束~~~ 

标签：网页,color,布局,solid,rgb,black,background,border,CSS
From： https://blog.csdn.net/2401_87257836/article/details/143470336

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99