CSS页面布局方式
css页面布局方式
1.标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标准流: 行内的一排一排摆放. 块级的自动换行*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.box3 {
background-color: black;
}
.box4 {
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
11111
</div>
<div class="box2">22222</div>
<span class="box3">3333</span>
<span class="box4">44444</span>
</body>
</html>
2.浮动流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
浮动流是一种半脱离文档流的一种方式:
1. 什么是脱离文档流:
不在受块级or行级的限制. 都可以设置width和height
2. 什么是半脱离:
是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
（1）同一个方向上谁先浮动，谁在前面
（2）不同方向上左浮动找左浮动，右浮动找右浮动
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
/*浮动流不能居中显示*/
margin: 0 auto;
}
.box2 {
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<span class="box1">32113123</span>
<div class="box2"></div>
</body>
</html>
3.浮动流案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: purple;
float: right;
}
.box4 {
width: 400px;
height: 400px;
background-color: pink;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
4.浮动流的贴靠问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 50px;
height: 50px;
background-color: red;
}
.box2 {
width: 800px;
height: 800px;
border: 5px dotted black;
}
.son1 {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #2f0099;
float: left;
}
.son3 {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
/*当盒子宽度不够. 会顺着盒子向下贴靠*/
.son4 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
</body>
</html>
5.浮动流-字围现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">321321
21111
2111121111
21111
21111
21111
21111
21111
</div>
</body>
</html>
字围现象效果1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*让图片浮动靠左. 带有文字的段落会向上挤并实现字围效果*/
img {
width: 100px;
float: left;
}
p {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<img src="img/sg.jpg" title="这是一个帅气的狗子" alt="">
<p>原产于日本，是一种古老的品种，经长期豢养培育，养成忠实、服从、忍耐的天性。 柴犬的警觉性高，平时习惯警觉地站在高处向下观望，个性机敏、独立，身体强健，动作敏捷，色泽如木柴，以前主要是被人类训练用来猎捕小动物，曾是穿梭于深山林间的狩猎好手，故称之为柴犬。 柴犬外观和日本秋田犬比较好像是它的缩小版。</p>
</body>
</html>
字围现象效果2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字围现象不仅仅是文字会包围浮动元素. inline-block元素也会包围浮动元素*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2 {
width: 10px;
height: 10px;
background-color: green;
border: 1px dotted black;
display: inline-block;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
6.浮动流-实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉内边距外边距*/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: #d4d4d4;
}
.header {
height: 10%;
width: 80%;
background-color: red;
padding: 10px;
/*想要设置的边框和内边距的值是包含在width内的.*/
box-sizing: border-box;
/*居中*/
margin: 0 auto;
}
/*这里设置的高度100%需要注意. 是box-sizing综合的结果
1. 先设置内边距10px.
2. 再后面高度的100%是处了内边距之外的. 就自动排好了边距
*/
.logo {
width: 20%;
height: 100%;
background-color: pink;
float: left;
}
.title {
width: 70%;
height: 100%;
background-color: yellow;
float: right;
}
.content {
width: 80%;
height: 78%;
background-color: green;
margin: 0 auto;
margin-bottom: 1%;
margin-top: 1%;
padding: 10px;
box-sizing: border-box;
}
.guide {
width: 20%;
height: 100%;
background-color: purple;
float: left;
}
.article {
width: 70%;
height: 100%;
background-color: deepskyblue;
float: right;
}
.footer {
width: 80%;
height: 10%;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="title"></div>
</div>
<div class="content">
<div class="guide"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>
7.浮动流-实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动流排版练习3</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.header {
height: 100px;
width: 980px;
background-color: #f6c2d2;
margin: 0 auto;
}
.content {
height: 400px;
width: 980px;
background-color: #fefefe;
margin: 0 auto;
margin-top: 10px;
}
.content .aside {
width: 320px;
height: 400px;
background-color: #fcfd00;
float: left;
}
.content .article {
width: 650px;
height: 400px;
background-color: #fefefe;
float: right;
}
.content .articleTop {
width: 650px;
height: 350px;
background-color: #fefefe;
}
.content .articleTopLeft {
width: 400px;
height: 350px;
background-color: #fefefe;
float: left;
}
.content .articleTopLeft .new1 {
width: 400px;
height: 200px;
background-color: #e9289c;
}
.content .articleTopLeft .new2 {
width: 400px;
height: 140px;
background-color: #3dd1fd;
margin-top: 10px;
}
.content .articleTopRight {
width: 240px;
height: 350px;
background-color: #acde3d;
float: right;
}
.content .articleBottom {
width: 650px;
height: 40px;
background-color: #b9950c;
margin-top: 10px;
}
.footer {
height: 40px;
width: 980px;
background-color: #ec6357;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="aside"></div>
<div class="article">
<div class="articleTop">
<div class="articleTopLeft">
<div class="new1"></div>
<div class="new2"></div>
</div>
<div class="articleTopRight"></div>
</div>
<div class="articleBottom"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
示范三
8.父级塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级塌陷</title>
<style>
/*儿子飘了. 父级就垮了*/
.box1 {
border: 1px solid black;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
9.父级塌陷解决方案
父级塌陷解决方案1:(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给父级加个高</title>
<style>
.box1 {
border: 1px solid black;
height: 100px
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案2:(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear: both</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/*clear: both左右没有浮动标签*/
.box3 {
width: 200px;
height: 200px;
background-color: green;
clear: both;
/*是从贴靠开始计算的. 所以需要加上高度*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案3:外墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外墙法</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
/*设置外墙来清除浮动. 并隔离出空间*/
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="wall"></div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案3:内墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="wall"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷-终极方案:(内墙法+伪元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法+伪元素</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
/*在box1后面插入一个标签并清除浮动*/
.box1:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
10.父级塌陷和margin-top问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.father{
width: 200px;
height: 200px;
background-color: green;
}
/*margin-top问题: son因为父级没有边框作为参照物. 直接将父级也拉下来了
1. 将父级加上一层边框
2. 在son前面加一个伪元素. 不占空间. 但是可以作为参照物
*/
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 10px;
}
/*标准模板: 防止父级塌陷和margin-top问题
将clearfix加在有需要的父级盒子的属性后面!!!
*/
/*table配合空文本: 有标签. 但是不占空间*/
.clearfix {
*zoom: 1;
}
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
</html>
11.初级博客页面
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix {
*zoom:1
}
.clearfix:before,.clearfix:after {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
.left {
/*display: none;*/
width: 20%;
height: 100%;
background-color: rgb(77,77,77);
position: fixed;
top: 0;
left: 0;
color: darkgrey;
}
.left .header-img {
width: 120px;
height: 120px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
}
.left .header-img img {
max-width: 120px;
}
.left .blog-title {
text-align: center;
}
.left .blog-info {
font-size: 12px;
text-align: center;
margin-top: 10px;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
.blog-link,.blog-tag {
margin-top: 20px;
text-align: center;
/*width: 100px;*/
/*border: 5px solid #000;*/
/*margin: 0 auto;*/
}
.blog-link a,.blog-tag a{
color: darkgrey;
}
.blog-link a:hover,.blog-tag a:hover{
color: white;
font-size: 14px;
}
.right {
width: 80%;
height: 1000px;
background-color: #eee;
float: right;
}
.article-list {
padding-left: 50px;
width: 80%;
}
.article-list .article {
background-color: white;
margin-top: 20px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
.article-list .article *{
padding: 10px;
}
.article-list .article .article-header p {
float: left;
font-size: 24px;
font-weight: bold;
border-left: 5px solid red;
}
.article-list .article .article-header span {
float: right;
margin: 10px 0;
}
.article-list .article .article-info {
border-bottom: 1px solid darkgrey;
}
</style>
</head>
<body>
<div class="left">
<div class="header-img">
<img src="o_tx.jpg" alt="">
</div>
<div class="blog-title">
<p>我的博客</p>
</div>
<div class="blog-info">
<p>这个人很懒，什么都没留下</p>
</div>
<div class="blog-link">
<ul>
<li><a href="#">关于我</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Golang</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="article-list">
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
</div>
</div>
</body>
</html>
12.补充: 无序列表居中问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.part {
width: 200px;
height: 200px;
background-color: red;
}
/*无序列表存在边距问题. 如果不去掉会导致不能居中*/
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
text-align: center;
}
</style>
</head>
<body>
<div class="part">
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
</div>
</body>
</html>
13.定位流-相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 10px;
left: 10px;
/*原来的位置加上外边距100px */
margin-top: 100px;
}
input {
height: 30px;
}
img {
height: 50px;
position: relative;
top: 21px;
left: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- 加上验证码-->
<input type="text" placeholder="请输入验证码">
<img src="验证码图片url" alt="">
</body>
</html>
14.定位流-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
/*绝对定位脱离文档流. 绝对定位参照其父级. 父级必须是定位流才会参照
所以想相对于父级的位置移动: 子绝父相
*/
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
/*设置相对位置*/
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
15.绝对定位-忽略父级的padding属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
padding: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
16.绝对定位的元素居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
/*绝对定位先相对父级居中. 而后移动半个边框的距离. 居中*/
.box2 {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
17.绝对定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
}
ul>li {
float: left;
width: 200px;
height: 50px;
background-color: rgba(155,155,155,0.09);
text-align: center;
line-height: 50px;
border: 1px solid red;
}
/*设置停留效果*/
ul>li:hover {
background-color: pink;
}
/*.bg {*/
/* background-image: url(img/img.png);*/
/* background-repeat: no-repeat;*/
/* background-size: 50px;*/
/* background-position: top right;*/
/*}*/
ul>li:nth-child(3) {
position: relative;
}
img {
position: absolute;
width: 40px;
top: -7px;
left: 78px;
}
</style>
</head>
<body>
<ul>
<li>basketball</li>
<li>football</li>
<li class="bg">
baseball
<img src="img/img.png" alt="">
</li>
<li>tennis</li>
<li>run</li>
</ul>
</body>
</html>
18.固定定位案例-回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
.box2 {
width: 1000px;
height: 200px;
background-color: green;
}
.box3 {
width: 300px;
height: 600px;
background-color: pink;
}
/*将标签改成行内块级. 可以设置宽高
改成固定定位就可以跟着屏幕移动
*/
a {
text-decoration: none;
text-decoration-color: rgba(21,0,10,0.99);
display: inline-block;
width: 100px;
height: 100px;
background: rgba(175, 167, 167, 0.14);
border-radius: 50%;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<a href="#">回到顶部</a>
</body>
</html>
19.z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fathter1 {
width: 300px;
height: 300px;
background-color: red;
position: relative;
z-index: 10;
}
.son1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
bottom: -10px;
right: -50px;
z-index: 3;
}
.fathter2 {
width: 300px;
height: 300px;
background-color: green;
position: relative;
z-index: 1;
}
.son2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: -20px;
right: -10px;
z-index: 4;
}
</style>
</head>
<body>
<div class="fathter1">
<div class="son1"></div>
</div>
<div class="fathter2">
<div class="son2"></div>
</div>
<form action="">
<input type="text" name="xx">
<input type="submit" value="1111">
</form>
</body>
</html>
CSS页面布局方式的更多相关文章
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- CSS 页面布局、后台管理示例
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
- CSS页面布局常见问题总结
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...
- CSS原生布局方式
前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默 ...
- css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
- css页面布局之左侧定宽，右侧自适应
二列布局的特征是侧栏固定宽度,主栏自适应宽度.三列布局的特征是两侧两列固定宽度,中间列自适应宽度. 之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲 ...
- CSS页面布局与网格（上）
1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...
随机推荐
- Jmeter----Badboy录制
Badboy Badboy安装后出现错误,需要设置 Preferences-->General-->Enable Recording on Startup?的√去掉,play-->S ...
- jmeter&badboy安装
一.jmeter下载地址: 1. http://jmeter.apache.org/download_jmeter.cgi \ https://www.apache.org/dist/jmete ...
- Javaheima12
Java 不可变集合 如果某个数据不能修改,把它防御性地拷贝到不可变集合红是个很好的实践 或者当集合对象被不可信的库调用时,不可变形式是安全的 创建 再List,Set,Map接口中,都存在of方法, ...
- jmeter 变量的使用
jmeter添加变量 一.添加用户自定义变量 添加用户自定义变量 作用:常用数据参数化.当变量发生变化时,不需要逐个脚本修改,只需要修改用户自定义中的变量就可以了. 变量使用如下图 二.函数助手定义变 ...
- SqlServer 不能收缩 ID 为 %s 的数据库中 ID 为 %s 的文件，因为它正由其他进程收缩或为空。
SQLServer数据库通常都不建议进行SHRINKFILE操作,因为SHRINKFILE不当会造成一定的性能问题. 但是当进行了某些操作(例如某个超大的日志类型表转成分区表切换了数据文件),数据库某 ...
- ERROR 1067 (42000): Invalid default value for 'xxx字段'
报错版本:mysql-5.7.35 1.报错完整提示信息: ERROR 1067 (42000): Invalid default value for 'LOCK_TIME_' 2.原因: 使用sou ...
- ubuntu 16.04 安装VNC远程桌面 安装wine+hfs
1.安装$sudo apt-get install xfce4 $sudo apt-get install vnc4server$sudo apt-get install xrdp 2.启动VNC s ...
- 【Leetcode】 剑指offer：字符串（简单）--Day03
剑指 Offer 05. 替换空格 请实现一个函数,把字符串 s 中的每个空格替换成"%20". 逐字符遍历原字符串,遍历过程中对存放结果的字符串分情况更新. class Solu ...
- Android笔记--外部存储空间
存储文件的操作 外部存储空间 私有存储空间和公共存储空间 外部存储空间分为私有+公有 保存文件到外部存储空间的相关代码操作: 私有空间: 公有空间: 记得增加权限(Android_Manifest.x ...
- 针对于Sql server突然连接不到服务器的解决方法
问题叙述 点击连接之后,总是会弹出一个错误弹窗: 方法解决 快捷键Win+R,输入services.msc,进入到服务界面: 找到SQL 代理(DEV) 将手动打开改成自动 再连接试一次 连上啦! ( ...