-
加载顺序一般是从上到下，设置width100%和margin-left是关键。查看全部
-
混合布局查看全部
-
清除浮动：clear：both查看全部
-
三列布局（自适应）查看全部
-
三列布局查看全部
-
div嵌套查看全部
-
<!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{width:100%; height:100px; background-color:#ccc;} .main{width:100%; background-color:red;position:relative;} .left{height:600px; width:200px; background-color:#00f;position:absolute; left:0;top:0;} .right{height:600px; background-color:#3c6; margin-left:210px; } .foot{width:100%; height:100px; background-color:#F63;} </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>查看全部
-
1：网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果查看全部
-
浮动和绝对定位可以让元素脱离文档流查看全部
-
多列布局，第一个和N-1个都是左浮动，最后一个右浮动查看全部
-
网页布局 <!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>查看全部
-
中间自适应的三列不局查看全部
-
<!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{ width:100%;height:200px;background:#ccc} .main{height:600px;background:#C00} .left{ width:200px;height:600px;position:absolute;float:left;background:#30f} .right{width:75%;height:600px;float:right;margin-left:205px;background:#6c9} .foot{width:100%;height:100px;background:#F63} </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>查看全部
-
顶宽块状元素设置水平居中：<code>margin:0 auto</code>查看全部
-
网页布局，又称版式布局。查看全部
举报
0/150
提交
取消