-
一、清除默认样式body{margin：0；padding：0} 二、两列布局： 1、宽度自适应（用的比较少）， 1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】 如下代码 （这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将（%）改为像素（px）的形式查看全部
-
1.一列布局不适于存放文本，太长容易看走眼 一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。 两列布局自适应，使用百分比。 三列布局，使用绝对定位和margin。 盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到 主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长查看全部
-
一列布局通常作为网站首页，不适合放置多行文字，多为固定宽度查看全部
-
布局：又称板式布局，是网页UI设计师将有限的视觉元素进行排列组合查看全部
-
pasition绝对定位定位查看全部
-
1、顶部和底部宽度自适应一般将其设置宽度为百分比,例如width:100% 2、多列中，其中一列需要宽度自适应，不需要加宽度（width）。只需要设置margin值 3、块的加载顺序由HTML代码编写顺序决定查看全部
-
一列布局：margin：0 auto 两列布局：左右浮动 三列布局：左右绝对定位，中间靠margin调整位置 混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局查看全部
-
<title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:#ccc;margin:0 auto;} .main{width:100%;background:red;position:relative;} .left{width:200px;height:500px;background:#00f;} .right{width:100%;height:500px;position:absolute;margin-left:210px;background:#0c6;} .foot{width:100%;background:orange;height:100px;clear:both;} </style>查看全部
-
<title>混合布局</title> <style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; text-align:center;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9;clear:both;} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
清除浮动两种方法：1. clear:both; 2. overflow:hidden.查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px;margin:0 auto;} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
实现三列布局用float达不到效果了，要用到定位布局中的绝对定位absolute，实现三列布局的思路是：固定左右两列后，再固定中间列。三列布局注意1.绝对定位的写法：posision:absolute;left/right:**px;top/bottom:**px;2.中间列如果自适应就不设置宽度，如果是固定的，就要把宽度设置上；且中间列的绝对定位的写法：posision:absolute;left:左列的宽度px;right:右列的宽度px;查看全部
-
自适应宽度的两列布局，列随浏览器的变化而变化，有两个知识点：1.因为是自适应，所以不能定义元素的宽度，只能用百分比表示；2.两列布局是分别居于页面的左右两侧的，所以要用到浮动float; 固定宽度的两列布局，列不会随浏览器的变化而变化，有两个知识点：1.因为是固定宽度，所以必须定义元素的宽度，不能再用百分比表示；2.两列布局是分别居于页面的左右两侧的，所以要用到浮动float查看全部
举报
0/150
提交
取消