-
float:left;/*左浮动样式*/ float:right;/*右浮动样式*/查看全部
-
注意： ①文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 ②有三种情况使得元素离开文档流而存在，分别是浮动、绝对布局、固定定位查看全部
-
1、二列布局 （1）自设定布局，调整浏览器大小，会跟着调整大小，用百分百，一般很少用 <html> <head> <style> body{margin:0;padding: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> （2）固定宽度 <html> <head> <style> body{margin:0;padding:0;} .main{ width:800px; margin:0 auto; } .left{ width:20%; /* 要具体控制大小，则用像素，如220px */ height:500px; float:left;/*既然要用到左右两列的排列，那就要用到浮动*/ background:#ccc; } .right{ width:80%; /* 要具体控制大小，则用像素，如580px */ height:500px; float:right; background:#ddd; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>查看全部
-
margin:0 auto居中对齐查看全部
-
1、一列布局： （1）通常作为网页头部（如百度），简单明了，主题突出，适合放置简单文字。固定宽度。 （2）不适于存放文本，一列布局宽度太长，阅读不方便 2、相关代码： <html> <head> <style> body{margin:0;padding:0;} .main{ width:800px; height:300px; background:#ccc; margin:0 auto; /* 0表示上下边界为0，auto表示左右则根据宽度自适应相同值（即居中）*/ } .top{ height:100px; background:blue; } .foot{ width:800px; height:100px; background:#900; margin:0 auto; } </style> </head> <body> <div class="top"></div> /*头部*/ <div class="main"></div> /*内容主体*/ <div class="foot"></div> /*底部*/ </body> </html>查看全部
-
1、什么叫做布局 又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。将理性化的思维个性化的表现出来。在一种具有个人风格和艺术特色的视觉传达方式。传达信息的同时，也产生感官上的美感。款式设计上的范围，涉及到了报刊、杂志、书籍、产品样本、挂历、招贴画、唱片封套和网页页面等平面设计。 2、网页设计特点（注意应用报刊、杂志等的思想） 网页的主要元素是文本和图片，网页设计的特点有两个： ①网页可以自适应宽度，可以根据显示器不同分辨率设计 ②网页的长度理论上没有限制 3、网页布局一般分为三部分：头部、内容主体、底部； 根据内容主体部分的多少给网页分栏（又称分列），常见的布局分为：一列布局、二列布局、三列布局、混合布局（常用）等 4、前端设计师就是用CSS的浮动、定位等方法实现UI设计查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
一列布局代码查看全部
-
清楚浮动：1.对父级设置合适的CSS高度； 2.clear:both; 3.父级div定义：overflow:hidden;查看全部
-
清楚浮动：clear:both;查看全部
-
<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:red} .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>查看全部
-
<!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;right:0; top: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; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; 【任务1】; left:0; top:0} .main{ height:600px; 【任务2】 background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; 【任务3】; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
清除浮动两种方法：1. clear:both; 2. overflow:hidden.查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
举报
0/150
提交
取消