1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

2天驾驭DIV+CSS!第七课

作者:用户 来源:互联网 时间:2016-06-27 10:44:10

布局页面定位position元素height

2天驾驭DIV+CSS!第七课 - 摘要: 本文讲的是2天驾驭DIV+CSS!第七课, 平时我们在布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。 我们先把上节课最后总结一句话拿出来“如果用positi

平时我们在布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。

我们先把上节课最后总结一句话拿出来
如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。
如果你还是不能太明白这句话,我们就做个实例,把我们第5节页面的头部blog区域用定位(position)来布局一下
2天驾驭DIV+CSS!第七课-2天驾驭div <a href=css">
HTML代码和原来的没有区别:
<div id="Logo">
    <a href="#" id="logoLink"></a>
</div>
CSS代码就有变化了,咱先看看原来的CSS代码
#Logo{
    height:80px;
}
#logoLink{
    display:block;
    width:173px;
    height:46px;
    background:url(../Images/logo.gif) no-repeat;
    float:left;
    margin-top:20px;
}
原来是用“浮动+外边距”布局的,将#logoLink定位在距离顶部20像素,左侧0像素的地方;
如果用position的方法,CSS就应该这么写,首先给#logo加上“position:relative;”,给#logoLink加上“position:absolute;”,然后让#logoLink距离上面20像素,左侧0像素,具体代码如下:
#Logo{
height:80px;
position:relative;/*相对定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}
怎么样效果和原来的一样吧,就是这么简单.
什么?CSS代码多了?的确,由原来的两句话,变成现在的四句,但是有没有发现,就靠Position我们就可以将Logo随意的定位于任何一个地方!这就是它的灵活的地方!如果在页面顶部在有一行“加入收藏 设为首页 RSS订阅”如下图,你是不是也可以很方便的将它们定位于右上角呢~
2天驾驭DIV+CSS!第七课-一堂课学会div css
但是定位(position)有一个缺点,不会自适应内部元素的高度,所以平时我们在布局页面的时候,如果某个或者某些模块高度永远不变,就可以用定位,但是KwooJan建议大家布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。
=========================================================================
最后,请大家记住我这句话:“布局页面,Float为主,Position为辅!
=========================================================================
好,我们有关页面布局的教程,算是已经完结.
如果能悟透每节课内容,你现在就可以拍着胸脯说“我是DIV+CSS高手!”哈哈,不过你要知道,DIV+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" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>css学习 alixixi.com整理</title>
</head>

<body>
<div id="Logo">
 <a href="#" id="logoLink"></a>
</div>
<div id="Nav">
 <ul>
     <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
</body>
</html>
/* 公共部分 */
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
/*头部logo区域*/
#Logo{
 height:80px;
 position:relative;/*相对定位*/
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 position:absolute;
 top:20px;
 left:0;
}
/*导航条*/
#Nav{height:42px;}
#Nav ul{
 height:42px;
 list-style:none;
 background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
 display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
 height:42px; 
 color:#FFF;
 padding:0 10px;
 line-height:42px;
 font-size:14px;
 font-weight:bold;
 font-family:Arial;
 text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
 float:left;
}
#Nav ul li a:hover{background:#68acd3;}


本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处! 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索布局 , 页面 , 定位 , position , 元素 height 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

jquery-jQuery的问题!!!!!!!

...是 "+$("#sel2").find("option:selected").text()+&#039;---&gt;&#039;+day+"天"); var lj1 = 0; lj1 = input1+lj; $("#lj1").val(lj1.toFixed(2)); var lj2 = 0; lj2 = (input1+lj)*0; $("#lj2").val(lj2.toFixed(2)); } //计...

WEB2.0标准教程:第七天 CSS入门

在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。 如果你已经很熟悉了,可以跳过这一节。 CSS是Cascading Style Sheets(层叠样式表)的缩写。 是一种对web文档添加样式的简单机制,属于表现层的布局语...

如何在十天内学会php之第七天

学习目标:学会SESSION的应用 SESSION的作用很多,最多用的就是站点内页面间变量传递。在页面开端我们要session_start();开启SESSION; 然后就可以应用SESSION变量了,比如说要赋值就是:$_SESSION['item']='item1';要得到值就是$item1=$_SESSION[...

初接触 Sass 与Compass 遇到的几个坑

...些预处理器是偷懒人士的做法,但现在发现应该是用CSS 驾驭得好的才能用好这些预处理器。提高效率的工具之所以能提高效率在于使用的人本身有能力驾驭这个工具(有点拗口)。并且很考验开发者的整体的重构能力,貌似一...

我的第七课:jQuery 效果 - 滑动

我的第七课:jQuery 效果 - 滑动,有需要的朋友可以参考下。  jQuery 效果 向上向下以及切换滑动如下: $(document).ready( function() { $(".flip").click( function() { $(".panel").slideDown("slow"); } ); } ); $(document).ready( function() ...

前三篇
后三篇