网页布局(layout)是CSS的一个重点应用。
很多想入门前端的小伙伴一直在反馈,要怎么入门 css 呢,其实 css 布局也就那么几种
我们需要有全局思维
我们可能无法一下子就很细致地还原页面的每一个细节
但是我们至少可以把最基本的布局搭建出来,然后再慢慢打磨~
接下来拿出我的 css 布局笔记,简单阐述下3种DIV+CSS布局技术
虽然说我现在开发基本都是用 flex 啦~
接下来开始动手实践~
先搭建一个容器,我们可以把每一个div当作一个容器,存放我们需要的内容。
<div class='container'></div>
给容器设置宽高、边框方便看效果。
.container{
width: 800px;
height: 500px;
border: 2px solid red
}
消除浏览器默认的边距。
因为不同浏览器处理策略不同,有的默认间距就设为0,而有的却有默认值。
如果我们没有消除浏览器默认的边距,会造成不同浏览器下显示的有差异。
body {
margin: 0;
}
在 container 容器里面添加 column2 ,column2里面写两个div去存放左右两列布局。
<div class='container'>
<div class='column2'>
<div class='column2-1'></div>
<div class='column2-2'></div>
<div class='clear'></div>
</div>
</div>
加一些高度、宽度和颜色查看效果。
.column2 {
border: 2px solid #000
}
.column2 .column2-1 {
width: 500px;
height: 150px;
background-color: antiquewhite;
float: left;
}
.column2 .column2-2 {
width: 280px;
height: 150px;
background-color: forestgreen;
float: right;
}
// 清除浮动
.clear {
clear:both
}
在原本的代码基础上继续添加:
<div class='container'>
<div class='column2'>
<div class='column2-1'></div>
<div class='column2-2'></div>
<div class='clear'></div>
</div>
<!-- 设置三列 -->
<div class='column3 clearfix'>
<div class='column3-1'></div>
<div class='column3-2'></div>
<div class='column3-3'></div>
</div>
</div>
写对应的css,这里我们还是写一些高度,宽度和背景颜色去看效果,值得一提的是,我们利用伪元素清除浮动,注意它必须设置为块级元素。
注意:::first-line 伪元素只能应用于块级元素。
.column3 {
margin-top: 20px
}
.column3 .column3-1 {
width: 200px;
height: 150px;
background-color: fuchsia;
float: left;
}
.column3 .column3-2 {
width: 300px;
height: 150px;
background-color: rosybrown;
float: left;
margin-left: 20px;
}
.column3 .column3-3 {
width: 260px;
height: 150px;
background-color: aqua;
float: left;
margin-left: 20px;
}
/* 利用伪元素清除浮动 */
.clearfix::after {
content: '';
display: block;/* 必须设置为块级元素 */
clear: both
}
设置一行多列,多行多列
使用 ui 无序列表来完成
<div class='column-n clearfix'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css使用list-style: none;
设置列表项目样式为不使用项目符号。
.column-n ul {
background: darkgreen;
}
.column-n ul li {
/* border: 1px solid firebrick; */
width: 140px;
margin: 10px;
height: 70px;
background: greenyellow;
float: left;
}
body ul{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
不过我最经常使用的还是 flex,下次有时间可以用 flex 实现一下。
全部源码:
<!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 type='text/css'>
/* 消除默认的边距 */
body ul{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container{
width: 800px;
height: 500px;
/* border: 2px solid red */
}
.column2 {
/* border: 2px solid #000 */
}
.column2 .column2-1 {
width: 500px;
height: 150px;
background-color: antiquewhite;
float: left;
}
.column2 .column2-2 {
width: 280px;
height: 150px;
background-color: forestgreen;
float: right;
}
.clear {
clear:both
}
.column3 {
margin-top: 20px
}
.column3 .column3-1 {
width: 200px;
height: 150px;
background-color: fuchsia;
float: left;
}
.column3 .column3-2 {
width: 300px;
height: 150px;
background-color: rosybrown;
float: left;
margin-left: 20px;
}
.column3 .column3-3 {
width: 260px;
height: 150px;
background-color: aqua;
float: left;
margin-left: 20px;
}
/* 利用伪元素清除浮动 */
.clearfix::after {
content: '';
display: block;/* 必须设置为块级元素 */
clear: both
}
.column-n {
/* border: 1px solid rebeccapurple; */
}
.column-n ul {
background: darkgreen;
}
.column-n ul li {
/* border: 1px solid firebrick; */
width: 140px;
margin: 10px;
height: 70px;
background: greenyellow;
float: left;
}
</style>
</head>
<body>
<!-- 3种DIV+CSS布局技术
(1)左右两列布局
(2)1行3列
(3)1行多列或多行多列布局 -->
<div class='container'>
<div class='column2'>
<div class='column2-1'></div>
<div class='column2-2'></div>
<div class='clear'></div>
</div>
<!-- 设置三列 -->
<div class='column3 clearfix'>
<div class='column3-1'></div>
<div class='column3-2'></div>
<div class='column3-3'></div>
</div>
<!-- 设置一行多列,多行多列 -->
<!-- 使用 ui 无序列表来完成 -->
<div class='column-n clearfix'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
不要害怕重新开始。
因为这一次,你不是从头开始,而是从经验开始。
下次见~
联系客服