(前端)HTML之CSS(div+css布局)
前端HTML的基础知识内容的更新已经更新完毕！！！打好基础，才能学好HTML的相关知识！！！
·
目录
一、盒模型的介绍
二、与布局有关的CSS属性
三、设置浮动（float）和清除浮动（clear）
四、案例
学习资料
一、盒模型的介绍
每个html元素都可以看做是一个盒子，盒子具有宽度（width）和高度（height）。盒子组成：padding（内填充）、border（边框）、margin（外边距）、content（内容）
二、与布局有关的CSS属性
1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定）
1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。
1.2 relative：相对定位，指的是相对自己默认的位置。
1.3 static：默认
1.4 fixed：固定
2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素3.text-align：横向排列：left right center
4.line-height:指定行高，垂直居中
5.display: 设置元素是否是：行内元素（inline）、块状元素（block）、行内块状元素（inline-block）或者none隐藏标签作用
6.overflow：设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时 ，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此选项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才会显示滚动条。
三、设置浮动（float）和清除浮动（clear）
专用来摆放标签的位置用的，而不是绝对位置和相对位置。absolute和relative是用来实现漂浮用的
用display：inline 可以，但是不兼容3.1 float：设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left，右漂浮right值
。
3.2 clear：清除 left both
加div clear
四、案例
案例一：注册表单
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>商城注册</title> <link rel="stylesheet" type="text/css" href="css/layout.css" /> </head> <body> <form method="post" action="" id="regform"> <table> <tbody> <tr> <td colspan="3"> </td> <td rowspan="11"> <h4><img src="images/read.gif" alt="alt" />阅读服务协议</h4> <textarea class="text" name="textarea" cols="30" rows="15" readonly="readonly">欢迎阅读服务条款协议……</textarea> </td> </tr> <tr> <td class="hint">登录名：</td> <td><input class="text" name="sname" type="text" size="24" />（可包含 a-z、0-9 和下划线）</td> </tr> <tr> <td class="hint">密码：</td> <td><input class="text" name="pass" type="password" size="26" />（至少包含6个字符）</td> </tr> <tr> <td class="hint">再次输入密码：</td> <td><input class="text" name="rpass" type="password" size="26" /></td> </tr> <tr> <td class="hint">电子邮箱：</td> <td><input class="text" name="email" type="text" size="24" />（必须包含@字符）</td> </tr> <tr> <td class="hint">性别：</td> <td> <input name="gen" type="radio" value="男" checked="checked" /><img src="images/Male.gif" alt="alt" />男 <input name="gen" type="radio" value="女" /><img src="images/Female.gif" alt="alt" />女 </td> </tr> <tr> <td class="hint">头像：</td> <td><input type="file" name="upfiles" /></td> </tr> <tr> <td class="hint">爱好：</td> <td> <input type="checkbox" name="checkbox" value="checkbox" />运动 <input type="checkbox" name="checkbox2" value="checkbox" />聊天 <input type="checkbox" name="checkbox3" value="checkbox" />玩游戏 </td> </tr> <tr> <td class="hint">喜欢的城市：</td> <td> <select name="nMonth"> <option value="" selected="selected">[请选择]</option> <option value="0">北京</option> <option value="1">上海</option> </select> </td> </tr> <tr> <td> </td> <td> <input type="hidden" name="from" value="regForm" /> <input type="submit" name="Button" value="同意右侧服务条款，提交注册信息" disabled="true" /> <input type="reset" name="Reset" value=" 重 填 " /> </td> </tr> </tbody> </table> </form> </body> </html>案例二：普林斯顿大学首页首页布局
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>普林斯顿大学</title> <style> body{margin:0px;padding:0px;} div{font:bold 36px 黑体;color:#000;} #container{width:1009px;margin:0px auto;} #header {width:100%;height:80px;background:#e6eedf;} #main{width:100%;height:490px;} .left,.right{float:left;width:387px;height:100%;background:#ebf7f7;} .right{width:622px;background:#f8e4e5;} #footer{clear:both;width:100%;height:48px;background:#f7f3e7;} </style> </head> <body> <div id="container"> <div id="header">顶部(header)</div> <div id="main"> <div class="left"> 左(left) </div> <div class="right">右(right)</div> </div> <div id="footer">底部(footer)</div> </div> <!--container end--> </body> </html>
学习资料：
CSS定位
<!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=gb2312" /> <title>绝对定位和相对定位的应用</title> <link href="css/global.css" type="text/css" rel="stylesheet" /> <link href="css/position.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="center"> <div class="title">CSS定位与定位应用</div> <div class="indent">定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时候就需要设置绝对定位，来实现如图1所示的效果。</div> <div class="img_center"><img src="images/position_1.jpg" alt="绝对定位" /><br />图1 对联广告</div> <div>一、position的三种定位方式</div> <div class="indent"> 图1演示了绝对定位的应用，position定位属性主要包含relative相对定位、absolute绝对定位和static默认定位三种定位方式，下面分别对这三种定位方式进行讲解。<br /> （1）relative<br />相对定位，相对于文档流原来位置的偏移，原占位大小完整保留。相对定位常用的属性、值及其含义如下表所示。 <table class="mytable" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="mytable_1">定位属性</td> <td class="mytable_2">属性</td> <td class="mytable_3">值</td> <td class="mytable_4">说明</td> </tr> <tr> <td>定位方式</td> <td>position</td> <td>position:relative;</td> <td>采用相对定位，相对于本来位置的偏移</td> </tr> <td rowspan="4">偏移量</td> <td>left</td> <td>left:20px;</td> <td>距离参照物左侧20px</td> </tr> <tr> <td>right</td> <td>right:50px;</td> <td>距离参照物右侧50px</td> </tr> <td>top</td> <td>top:10px;</td> <td>距离参照物顶部10px，相对定位参照物为元素的本来位置</td> </tr> <tr> <td>bottom</td> <td>bottom:100px;</td> <td>距离参照物底部100px</td> </tr> </table> 一般情况下，right和left或top和bottom不应同时存在。他们之间有个公式。left值等于-right，同样的，top值等于-bottom，例如：“left:10px;”等价于“right:-10px;”。我们根据上表中对relative知识的描述，来看图2中相对定位元素“第2块”的特点。<br /> <div class="img_center"><img src="images/position_2.jpg" alt="定位" /><br /> 图2 相对定位</div> 在图2中，第2块内容本应该在虚线范围内，但是它却移动了位置，主要是在图2页面的第2块中加入“position:relative;top:10px;left:20px;”代码，第2块实现了相对定位，并且左、上都有一定的偏移量，所以就呈现了如图2所示的效果。图2页面的关键代码如下所示：<br /> <div class="code"> < html><br /> < head><br /> < title>相对定位< /title><br /> < style type="text/css"><br /> div{<br /> color:#fff;<br /> font:bold 22px 黑体;<br /> width:150px;<br /> height:120px;<br /> background:red;<br /> float:left;<br /> }<br /> .div2{<br /> height:150px;<br /> background:#ff7300;<br /> position:relative;<br /> top:10px;<br /> left:20px;<br /> } <br /> .clear{<br /> background:blue;<br /> }<br /> < /style><br /> < /head><br /> < body><br /> < div>第1块< /div><br /> < div class="div2">第2块< /div><br /> < div class="clear">第3块< /div><br /> < /body><br /> < /html> </div> 从上面的代码中可以知道，相对定位有如下3个特点：<br /> ①参照物：相对定位是相对于未设置定位方式前的位置，其参照物就是原来位置。<br /> ②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。<br /> ③占位：相对定位偏移后的元素，其占有的位置是原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面，但不会增加高度和宽度。<br /> （2）absolute<br /> 绝对定位，完全脱离文档流，是相对于第一个非默认定位方式的上级元素的距离。相对定位的元素大小会在文档流原来位置占去相同大小的页面空间。而绝对定位则不再占原文档流页面的任何空间。其常用属性语法语义与相对定位类似，例如“position:absolute;top:200px;left:150px;”。定位方式的区别导致了参照物区别。具体参照物为上级元素中，第一个存在非默认定位方式的元素，它完全脱离了文档流。<br /> 下面图2页面中的代码进行修改，只修改样式.div2，修改为绝对定位，为方便参照，加大了偏移量，其他代码均没有任何变化，.div2修改后的代码如下所示。 <div class="code"> .div2{<br /> height:150px;<br /> background:#ff7300;<br /> position:absolute;<br /> top:180px;<br /> left:200px;<br /> } </div> 修改后在浏览器中运行的效果如图3所示，第2块风格改为绝对定位后，位置也发生了变化，并且不再占有原来的位置。<br /> <div class="img_center"><img src="images/position_3.jpg" alt="定位" /><br /> 图3 绝对定位</div> 学习完绝对定位，可以发现绝对定位也有3个特点：<br /> ①参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。<br /> ②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。<br /> ③占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面。<br /> 现在为三个div增加一个上级div，并且设置上级div的相对定位为relative，上外边距设置50px，左边距设置为60px，修改后的页面代码如下所示。 <div class="code"> < html><br /> < head><br /> < title>绝对定位< /title><br /> < style type="text/css"><br /> .div1{<br /> color:#fff;<br /> font:bold 22px 黑体;<br /> width:150px;<br /> height:120px;<br /> background:red;<br /> float:left;<br /> }<br /> .div2{<br /> height:150px;<br /> background:#ff7300;<br /> position:absolute;<br /> top:180px;<br /> left:200px;<br /> } <br /> .clear{<br /> background:blue;<br /> }<br /> .div_big{<br /> position:relative;<br /> top:50px;<br /> left:60px;<br /> }<br /> < /style><br /> < /head><br /> < body><br /> < div class="div_big"><br /> < div class="div1">第1块< /div><br /> < div class="div1 div2">第2块< /div><br /> < div class="div1 clear">第3块< /div><br /> < /div><br /> < /body><br /> < /html><br /> </div> 修改完上面的代码后，在浏览器中运行的效果如图4所示。 <div class="img_center"><img src="images/position_4.jpg" alt="定位" /><br /> 图4 绝对定位及相对定位的应用</div> position还有一种类似的定位方式为固定定位，值为fixed。同样完全脱离文档流，但参照物为浏览器的可见范围。但只工作在IE7.0的strict模式下，这里稍微提下。<br /> （3）static<br /> 静态无偏移，不填时默认属性，偏移量属性无效，属于常规文档流。虽然这个参数只有在JavaScript中实现某些效果时使用，但必须理解static定位方式对应的常规文档流概念。<br />在前面内容中，我们学习并不断涉及到文档流的概念，我们知道，它是页面内容的组织方式，即从上至下，先分行；然后每行根据元素的特点放置元素：块级元素独占一行，行级元素从左至右排列。<br />这种组织方式就是往容器中放置流体。流体即水、油等液体，特点是自动紧密排列填充容器，就好像往水缸倒水。而非流体则是无此特点，如屋子里摆放各类家具。<br />常规文档流中的“常规”，是指除浮动和绝对定位外，网页显示元素的默认组织方式。相对于浮动与绝对定位的特殊情况，常规文档流可以简单的描述为“原来位置”。<br /> 上面我们讲解了定位属性中的三种定位方式，其中相对定位与绝对定位，会与原文档流形成堆叠，覆盖在其他重叠位置元素的上面。那么：<br /> （1）为什么相对或绝对定位元素会位于常规文档流前面呢？<br /> （2）当有多个相对或绝对定位元素存在时，他们又应该如何排列顺序？<br /> 要回答这些问题，必须理解并掌握叠放层次z-index属性。<br /> </div> <div>二、叠放层次属性z-index</div> <div class="indent"> z-index属性只对非默认定位方式的元素（相对、绝对与固定定位）有效，默认值为1，其值为正整数。值越大，叠放在越前面。其语法格式如：“z-index:2”。 在绝对定位效果图的例子中新增1个绝对定位的div，并设置第2块叠放层次为“z-index:2”，修改后的代码如下所示。 <div class="code"> < html><br /> < head><br /> < title>相对定位< /title><br /> < style type="text/css"><br /> div{<br /> color:#fff;<br /> font:bold 22px 黑体;<br /> width:150px;<br /> height:120px;<br /> background:red;<br /> float:left;<br /> }<br /> .div2{<br /> height:150px;<br /> background:#ff7300;<br /> position:relative;<br /> top:10px;<br /> left:20px;<br /> z-index:2;<br /> } <br /> .clear{<br /> background:blue;<br /> }<br /> .div4{<br /> position:absolute;<br /> top:100px;left:100px;<br /> background:green;<br /> }<br /> < /style><br /> < /head><br /> < body><br /> < div>第1块< /div><br /> < div class="div2">第2块< /div><br /> < div class="clear">第3块< /div><br /> < div class="div4">第4块(未设置z-index)< /div><br /> < /body><br /> < /html> </div> 在浏览器中运行上面的代码，效果如图5所示。 <div class="img_center"><img src="images/position_5.jpg" alt="定位" /><br /> 图5 叠放层次的应用</div> 在图5中，可以很明显的看到，叠放属性是“z-index:2”的第2块位于最上面，第4块其次，最底下是未设置绝对定位的文档流。第4块并未设置z-index的值，但绝对定位的元素，其z-index默认值为1。我们再把上面代码略修改，把第2块的“z-index:2”属性去掉。那么，它的z-index值应该也是默认值1，这时就出现1个问题，同层次如何确定叠放顺序呢？在浏览器中运行修改后的代码，效果如图6所示。 <div class="img_center"><img src="images/position_6.jpg" alt="定位" /><br /> 图6 叠放层次后来者居上</div> 从图6中我们很容易得出答案，同层间，按代码中出现顺序排，后出现的居上。<br /> 因为叠放层次值，也可以理解为2在正常顺序中位于1后面，因此，可以很简单的把这些叠放层次的组织顺序总结为“后来者居上”：<br /> （1）叠放层次值有大小差异，大的居上。就像建房子，地基即文档流页面。楼层数越大则在越上面。<br /> （2）同层间，后出现的居上。<br /> </div> <div>三、实例演示</div> <div class="indent"> 学习完定位属性，特别是绝对定位及叠放层次z-index属性后，就可以实现页面中常用到的带关闭按钮的对联广告效果，具体效果如图7所示。 <div class="img_center"><img src="images/position_7.jpg" alt="定位" /><br /> 图7 带关闭按钮的对联广告</div> 要实现上述效果，其实比较简单：<br /> 1）在页面中放置4个元素并设置为绝对定位<br /> 2）设置关闭图片的叠放层次为“z-index:2;”<br /> 3）根据效果图，确定：<br /> ①左边图的左边界“left:40px;”<br /> ②右边图的右边界“left:40px;”<br /> ③统一上边界，“top:30px;”。<br /> 理清思路后，实现上述效果的代码如下所示。<br /> <div class="code"> < html><br /> < head><br /> < title>带关闭按钮的对联广告< /title><br /> < style tylie="text/css"><br /> body{<br /> margin:0px;<br /> padding:0px;<br /> }<br /> #advLeft,#advRight,#closeLeft,#closeRight{<br /> position:absolute;<br /> top:30px;<br /> }<br /> #advRight,#closeRight{<br /> right:40px;<br /> }<br /> #advLeft,#closeLeft{<br /> left:40px;<br /> }<br /> #closeLeft,#closeRight{<br /> z-index:2;<br /> }<br /> < /style><br /> < /head><br /> < body><br /> < div id="closeLeft">< img src="images/close.gif" alt="alt" />< /div><br /> < div id="closeRight">< img src="images/close.gif" alt="alt" />< /div> <br /> < div id="advLeft">< img src="images/ad1.jpg" alt="alt" />< /div><br /> < div id="advRight">< img src="images/ad2.jpg" alt="alt" />< /div> <br /> < /body><br /> < /html><br /> </div> 学习完上述内容，可以总结出各种定位方式的使用场合：<br /> （1）绝对定位，对联广告及悬停显示等ajax效果。用于在有限页面空间中实现多元素叠放。<br /> （2）相对定位，一般用于为绝对定位的上级元素，为绝对定位元素提供参照物。<br /><br /> </div> </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=gb2312" /> <title>网页制作的常用技巧</title> <link href="css/global.css" type="text/css" rel="stylesheet" /> <link href="css/skill.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="center"> <div class="title">网页制作的常用技巧</div> <div class="indent"> 当需要制作网站时，首先需要解决网站内容的问题，即确定网站的主题，第二步就是要使用photoshop等图片制作工具设计网页效果图，例如图1所示的网页效果图，确定网页效果图后，就需要进入切图，制作网页过程。 <div class="img_center"><img src="images/skill_1.jpg" alt="网页效果图"/></div> 制作网页时，首先要进行网页布局，目前推荐使用DIV＋CSS的方式进行布局，然后根据网页效果获取设计图中每一版块的大小，即宽度和高度，网页上文字、背景、边线的颜色等，那么我们该如何准确的获取这些值呢？下面介绍常用的一些获取图片中参数的技巧。 </div> <div>一、获取尺寸的大小</div> <div class="indent"> 根据网页设计的效果图制作网页时，通常需要知道网页的大小，某一版块的宽度、高度等，下面介绍几种常见的获取宽度、高度的方式。<br /> 1、获取图像的大小<br /> 布局网页时设置网页的宽度很好查看，直接在photoshop工具打开页面效果图，然后选择“图像—>图像大小”即弹出如图2所示的对话框， <div class="img_center"><img src="images/skill_2.jpg" alt="图像大小查看"/><br />图2 photoshop查看图像大小</div> 另外一种方式是在windows下，设置图片的排列方式为“平铺”就可以直接看到每一个图片的大小，也可以把鼠标放到某一个图片上，这时也会弹出一个矩形框提示图像的尺寸、大小等，如图3所示。 <div class="img_center"><img src="images/skill_3.jpg" alt="图像大小查看"/><br />图3 windows下查看图像大小</div> 查看整个图像大小非常容易，那么如果查看一个图像中某一块的内容的大小，该如何查看呢？别着急，也有非常方便的方法来查看。<br /> 2、获取图像局部大小<br /> 在photoshop中，打开一个图像，使用“矩形选框工具”选中某一版块的大小，在“信息”栏下就可以看到选中区域的大小，如图4所示。如果需要非常精确的局部图像大小，那就要放大图像至最大，然后再使用“矩形选框工具”选中某一区域，然后在“信息”栏下查看先中区域的大小。 <div class="img_center"><img src="images/skill_4.jpg" alt="图像大小查看"/><br />图4 选中区域的大小</div> <p>另一种是使用Hypersnape工具，按“捕捉区域”的组合键（Ctrl+Shift+R），然后拖动鼠标，将显示局部区域的大小（宽和高）。</p> </div> <div>二、获取颜色值的方法</div> <div class="indent"> 1、在dreamweaver中获取颜色值<br /> 使用windows自带的颜色选择器，选取颜色值，但是这种方式获取的颜色值可能与网页设计效果图中的颜色值不完全一致，当对颜色的要求不很精确时，在编写CSS样式时，可以使用这种方式获取颜色值，如图5所示。 <div class="img_center"><img src="images/skill_5.jpg" alt="图像大小查看"/><br />图5 查看颜色值</div> 如果需要设置的颜色值更精确，在图5中单击图标<img src="images/skill_7.jpg" />，弹出如图6所示的颜色选择器，选择更精确的颜色。 <div class="img_center"><img src="images/skill_6.jpg" alt="图像大小查看"/><br />图6 选择颜色</div> 2、使用photoshop获取颜色值<br /> 在photoshop中可以获取与网页设计效果图完全一致的精确的颜色值，在photoshop中打开效果图，选择“吸管工具”，然后在图片适当位置吸取颜色值，如图7所示。 <div class="img_center"><img src="images/skill_8.jpg" alt="图像大小查看"/><br />图7 吸取颜色</div> 然后单击“设置前景色”，弹出如图8所示拾色器，就获取了精确的颜色值。 <div class="img_center"><img src="images/skill_9.jpg" alt="图像大小查看"/><br />图8 使用拾色器获取颜色值</div> 以上介绍了网页制作中常用到的获取图像尺寸、获取颜色值的方法，在以后的网页制作中，可以使用上述方法来快速的制作网页。<br /> 对于使用DIV+CSS布局制作网页，可以参考网上学习资料DIV+CSS布局大全（PDF文档），熟练的制作符合要求的精美的页面。 </div> </div> </body> </html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
17
0- 0
已为社区贡献1条内容
所有评论(0)