DIV+CSS页面基本布局总结
<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">DIV+CSS布局是前端最为<span style="color: black;">基本</span>的知识，而<span style="color: black;">此刻</span>网络上最为<span style="color: black;">广泛</span>的有一列，两列，三列，窗格式布局以及自适应布局等等。</p>在<span style="color: black;">咱们</span>熟悉了html布局之后，经常会<span style="color: black;">选择</span>能够满足当前自己需求的排版布局或习惯性<span style="color: black;">选择</span>自己常用的布局方式，有时候我<span style="color: black;">发掘</span>能满足我某个时刻需求的网页布局<span style="color: black;">常常</span>是我习惯常用的，但不<span style="color: black;">必定</span>是更好更适合的布局，<span style="color: black;">因此</span>我就想回到最初，把最<span style="color: black;">基本</span>的页面布局总结一下，<span style="color: black;">能够</span>供入门的新手<span style="color: black;">认识</span>一下，我认为多对<span style="color: black;">有些</span><span style="color: black;">基本</span>知识点多总结多<span style="color: black;">认识</span><span style="color: black;">无</span>坏处。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1.固定宽度布局</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一列水平居中布局</p>一列的宽度固定为已知值，<span style="color: black;">运用</span>margin设置来达到水平居中效果。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">html代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title>一列水平居中布局</title>
<meta charset="utf-8">
</head>
<body>
<div class="one-center-col">一列布局</div>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
.one-center-col {
width: 1000px;
height: 700px;
bac<span style="color: black;">公斤</span>round-color: grey;
margin: 0 auto;
}
</style></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-76cb8690144d9836f2067271bf27ab69_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">image</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中<span style="color: black;">针对</span>宽度固定的元素，只<span style="color: black;">必须</span>设置该元素的css样式(margin:0 auto;)就<span style="color: black;">能够</span>实现让该元素在其父元素的宽度下水平居中对齐<span style="color: black;">表示</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">两列布局（浮动）</p>网页布局<span style="color: black;">平常</span><span style="color: black;">上下</span>两列布局，<span style="color: black;">倘若</span>已知<span style="color: black;">上下</span>两列的宽度是固定值，则<span style="color: black;">能够</span><span style="color: black;">运用</span>float浮动方式完成基本布局排版。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">html代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="container">
<div class="leftbox">左侧列</div>
<div class="rightbox">右侧列</div>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">上下</span>列的css代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.leftbox {
width: 300px;
height: 100%;
bac<span style="color: black;">公斤</span>round-color: #aadddd;
float: left;
}
.rightbox {
width: 700px;
height: 100%;
bac<span style="color: black;">公斤</span>round-color: #f08844;
float: right;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果截图</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-8912539cf56a9dfefd8afa9019bd15cf_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">image</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">两列布局，当已知列的宽度时，<span style="color: black;">能够</span><span style="color: black;">运用</span>浮动属性来达到<span style="color: black;">上下</span>布局的</p>
论坛外链网http://www.fok120.com/ 太棒了、厉害、为你打call、点赞、非常精彩等。
页:
[1]