CSS学习笔记：一个网页布局

最新推荐文章于 2024-05-30 15:01:09 发布

「已注销」

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量152

点赞数

分类专栏： HTML JavaScript CSS

本文链接：https://blog.csdn.net/xtingjie/article/details/115413501

版权

HTML JavaScript CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

知识点

浮动：float
网页布局要素（一般有top、banner、box等）
给元素取名字
顶层大元素一般是标准流，大元素里面包着浮动元素
隐藏列表前面的小黑点：liststyle: none

代码

<!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>buju</title>
    <style>
        /* 先清除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 先设置盒子的大小，还有margin */
        .top {
            height: 90px;
            background-color: coral;
        }

        .banner {
            height: 300px;
            background-color: burlywood;
            margin: 60px 48px;
        }   

        .box {
            height: 200px;
            background-color: rgb(218, 218, 218);
            margin: 60px 48px;
        }
        /* 隐藏列表前面的小黑点 */
        li {
            list-style: none;
        }

        .listbox li {
            float: left;
            width: 15%;
            height: 180px;
            background-color: aquamarine;
            margin-left: 16px;
            margin-right: ppx;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 几个div，给每个div取个名字:top\banner\box\footer -->
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul class="listbox">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <!-- <div class="footer">footer</div> -->
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记：一个网页布局

效果图：知识点浮动：float网页布局要素（一般有top、banner、box等）给元素取名字顶层大元素一般是标准流，大元素里面包着浮动元素隐藏列表前面的小黑点：liststyle: none代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
复制链接

扫一扫