布局设计-白红宇

布局设计

阅读量：5314 次

发布时间：2019-06-14

本文共 6517 字，大约阅读时间需要 21 分钟。

1，全部都是占满行。

2，使用百分比定义宽度，width:100%; 或者max-width:1200px; min-width:800px;

3，块级元素添加margin:0 auto; 左右自适应宽度居中。

4， height=line-height; text-align:center; 块级元素单行水平居中

1，宽度固定

2，使用百分比定义宽度，width:100%; 或者max-width:1200px; min-width:800px;

3， .navigator{width:100%; height:50px; position:fixed; top:0px;} //使用了fixed相对视口定位不动，脱离文档流。后面的banner会晚上跑，被导航遮住50px;

　　 .banner{margin-top:-50px;} //被导航遮住50px; 使用margin-top:-50px; 往下移动50px;，不会被遮住。

　　这里可以使用position:sticky; top:0px; 这是新属性，兼容性不好，所以可以使用上述fixed 代替，写在.nav中。

<div class="navgator"> 固定导航栏，不随滚动条滚动而滚动 </div>

如下代码：

.nav{

width: 100%;

height: 50px;

line-height: 50px;

text-align: center;

background: #333;

color: #fff;

margin: 0 auto;

position: fixed;

top: 0px;

}

.banner{

width: 1200px;

height: 300px;

background: green;

/* line-height: 300px;

text-align: center; */

color: red;

margin: 0 auto;

margin-top: 50px;

}

<div class="banner">banner栏</div>

<div class="footer">footer</div>

---------------------------

经典行布局

复制运行代码：

<!DOCTYPE html>

<head>

<title>Document</title>

padding: 0;

margin: 0;

font-size: 16px;

list-style-type: none;

}

.header{ /*网页头部，居中显示*/

width: 1600px;

height: 100px;

background: #333;

margin: 0 auto;

overflow: hidden; /*清除浮动*/

zoom:1; /*兼容低版本的IE浏览器*/

position: fixed; /*相对视口进行固定*/

top: 0;

left: 50%; /*向左移动父元素宽度的50%*/

margin-left: -800px; /*向左移动自身宽度的一半*/

}

.header img{ /*logo 左浮动*/

height: 100px;

width: 300px;

float: left;

margin-left: 30px;

}

.header ul{ /*导航右浮动*/

float: right;

margin-right: 30px;

}

.header ul li{ /*具体导航项左浮动*/

display: block;

float:right;

line-height: 100px; /*单行居中显示 height=line-height;*/

text-align: center;

font-size: 20px;

color: #fff;

margin-right: 40px;

}

.content{/*居中显示*/

width: 1600px;

height: 1450px;

margin: 105px auto 100px;

}

.footer{ /*页面尾部居中显示*/

width: 1600px;

height: 100px;

background: #333;

line-height: 100px; /*单行垂直居中显示 height=line-height;*/

text-align: center; /*水平居中*/

font-size: 20px;

color: #fff;

position: fixed; /*相对视口进行固定*/

bottom: 0;

left: 50%; /*向左移动父元素宽度的50%*/

margin-left: -800px; /*向左移动自身宽度的一半*/

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

<div class="footer">footer</div>

</body>

</html>

========================================================

------------

经典列布局

两列布局固定宽度和自适应

<!DOCTYPE html>

<head>

<title>Document</title>

*{padding: 0; margin: 0; color: red; font-size: 16px;}

.container{

width: 90%; height: 1800px; margin: 0 auto; overflow: hidden; zoom:1;} /*清除浮动，兼容低版本IE浏览器*/

.main_left{

width: 70%; height:1800px; color: red; float: left; background: blue;} /*这里可以使用具体数字，也可以使用百分比设置*/

.main_right{

width: 30%; height:1800px; color: red; float: right; background: green;} /*这里可以使用具体数字，也可以使用百分比设置*/

</style>

</head>

<body>

<div class="main_left">这是左边内容</div>

<div class="main_right">这是右边内容</div>

</div>

</body>

</html>

===============================

就是行布局和列布局一起配合

==========================

--------------如下代码就是圣杯布局------------

<!DOCTYPE html>

<head>

*{margin: 0;padding: 0;} /*重置浏览器默认值*/

/*设置页头和页尾样式*/

.header,.footer{width: 100%;height: 40px;color: #fff;background: #333;line-height: 40px;text-align: center;}

/*设定容器上下内边距为0，左右内边距分别为220px 和 200px（这里的220px是留着给下面的.right，另外200px是给下面的.left预留的）*/

.container{

padding: 0 220px 0 200px;overflow: hidden; }

/*中间，左右内容使用相对定位，并且全部向左浮动*/

.middle,.left,.right{

position: relative;

float: left;

}

.middle{

width: 100%;

height: 300px;

color: #fff;

background: pink;

}

.left{

width: 200px;

height: 300px;

color: #fff;

background: green;

margin-left: -100%; /*因为.middle .left .right全部浮动，所有只要一行没有溢出就会排列成一行。

向移动-100%时，left就会一直往后退，直到向上跳一行，可以使用调试工具查看。*/

left: -200px; /*这里的-200px，是通过relative定位移动到padding-left:200px;的。正负号表示向后或者向前移动，负数就是向左移动，正数向右移动。*/

}

.right{

width: 220px;

height: 300px;

color: #fff;

background: blue;

margin-left: -220px;/*因为.middle .left .right全部浮动，所有只要一行没有溢出就会排列成一行。

这里向左移动220px就会直接跳到上面一行覆盖.middle的右边。具体移动数据可以使用调试工具查看。*/

right: -220px;/*这里的-220px，是通过relative定位移动到padding-left:220px;的。正负号表示向后或者向前移动，负数就是向左移动，正数向右移动。*/

}

</style>

</head>

<body>

<div class="header">header</div>

<div class="middle">midden</div>

<div class="right">right</div>

</div>

<div class="footer">footer</div>

</body>

</html>

=================================================

双飞翼布局

<!DOCTYPE html>

<head>

<title>双飞翼布局</title>

*{padding: 0;margin: 0;font-size: 16px;}

/*头尾部样式*/

.header,.footer{width: 100%; height: 60px; color: #fff;background: #333;line-height: 60px;text-align: center;}

/*内容样式*/

.container,.left,.right{float: left;}/*注意这里是.container进行浮动的，而不是.middle。和圣杯布局相比少了一个定位position:relative*/

.container{width: 100%;min-height: 300px;}

.middle{height: 300px; margin-left: 250px;margin-right: 300px;background: gray; }

.left{width: 250px;height: 300px;background: red;margin-left: -100%;}/*这里和圣杯布局一样，使用负边距会上移一行。*/

.right{width: 300px;height: 300px;background: green;margin-left: -300px;}/*这里和圣杯布局一样，使用负边距会上移一行。*/

.clearBoth{clear: both;}/*在最后浮动的元素添加一个块级元素，清除浮动*/

</style>

</head>

<body>

</div>

</body>

</html>

=====================

圣杯布局和双飞翼布局：

1，必须先渲染中间内容，在渲染两边。

2，而且是三列，两边固定宽度，中间自适应。

圣杯布局的结构：

<body>

<div class="header">header</div>

<div class="middle">midden</div>

<div class="right">right</div>

</div>

<div class="footer">footer</div>

</body>

双飞翼布局的结构：

<body>

</div>

</body>

====================

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10661387.html

你可能感兴趣的文章

Windows Phone 7你不知道的8件事

查看>>

实用拜占庭容错算法PBFT

查看>>

java的二叉树树一层层输出,Java构造二叉树、树形结构先序遍历、中序遍历、后序遍历...

查看>>

php仿阿里巴巴,php实现的仿阿里巴巴实现同类产品翻页

poj-1410 Intersection

Java中Runnable和Thread的区别

查看>>

SQL Server中利用正则表达式替换字符串

查看>>

POJ 1015 Jury Compromise（双塔dp）

查看>>

论三星输入法的好坏

查看>>

Linux 终端连接工具 XShell v6.0.01 企业便携版

查看>>

JS写一个简单日历

查看>>