-
margin:0 auto;查看全部
-
一列布局： 1，通常作为网站的首页，一般固定宽度； 2，一列布局不适于存放文本，太长容易看串行。 3，真正开发，高度设置自动的，适于自动撑开；查看全部
-
网页布局 布局：又称板式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。 特点：网页可以自适应宽度（按百分比） 网页的长度理论上可以无限延伸；查看全部
-
慕课群 167137884欢迎大家加入。查看全部
-
<!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;background:#ccc;} .main{height:600px;background:red;} .left{ width：200px;height:600px;background:blue;position:absolute;left:0; } .right{width:100%;height:600px;background:green;position: absolute;left:210px;} .foot{height:50px;background:#f93;} </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.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
.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;}查看全部
-
三列布局特殊案例代码： 注意点：当在三个div中加入文字并且设置好宽度之后，三个div无法排列在一列上。这时候就需要删掉float 换成position。 示例代码： <!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;} /*.main{width:800px;height:500px;margin:0;padding:0;}*/ .left{width:200px;height:500px;background-color:#9FC ;position:absolute;left:0; top : 0} /*中间的宽度自适应*/ .middle{height:500px;background-color:#C6F; margin: 0 310px 0 210px} .right{width:300px;height:500px;background-color:#F9F ;position:absolute;right:0;top:0;} </style> </head> <body> <div class="main"></div> <div class="left">200px</div> <div class="middle">JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。 你也可以创建自己的对象。 本例创建名为 "person" 的对象，并为其添加了四个属性：</div> <div class="right">300px</div> </body> </html>查看全部
-
.left{ width:300px; height:600px; background:#ccc;float:left;}}/*左浮动样式*/ .right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮动样式*/查看全部
-
两列布局： 1.清除默认样式：body{margin:0;padding :0;} 2.有关两列布局：一般用的很少 1宽度自适应 所以要按%来设置（例如 设置left:20% right:80%） 事例代码如下：不固定的两列布局 <!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;} .left{width:20%;height:500px;background-color:#CFF;float:left;} .right{width:80%;height:500px; background-color:#F9F;float:right;} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>查看全部
-
.main,.footer{ width:960px; margin:0 auto;}查看全部
-
一列布局：通常作为网站首页 一般固定宽度；.一列布局不适于存放文本，太长容易看串行。查看全部
-
.footer{ height:50px; background:#9F9;clear:both;}清楚浮动查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
<head> <style type="text/css"> body{margin:0;padding:0} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0} .middle{height:500px;background:#999;margin:0 300px 0 200px} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
举报
0/150
提交
取消