HTML5+CSS3综合案例-网页布局（浮动）

Dowen00

已于 2023-03-14 00:41:14 修改

阅读量349

点赞数

文章标签： css3 html5 css Powered by 金山文档

于 2023-03-13 16:35:31 首次发布

本文链接：https://blog.csdn.net/m0_63171030/article/details/129497684

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米布局</title>
    <style>
        * {
        margin: 0;
        position: 0;
        }
        .top{
            height: 40px;
            background-color: #333;
        }
        .header {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .content {
            width: 1226px;
            height: 460px;
            background-color: #fff;
            margin: 0 auto;
        }
        .lift {
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }
        .right {
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
            float: right;
        }
    </style>
</head>
<body>
    <!-- 通栏的盒子：宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="lift"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

运行结果：

左右结构+li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 0 auto;

            width: 1226px;
            height: 614px;
            background-color: #fff;
        }
        .lift {
            width: 234px;
            height: 614px;
            background-color: #800080;
            float: left;
        }
        .right {
            width: 978px;
            height: 614px;
            background-color: #fff;
            float: right;
        }
        ul {
            /* 去掉列表的符号 */
           list-style: none; 
        }
        .right li {
            float: left;

            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }
        /* 第四个li和第八个li右侧间距清除 */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
        .right li:nth-child(n+5) {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="lift"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

运行结果

导航：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav{
            margin: 50px auto;

            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        ul{
            list-style: none;
        }
        .nav li {
            float: left; 
        }
        .nav li a {
            /* 1.浮动/背景色 */
            display: block;
            /* 2.盒子模型 */
            width: 80px;
            height: 50px;
            /* 3.文字样式 */
            text-align: center;
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        }
        .nav li a:hover{
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- nav:导航 -->
    <div class="nav">
       <ul>
           <li><a href="#">新闻1</a></li>
           <li><a href="#">新闻2</a></li>
           <li><a href="#">新闻3</a></li>
           <li><a href="#">新闻4</a></li>
           <li><a href="#">新闻5</a></li>
           <li><a href="#">新闻6</a></li>
           <li><a href="#">新闻7</a></li>
           <li><a href="#">新闻8</a></li>
       </ul>
    </div>  
</body>
</html>

运行结果：