首页 > 代码库 > 2016年10月27日--格式布局
2016年10月27日--格式布局
格式布局
1、position：fixed
相对于浏览器窗口来对元素进行定位
position：fixed
<html><head><style type="text/css">p.one{position:fixed;left:5px;top:5px;}p.two{position:fixed;top:30px;right:5px;}</style></head><body><p class="one">字字字字字</p><p class="two">字字字字字</p></body></html>
2、position：absolute
使用绝对值来对元素进行定位
position：absolute<html><head><style type="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2 class="pos_abs">绝对定位</h2><p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p></body></html>
3、position：relative
相对于一个元素的正常位置来对其定位
position：relative<html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>这是位于正常位置的标题</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><h2 class="pos_left">相对于其正常位置向左移动</h2><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><h2 class="pos_right">相对于其正常位置向右移动</h2><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p></body></html>
4、分层（z-index）
Z-index可被用于将在一个元素放置于另一（些）元素之后或之前
<html><head><style type="text/css">img.x{position:absolute;left:0px;top:0px;z-index:-1}</style></head><body><h1>这是一个标题</h1><img class="x" src="http://files.cnblogs.com/files/hqxc/001.ico" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p></body></html>
<html><head><style type="text/css">img.x{position:absolute;left:0px;top:0px;z-index:1}</style></head><body><h1>这是一个标题</h1><img class="x" src="http://files.cnblogs.com/files/hqxc/001.ico" /> <p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p></body></html>
5、float：left，right
float 属性定义元素在哪个方向浮动。
float<html><head><style type="text/css">img {float:right}</style></head><body><p>添加一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p><p><img src="http://files.cnblogs.com/files/hqxc/001.ico" />啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p></body></html>
小练习：
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>* { margin: 0px; padding: 0px;}.aa { width: 80px; height: 40px; background-color: #0000ff; position: relative; top: 100px; left: 300px; overflow: hidden; transition: 0.7s;}.aa:hover { overflow: visible; background-color: #FFB600;}.a1 { width: 80px; height: 120px; background-color: #FFff04; position:relative; top: 40px; left: 0px;}.a2 { width: 80px; height: 40px; float: left; overflow: hidden;}.a2:hover { overflow: visible; background-color: #FFB600;}.a3 { width: 240px; height: 40px; position: relative; left: 80px;}.a4 { width: 80px; height: 40px; position:relative; float:left;}.a5 { width: 80px; height: 40px; position:relative;}</style></head><body><div class="aa" style=""><div style="position:absolute;"></div> <div class="a1"> <div class="a2" style="background-color:#FFff04"> <div class="a3" style="background-color:#FF0004"> <div class="a4" style="background-color:#FFB600">1</div> <div class="a4" style="background-color:#FF0004">2</div> <div class="a4" style="background-color:#FFB600">3</div> </div> </div> <div class="a2" style="background-color:#FF0004"> <div class="a3" style="background-color:#FF0004"> <div class="a4" style="background-color:#FFB600">11</div> <div class="a4" style="background-color:#FF0004">22</div> <div class="a4" style="background-color:#FFB600">33</div> </div> </div> <div class="a2" style="background-color:#00ff04"> <div class="a3" style="background-color:#FF0004;width: 80px;"> <div class="a5" style="background-color:#FF0004">111</div> <div class="a5" style="background-color:#FFB600">222</div> <div class="a5" style="background-color:#FF0004">333</div> </div> </div> </div></div></body></html>
2.仿照页面布局
<!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></style><link href="360.css" rel="stylesheet" type="text/css" /></head><body><form> <div id="top"> <div id="index" class="topp"> 设置360导航为首页 </div> <div id="topr" class="topp"> 互联网 | 反馈 | 换肤 </div> </div> <div style="width:1000px;height:2300px; margin-left:auto; margin-right:auto; position:relative; margin-bottom:50px;"> <div style="height:50px;"> <div style="width:193px; height:50px; background-image:url(images/t0151320b1d0fc50be8.png); background-repeat:no-repeat; background-position:center; position:relative; float:left;"></div> <div style=" position:relative; float:left; border:1px solid #000000; width:420px; height:50px;">天气www</div> <div class="topp2">万年历</div> <div class="topp2"> <input type="text" placeholder="邮箱账号" /> </div> </div> <div class="sousuo"> <div style=" margin-left:200px; width:600px;position:absolute;"> <ul style="list-style:none;position:relative;"> <li class="ssli">X1</li> <li class="ssli">X2</li> <li class="ssli">X3</li> <li class="ssli">X4</li> <li class="ssli">X5</li> <li class="ssli">X6</li> <li class="ssli">X7</li> <li class="ssli">X8</li> </ul> </div> <div style=" float:left; left:200px; top:50px; width:500px; height:30px; border:1px solid #000000;position:relative;"> <div style=" left:-200px; width:193px; height:33px; position:relative; background-image:url(images/so.png); background-repeat:no-repeat;"></div> </div> <div style=" float:left; left:210px; top:50px; width:100px; height:30px; border:1px solid #000000;position:relative; line-height:30px;">搜一下</div> </div> <div class="sousuo" style="height:80px;"> <div class="tuijian" style="background-color:#FFB600;">推荐网站</div> <div class="tuijian" style="background-color:#FF0004;">新闻头条</div> <div class="tuijian" style="background-color:#FFB600;">333333</div> <div class="tuijian" style="background-color:#FFB600;">推荐网站</div> <div class="tuijian" style="background-color:#FF0004;">新闻头条</div> <div class="tuijian" style="background-color:#FFB600;">333333</div> <div class="tuijian" style="background-color:#FFB600;">推荐网站</div> <div class="tuijian" style="background-color:#FF0004;">新闻头条</div> <div class="tuijian" style="background-color:#FFB600;">333333</div> <div class="tuijian" style="background-color:#FF0004; width:30px; font-size:16px; line-height:20px;">静音</div> </div> <div class="zhuti"> <div class="zi" style="height: 269px; line-height:269px; background-image:url(cut/1.png);">背景切图</div> <div class="zi" style="margin-top: 10px;height: 117px; line-height:117px; background-image:url(cut/4.png);">背景切图</div> <div class="zi" style="margin-top: 10px;height: 276px; line-height:276px; background-image:url(cut/6.png);">背景切图</div> <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/12.png);">背景切图</div> <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/13.png);">背景切图</div> <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/14.png);">背景切图</div> <div class="zi" style="height: 245px; line-height:245px; border-botton:0px;background-image:url(cut/15.png);">背景切图</div> <div class="zi" style="height: 79px; line-height:79px; border-top:0px;background-image:url(cut/17.png);">背景切图</div> </div> <div style="left:10px; width:748px;" class="zhuti"> <div class="zi" style="height: 258px;line-height:258px; background-image:url(cut/2.png);">背景切图</div> <div class="zi" style=" margin-top: 10px;height: 40px;line-height:40px; font-size:30px; background-image:url(cut/3.png);">背景切图</div> <div class="zi" style=" margin-top: 10px;height: 215px;line-height:215px; background-image:url(cut/5.png);">背景切图</div> <div class="zi" style="height: 32px;line-height:32px; border:0px; background-color:#DBD6D6;font-size:30px; background-image:url(cut/7.png);">背景切图</div> <div class="zi" style="height: 249px;line-height:249px; border:0px; background-image:url(cut/8.png);">背景切图</div> <div class="zi" style="height: 219px;line-height:219px; border:0px; background-image:url(cut/9.png);">背景切图</div> <div class="zi" style="height: 219px;line-height:219px; border:0px; background-image:url(cut/10.png);">背景切图</div> <div class="zi" style="height: 399px;line-height:399px; border:0px; background-image:url(cut/11.png);">背景切图</div> <div class="zi" style="margin-top: 10px;height: 80px;line-height:80px; border:0px;background-image:url(cut/16.png);">背景切图</div> </div> <div style=" margin-top:10px;height: 230px;" class="zhong"> <div class="z1" style="background-image:url(cut/18.png);">背景切图</div> <div class="z1" style="background-image:url(cut/19.png);">背景切图</div> <div class="z1" style="border-right:1px solid #e6e6e6;background-image:url(cut/20.png);">背景切图</div> </div> </div> </div></form></body></html>
@charset "utf-8";/* CSS Document */* { margin: 0px; padding: 0px;}#top { position: relative; background-color: #fbfbfb; height: 30px; line-height: 30px; border-bottom: 1px solid #E1E1E1;}.topp { text-align: center; font-size: 12px; margin: 3px; position: relative; height: 24px; line-height: 24px;}#index { left: 10%; border: 1px solid #a8a8a8; width: 110px; background-color: #fbfbfb;}#topr { position: absolute; right: 10%; top: 3px;}.topp2 { position: relative; float: left; top: 5px; margin-left: 20px; padding: 10px; border-left: 1px solid #a8a8a8; height: 20px;}.sousuo { position: relative; width: 1000px; height: 100px; line-height: 50px; background-color: #fbfbfb; margin-top: 10px;}.ssli { line-height: 20px; top: 20px; position: relative; float: left; margin-left: 20px;}.ssli:hover { background-color: #3AFF00;}.tuijian { width: 105px; height: 40px; position: relative; float: left;}.zhuti { top: 5px; width: 238px; height: 1745px; position: relative; float: left;}.zi { width: 100%; position: relative; box-shadow: 0px 0px 2px #969696; font-size: 50px; font-weight: 700; background-repeat: no-repeat; text-align: center; color: #FF0004;}.zhong { margin-top: 10px; width: 100%; height: 200px; position: relative; float: left;}.z1 { width: 332px; height: 100%; position: relative; float: left; border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; font-size: 50px; font-weight: 700; background-repeat: no-repeat; text-align: center; line-height: 220px; color: #FF0004;}
.
2016年10月27日--格式布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。