CSS笔记5

最新推荐文章于 2024-11-01 12:26:05 发布

不爱学习的nnz

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量159

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_47157937/article/details/122396271

版权

文章目录

CSS浮动（float）

CSS浮动（float）

传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置，CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）

普通流（标准流）
浮动
定位

标准流

在这里插入图片描述

浮动

浮动的特性

在这里插入图片描述

清除浮动

在这里插入图片描述

学成在线案例

在这里插入图片描述

如何将一段文字放在盒子中间：
text-align: center; （把文本排列到中间）
line-height: 63px;（和盒子高度一样高）
如何把li竖排列放在一行上：
在li里填写float: left;
如何改变字体的粗细
font-weight
在这里插入图片描述
想要图片适应盒子大小：
width: 100%;
这一部分代码：

<div class="w2">
                <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>

.footer .w .w2{
    float: right;
}
.w2 dl{
    float: left;
    margin-left: 100px;
}
.w2 dl dt{
    font-style: 16px;
    color: #333;
    margin-bottom: 5px;
}
.w2 dl dd a {
    color: #333;
    font-size: 12px;
}