-
一列布局一般使用网站首页，宽度一般是固定宽度查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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; margin:0 auto;} .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>查看全部
-
<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>查看全部
-
三列布局自适应，可按照二列布局自适应，调整width的百分比实现。float； 三列布局，两侧固定，中间自适应： .left{width:200px; postion:absolute; left:0} .right{width:300px; postion:absolute; right:0} 中间自适应：设置margin来调整 .middle{0 300px 0 200px} 另，如果想调整左右两边与中间的空隙，可将中间与左右两边的距离加大即可。 调整窗口大小，自适应调整div查看全部
-
前端工程师主要职能能是，用浮动float；与定位position；给ui布局，是艺术与技术融合一体的关键岗位。查看全部
-
分栏又称为分列，常见的布局分为：一列布局，两列布局，三列布局，与混合布局，混合布局最强用！！查看全部
-
网页的设计特点，是网页可以自适应宽度而变化。查看全部
-
网页设计是延续了报刊，杂志的主维思想。查看全部
-
板式布局，ui设计师个性的化的视觉设计，如报纸、网页、等.......查看全部
-
由于main块没有设置高度,里面的元素（left块,right块）又被设置成了浮动显示,这样就脱离了文档流，所以main块没有被撑开,就像一条线一样紧贴在head块的下面,所以footer块就会跑上去到head块下面。 清除浮动有两种做法：1 没撑开的元素设置：overflow:hidden; 2 跑上去的元素设置clear:both;查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 浮动（float），绝对定位（position:absolute）和固定定位（position：fixed）可让元素脱离文档流，即元素移位后不占原区域； 相对定位（position:relative）不能脱离。查看全部
-
我的代码： <!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; color:#fff} .top{height: 100px;margin: 0 auto;background: grey;} .main{width: 100%;height: 400px;background: red;position: relative;} .left{ width: 200px;height: 400px;background: blue;position: absolute;top: 0;left: 0;} .right{height: 400px;background: #55A8FF;position: absolute;top: 0;right: 0px;} .foot{width:100%;height: 100px;margin: 0 auto;background: #FFB562;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
贴上自己的代码，火狐上测试ok： <!DOCTYPE html> <html> <head> <title>混合布局</title> <meta charset="utf-8"> <style type="text/css"> .body{ margin: 0; padding: 0; font-size: 30px; font-weight: bold; } .top{ height: 100px; background: #9cf; } .main{ width: 100%; position: relative; background: red; } .left{ width: 200px; height: 600px; background: #ccc; position: absolute; top: 0; left: 0; } .right{ background: #fcc; height: 600px; margin-left: 210px; } .footer{ height: 50px; background: #9f9; } </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
布局又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。查看全部
-
<!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; color:#fff} body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:pink;height:100px;width:100%;} .main{background:red;height:400px;width:100%;} .left{background:blue;height:400px;width:200px;position:absolute} .right{background:green;height:400px;position:absolute;width:100%;margin-left:210px;} .foot{background:orange;height:100px;clear:both;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
举报
0/150
提交
取消