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

2天驾驭DIV+CSS!第五课(下)

作者:用户 来源:互联网 时间:2016-06-26 09:53:46

布局页面代码pxcontentfont-size

2天驾驭DIV+CSS!第五课(下) - 摘要: 本文讲的是2天驾驭DIV+CSS!第五课(下), 大家经常会进入一个误区,会认为在Web2.0时代,只要页面中用了Table就是没有技术含量,就是丢人,要是页面中没有一个table,所有元素全部用DIV做,那就是牛人!大家注意了,要是某人对你说,我的整个网站没有应用

大家经常会进入一个误区,会认为在Web2.0时代,只要页面中用了Table就是没有技术含量,就是丢人,要是页面中没有一个table,所有元素全部用DIV做,那就是牛人!大家注意了,要是某人对你说,我的整个网站没有应用一个Table,这时候你就可以认为这个人做页面没有什么技术含量

我们接着上节课,继续学习,我把页面整体效果发出来,方便大家学习
 

2天驾驭DIV+CSS!第五课(下)-2天驾驭div <a href=css">
【第七步 内容左侧板块(ContentL)布局】
我们分析一下他的结构,主要包括标题和文章内容两块,并且标题和内容之间有一条虚线,而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。
好~!既然搞清楚结构了,后面我们布局就容易了
我打算标题用<h1>标签,为什么这么用呢,原因如下 
第一:<h1>标签本身字体就是加粗的这样CSS里面就不用再定义字体粗细
第二:如果标题用<h1>的话,搜索引擎会首先抓取<h1>里面的内容,然后提取关键词,这样别人在搜索引擎中输入关键词,会更容易找到你的网站哟~然后流量就唰唰滴~^_^
对于文章内容,我们就放到<p></p>中就OK了,相应的代码如下: 
HTML代码:
<div id="ContentL">
        <h1>CSS学习互动社区欢迎您!</h1>
        <p>我们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友,如果您想学或者正在学DIV+CSS布局页面,加入我们!您会很快驯服并驾驭这匹烈马!虽然我们的论坛正在起步,但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用,只要你有问题就可以问,一定会有人帮你解答!我们可能不是高手,但是我们都是很乐于帮助,乐于钻研。我们都很热心!</p>
</div>

CSS代码:
#Content #ContentL h1{
height:40px;
line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*这句话的目的就是为了让文章第一行缩进两个汉字,记住这句话就OK了*/
}
效果如下: 
2天驾驭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>无标题文档</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 id="ContentL">
  <h1>CSS学习互动社区欢迎您!</h1>
        <p>我们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友,如果您想学或者正在学DIV+CSS布局页面,加入我们!您会很快驯服并驾驭这匹烈马!虽然我们的论坛正在起步,但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用,只要你有问题就可以问,一定会有人帮你解答!我们可能不是高手,但是我们都是很乐于帮助,乐于钻研。我们都很热心!</p>
    </div>
    <div id="ContentR">此处为左边ContentR</div>
</div>
<div id="Footer">
    <p>CSS学习 alixixi.com整理</p>
    <p>CSS学习 alixixi.com整理</p>
</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;
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
 margin-top:20px;
}
/*导航条*/
#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;}

/*Banner*/
#Banner{
 height:290px;
 background:url(../Images/banner.jpg) no-repeat;
}

/*Content*/
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么都要左侧浮动,如果不明白就去看第二节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentL h1{
 height:40px;
 line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
 font-size:16px;
 color:#054d73;
 border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
 margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
#Content #ContentL p{
 font-size:12px;
 line-height:20px;
 text-indent:2em;
}
#Content #ContentR{width:270px; background:#d3e7f2;}

/*Footer*/
#Footer{
 text-align:center;
 background:#68acd3;
 padding: 10px 0;
 font-size:12px;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 line-height:20px;
}
到这里我们第一篇文章已经布局完毕,下面布局一下第二篇文章,估计大家早就注意到了,两篇文章唯一区别就是第二篇文章的内容的左侧有一张图片,哈哈,这就好办了,把第一篇文章的代码复制过来,替换标题和文章内容,然后再文章内容里面插入一张图片就OK了,代码如下:
HTML代码:
<h1>跟KwooJan学习DIV+CSS只需2天</h1>
<p>
        <img src="Images/1.gif" />群上很多朋友在刚接触DIV+CSS的时候,很迷茫,不知道从何学起,看网上的教程吧,理论性的东西太多,越看越糊涂,再说时间上也不允许,也没有那个耐心,其实KwooJan也不喜欢看这种视频教程,很枯燥,很乏味,即使耐着性子看完收获也不大,实用性不大,群上的一些朋友告诉我,他们学习DIV+CSS没有思路,不知道怎么去学,如何去学,希望KwooJan能带着他们一步一步走,从今天开始我将写个教程,打算以例子为主,帮主大家更轻松的驾驭DIV+CSS。好了,在这里我必须要给大家纠正一个错误,我们平时说的DIV+CSS其实是一种错误的说法,是中国人自己发明的,并不准确,不能够将所谓的页面布局思想说的很确切,其实应该说XHTML+CSS才对。
</p>
但是如果我们预览效果的话,确是这样子的
2天驾驭DIV+CSS!第五课(下)-div css课件
不但图片没有靠左边,而且文字的上方还有一大片空白,应该怎么做呢?很容易,只要我们给图片左侧浮动(float:left;)就可以了,CSS代码如下
#Content #ContentL p img{
float:left;
}
效果如下,很接近了吧,只不过图片的左侧和文字靠的太接近了
2天驾驭DIV+CSS!第五课(下)-div css
这个很好解决,设置图片的右外边距(margin-right)嘛~,CSS代码如下:
#Content #ContentL p img{
float:left;
margin-right:10px;
}
这下效果一样了吧~!~!~!
OK!到这里ContentL板块布局搞定!
【第八步 内容右侧板块(ContentR)布局】
有了ContentL板块布局的经验,右侧就会很容易,标题“加入我们!”当然还是用<h1>标签喽,好~!开工!
标题区域代码如下
HTML代码:
<h1>加入我们!</h1>

CSS代码:
#Content #ContentR h1{
height:40px;
line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
而内容的第一句“CSS学习互动社区QQ群:”的代码如下
HTML代码:
<strong>CSS学习互动社区QQ群:</strong>

CSS代码:
#Content #ContentR strong{
display:block;/*只有把strong标签,转化成块状元素,margin-bottom:5px;才会起作用,才能使<strong>与下面的元素维持一定距离*/
font-size:12px;
color:#333;
margin-bottom:5px;
}
好~!第一行搞定!
下面的两行红色的QQ群信息怎么做?其实这个有很多办法
方法一:ul、li或者dl、dt、dd来布局
方法二:表格(Table)来布局
方法三:用单纯的标签来布局比如<p>、<span>、<div>等标签
其实在这里,我最推荐第二种方法,可能大家看到这里挺想不透的,或者觉着用Table很丢人,好似没有什么技术含量似的,其实这时候如果你不用Table,反而认为你的技术含量低,自己给自己找麻烦,为什么这么说呢
首先你必须知道DIV和Table的诞生目的不一样,DIV的诞生就是用来布局页面,而Table的诞生就是为了放数据,大家看KwooJan所有写的代码,只有布局页面大板块的时候才用,还记得上节课一开始布局页面板块的时候代码么
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
整个页面就这5个DIV,其他地方一般不用,因为DIV的使命就是布局页面!
大家经常会进入一个误区,会认为在Web2.0时代,只要页面中用了Table就是没有技术含量,就是丢人,要是页面中没有一个table,所有元素全部用DIV做,那就是牛人!大家注意了,要是某人对你说,我的整个网站没有应用一个Table,这时候你就可以认为这个人做页面没有什么技术含量,并且CSS代码相当庞杂,根本不能算是一个高手,顶多是一个DIV的狂热分子,做的页面也能说是标准,很多用Table就可以简简单单实现的效果,非要用DIV去实现,不仅使CSS文件相当的臃肿,而且使页面加载速度变慢。
所以在这里KwooJan提醒大家,一定一定要走出这个误区!
好了说了这么多,这块的代码如下:
HTML代码:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="36%" height="20">1群:5505810</td>
            <td width="64%">2群:87951377</td>
        </tr>
        <tr>
            <td height="20">3群:73513641</td>
            <td>4群:72263578</td>
        </tr>
</table>

CSS代码:
#Content #ContentR table{
font-size:12px;
color:#900;
}
最后一句话就更简单了,代码如下
HTML代码:
<span>希望有强烈进取精神和互助精神的朋友请加入!一块探讨一块交流一块学习!</span>

CSS代码:
#Content #ContentR span{
font-size:12px;
}
至此我们每个版块均以布局完毕,但是却有两点瑕疵:
1)IE6和FF中有一点却显示的却不一样,底部版权在FF中却跑到了的右侧ContentR的下面,如图:
2天驾驭DIV+CSS!第五课(下)-div css教程
产生原因:是因为id为Content的div,没有自动适应里面ContentL的高度
解决方法:最简便的方法是设置Content的CSS属性overflow:hidden;
怎么样问题解决了吧~
2)因为ContentR的高度没有ContentL的高度高,所以在ContentR的下面留有一块空白,如图:
2天驾驭DIV+CSS!第五课(下)-2天驾驭div css
解决方法:只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了
这个问题也解决了吧~
最终效果
2天驾驭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>无标题文档</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 id="ContentL">
  <h1>CSS学习互动社区欢迎您!</h1>
        <p>我们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友,如果您想学或者正在学DIV+CSS布局页面,加入我们!您会很快驯服并驾驭这匹烈马!虽然我们的论坛正在起步,但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用,只要你有问题就可以问,一定会有人帮你解答!我们可能不是高手,但是我们都是很乐于帮助,乐于钻研。我们都很热心!</p>
        <h1>跟KwooJan学习DIV+CSS只需2天</h1>
        <p><img src="Images/1.gif" />群上很多朋友在刚接触DIV+CSS的时候,很迷茫,不知道从何学起,看网上的教程吧,理论性的东西太多,越看越糊涂,再说时间上也不允许,也没有那个耐心,其实KwooJan也不喜欢看这种视频教程,很枯燥,很乏味,即使耐着性子看完收获也不大,实用性不大,群上的一些朋友告诉我,他们学习DIV+CSS没有思路,不知道怎么去学,如何去学,希望KwooJan能带着他们一步一步走,从今天开始我将写个教程,打算以例子为主,帮主大家更轻松的驾驭DIV+CSS。好了,在这里我必须要给大家纠正一个错误,我们平时说的DIV+CSS其实是一种错误的说法,是中国人自己发明的,并不准确,不能够将所谓的页面布局思想说的很确切,其实应该说XHTML+CSS才对。</p>
    </div>
    <div id="ContentR">
      <h1>加入我们!</h1>
        <strong>CSS学习互动社区QQ群:</strong>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="36%" height="20">1群:5505810</td>
            <td width="64%">2群:87951377</td>
        </tr>
        <tr>
            <td height="20">3群:73513641</td>
            <td>4群:72263578</td>
        </tr>
        </table>
        <span>希望有强烈进取精神和互助精神的朋友请加入!一块探讨一块交流一块学习!</span>

  </div>
</div>
<div id="Footer">
    <p>css学习 alixixi.com 整理</p>
    <p>css学习 alixixi.com 整理</p>
</div>
</body>
</html>
/* 公共部分 */
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl,strong{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
/*头部logo区域*/
#Logo{
 height:80px;
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
 margin-top:20px;
}
/*导航条*/
#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;}

/*Banner*/
#Banner{
 height:290px;
 background:url(../Images/banner.jpg) no-repeat;
}

/*Content*/
#Content{overflow:hidden; background:#d3e7f2;}
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么都要左侧浮动,如果不明白就去看第二节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentL h1{
 height:40px;
 line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
 font-size:16px;
 color:#054d73;
 border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
 margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
#Content #ContentL p{
 font-size:12px;
 line-height:20px;
 text-indent:2em;
}
#Content #ContentL p img{
 float:left;
 margin-right:10px;
}
#Content #ContentR{width:270px; background:#d3e7f2;}
#Content #ContentR h1{
 height:40px;
 line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
 font-size:16px;
 color:#900;
 border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
 margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
#Content #ContentR strong{
 display:block;/*只有把strong标签,转化成块状元素,margin-bottom:5px;才会起作用,才能使<strong>与下面的元素维持一定距离*/
 font-size:12px;
 color:#333;
 margin-bottom:5px;
}
#Content #ContentR table{
 font-size:12px;
 color:#900;
}
#Content #ContentR span{
 font-size:12px;
}

/*Footer*/
#Footer{
 text-align:center;
 background:#68acd3;
 padding: 10px 0;
 font-size:12px;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 line-height:20px;
}
本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处!



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

css-CSS选择器的问题:.class.class{}

...式的 第三个是有id1 id2样式的 第四个是有id2 id1样式的 第五个是有id1样式的子节点有id2样式的 从演示代码可以看到,第三第四个的结果是一样的,说明.id1.id2中两个样式的顺序没有关系。也就是class="id1 id2"和class="id2 id1"对于.id...

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。 不过,你将能完整网页内容的HTML构成要素:更重要的...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

...用坐标。 n  内层元素设置绝对定位。配合着定位坐标。 第五节 限时抢 第六节 margin合并的问题 n  margin,上下合并(大吃小),左右叠加 第七节 常见布局 第八节 浏览器兼容性 浏览器市场份额:http://tongji.baidu.com/data/browse...

Linux服务器上的MySQL数据库宕掉的原因

...删除一些文件,腾出可用空间 rm:是否删除普通文件"5-10第五课创业方式选择故事5专家点评.rar"。y rm:是否删除普通文件"5-1第五课创业方式选择故事1教学案例.rar"。y rm:是否删除普通文件"5-2第五课创业方式选择故事1专家点评.r...

[JQuery] JQuery第五课

说明 本文转自JQuery/jquery-animate.html">菜鸟教程。 JQuery动画 JQuery animate()方法用于创建自定义动画,其语法如下: $(selector).animate({params}, speed, callback); 必须的params参数定义形成动画的CSS属性,可选的 speed 参数规定效果的时长。它...

前三篇
后三篇