当前位置：首页 > article >正文

【前端基础】Day 5 CSS浮动

article 2025/3/1 15:36:55

目录

1. 浮动

1.1 标准流（普通流/文档流）

1.2 浮动

1.2.1 浮动的特性

1.2.2 浮动元素常和标准流父级搭配使用

1.2.3 案例

2. 常见网页布局

2.1 常见网页布局

2.2 浮动布局注意点

3. 清除浮动

3.1 原因

3.2 清除浮动的本质

3.3 清除浮动的方法

3.3.1 额外标签法

3.3.2 父级添加overflow

3.3.3 after 伪元素法

3.3.4 双伪元素清除浮动

3.3.5 总结

4. PS 切图

5. 学成在线案例

CSS 属性书写顺序

页面布局整体思路

头部制作

1. 浮动

1.1 标准流（普通流/文档流）

1.2 浮动

1.2.1 浮动的特性

1. 脱标

2. 行内显示并且顶端对齐

行内块元素间有缝隙

3. 浮动的元素具有行内块元素的特性

1.2.2 浮动元素常和标准流父级搭配使用

摆放盒子：先大小后位置

1.2.3 案例

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;

        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: right;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        li {
            float: left;
            width: 234px;
            height: 300px;
            background-color: #fff;
            list-style: none;
            margin-left: 14px;
            margin-bottom: 14px;
        }

        li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li><img src="../img1.jpg"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

</html>

2. 常见网页布局

2.1 常见网页布局

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            height: 300px;
            width: 980px;
            background-color: pink;
            margin: 0 auto;
        }

        li {
            list-style: none;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子（和浏览器一样宽）不需要指定宽 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

2.2 浮动布局注意点

3. 清除浮动

3.1 原因

3.2 清除浮动的本质

3.3 清除浮动的方法

3.3.1 额外标签法

3.3.2 父级添加overflow

3.3.3 after 伪元素法

3.3.4 双伪元素清除浮动

3.3.5 总结

4. PS 切图

4.1 常见图片格式

4.2 图层切图

4.3 切片切图

4.4 PS 插件切图

5. 学成在线案例

准备工作

CSS 属性书写顺序

页面布局整体思路

头部制作

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 1.头部区域 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="logo.png">
        </div>
        <!-- 导航栏部分 nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="user.png" alt="">
            qq-lilei
        </div>
    </div>
    <!-- 2.banner部分 -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">后端开发<span>></span></a></li>
                    <li><a href="#">移动开发<span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">商业预测<span>></span></a></li>
                    <li><a href="#">云计算&大数据<span>></span></a></li>
                    <li><a href="#">运维&测试<span>></span></a></li>
                    <li><a href="#">UI设计<span>></span></a></li>
                    <li><a href="#">产品<span>></span></a></li>
                </ul>
            </div>
            <!-- 课程表模块 -->
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语义设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语义设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语义设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 3.精品推荐模块 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 4.box核心内容其余 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
                <li>
                    <img src="pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> • 1125人在学习</div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 5.footer 模块 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载APP</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>

CSS代码

* {
    margin: 0;
    padding: 0;
}

.w {
    width: 1200px;
    margin: auto;
}

body {
    background-color: #f3f5f7;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 清除浮动带来的影响 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.header {
    height: 42px;
    margin: 30px auto;
}

.logo {
    float: left;
    width: 198px;
    height: 42px;
}

.nav {
    float: left;
    margin-left: 60px;
}

.nav ul li {
    float: left;
    margin: 0 15px;
}

.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}

.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}

.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}

.search input {
    /* input 和button都是行内块元素，行内块元素间默认有缝隙 */
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: none;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}

.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮button默认有个边框需要手动去除 */
    border: 0;
    background-image: url(btn.png);
}

.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

.banner {
    height: 421px;
    background-color: #1c036c;
}

.banner .w {
    height: 421px;
    background: url(banner2.png) no-repeat top center;
}

.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0, 0, 0, 0.3);
}

.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.subnav ul li a {
    font-size: 14px;
    color: #fff;

}

.subnav ul li a span {
    float: right
}

.subnav ul li a:hover {
    color: #00a4ff;
}

.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 50px;
}

.course h2 {
    height: 42px;
    background-color: #9bceea;
    text-align: center;
    line-height: 42px;
    color: #fff;
}

.bd {
    padding: 0 20px;
}

.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}

.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}

.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}

.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}

/* 精品推荐模块 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
    /* 行高会被继承 */
    line-height: 60px;
}

.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul {
    float: left;
    margin-left: 30px;
}

.goods ul li {
    float: left;
}

.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}

.mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}

.box {
    margin-top: 30px;

}

.box-hd {
    height: 45px;
}

.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}

.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}

.box-bd ul {
    width: 1225px;
}

/* 让li的父亲.box-bd ul足够宽能够一行装下5个盒子则无需换行 */
.box ul li {
    float: left;
    width: 228px;
    height: 270px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.box-bd ul li img {
    width: 100%;
}

.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}

.box-bd .info span {
    color: #ff7c2d;
}

.footer {
    height: 415px;
    background-color: #fff;
}

.footer .w {
    padding-top: 35px;
}

.copyright {
    float: left;
}

.copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}

.copyright .app {
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
    font-size: 16px;
}

.links {
    float: right;
}

.links dl {
    float: left;
    margin-left: 100px;
}

.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.links dl dd a {
    color: #333;
    font-size: 12px;
}

http://www.kler.cn/a/566114.html

相关文章：

行为型模式 - 状态模式 (State Pattern)

springBean介绍

TCP，http，WebSocket

errorstack ORA-01466 flashback query expdp scn 都有这个问题

2-3文件的属性信息

中英文多商家电商系统对东南亚国家电商的助力作用

实现实时数据仓库开源项目

图数据库Neo4j面试内容整理-Cypher 查询优化

Redis---缓存穿透，雪崩，击穿

算法-二叉树篇14-从中序与后序遍历序列构造二叉树

【Linux系统编程】基础IO--磁盘文件

当AI重构认知：技术狂潮下的教育沉思录

C++ Primer 关联容器概述

2. EXCEL中函数和公式《AI赋能Excel》

飞书工单审批对接腾讯电子签：开启合同流程自动化新时代

Jmeter基础知识总结

Graphics View画一个可调速的风机(pyqt)

Android SystemUI开发（一）

C#高级：结合Linq的SelectMany方法实现笛卡尔积效果

上海市计算机学会竞赛平台2024年4月月赛丙组排序分数