css 波动(float)网页页面合理布局(下)

2021-03-13 13:31 jianzhan
【第7步 內容左边板块(ContentL)合理布局】
大家剖析1下他的构造,关键包含题目和文章内容內容两块,而且题目和內容之间有1条虚线,而第2篇文章内容的內容一部分是照片和文本相融合且文本围绕照片。
好~!既然弄清楚构造了,后边大家合理布局就非常容易了
我准备题目用<h1>标识,为何这么用呢,缘故以下


第1:<h1>标识自身字体样式便是加粗的这样CSS里边就无需再界定字体样式粗细
第2:假如题目用<h1>的话,检索模块会最先抓取<h1>里边的內容,随后提取重要词,这样他人在检索模块中键入重要词,会更非常容易寻找你的网站哟~随后总流量就唰唰滴~^_^


针对文章内容內容,大家就放到<p></p>中就OK了,相应的编码以下:


HTML编码:

拷贝编码
编码以下:

<div id="ContentL">
<h1>CSS学习培训互动交流小区欢迎您!</h1>
<p>大家是1群喜爱网页页面前端开发技术性并热衷于于营销推广W3C规范的热情朋友,假如您想学或正在学DIV+CSS合理布局网页页面,添加大家!您会很快收服并掌控这匹烈马!尽管大家的论坛正在起步,可是这里的每一个人都很喜爱网页页面前端开发技术性并热衷于于营销推广W3C规范在我国的应用,要是你有难题便可以问,1定会有人帮你解答!大家将会并不是大神,可是大家全是很乐于协助,乐于刻苦钻研。大家都很热情!</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;/*这句话的目地便是以便让文章内容第1行缩进两个中国汉字,记牢这句话就OK了*/
}


到这里大家第1篇文章内容早已合理布局结束,下面合理布局1下第2篇文章内容,估算大伙儿早就留意到了,两篇文章内容唯1差别便是第2篇文章内容的內容的左边有1张照片,哈哈,这就好办了,把第1篇文章内容的编码拷贝过来,更换题目和文章内容內容,随后再文章内容內容里边插进1张照片就OK了,编码以下:


HTML编码:

拷贝编码
编码以下:

<h1>跟KwooJan学习培训DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" _fcksavedurl=""Images/1.gif"" />群上许多盆友在刚触碰DIV+CSS的情况下,很迷茫,不知道道从何学起,看在网上的实例教程吧,基础理论性的物品太多,越看越胡涂,再说時间上也不容许,也沒有那个细心,实际上KwooJan也不喜爱看这类视頻实例教程,很枯燥乏味,很枯燥,即便耐着脾气看完获得也不大,好用性不大,群上的1些盆友告知我,她们学习培训DIV+CSS沒有思路,不知道道如何去学,怎样去学,期待KwooJan能带着她们1步1步走,从今日刚开始我将写个实例教程,准备以事例为主,帮主大伙儿更轻轻松松的掌控DIV+CSS。好了,在这里我务必要给大伙儿改正1个不正确,大家平常说的DIV+CSS实际上是1种不正确的说法,是我国人自身创造发明的,其实不精确,不可以够将所谓的网页页面合理布局观念说的很准确,实际上应当说XHTML+CSS才对。</p>

可是假如大家预览实际效果的话,确是这模样的

不仅照片沒有靠左侧,并且文本的上方也有1大片空白,应当如何做呢?很非常容易,要是大家给照片左边波动(float:left;)便可以了,CSS编码以下:

拷贝编码
编码以下:

#Content #ContentL p img{
float:left;
}

实际效果以下,很贴近了吧,只但是照片的左边和文本靠的太贴近了

这个很好处理,设定照片的右外边距(margin-right)嘛~,CSS编码以下:

拷贝编码
编码以下:

#Content #ContentL p img{
float:left;
margin-right:10px;
}

这下实际效果1样了吧~!~!~!
OK!到这里ContentL板块合理布局搞定!
【第8步 內容右边板块(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像素的间距*/
}

而內容的第1句“CSS学习培训互动交流小区QQ群:”的编码以下

HTML编码:

拷贝编码
编码以下:

<strong>CSS学习培训互动交流小区QQ群:</strong>

CSS编码:

拷贝编码
编码以下:

#Content #ContentR strong{
display:block;/*仅有把strong标识,转换成块状元素,margin-bottom:5px;才会起功效,才可以使<strong>与下面的元素保持1定间距*/
font-size:12px;
color:#333;
margin-bottom:5px;
}

好~!第1行搞定!
下面的两行鲜红色的QQ群信息内容如何做?实际上这个有许多方法

方式1:ul、li或dl、dt、dd来合理布局
方式2:报表(Table)来合理布局
方式3:用单纯性的标识来合理布局例如<p>、<span>、<div>等标识
实际上在这里,我最强烈推荐第2种方式,将会大伙儿看到这里挺想不透的,或觉着用Table很丢脸,如同沒有甚么技术性含量似的,实际上这时候候假如你无需Table,反而觉得你的技术性含量低,自身给自身惹麻烦,为何这么说呢
最先你务必了解DIV和Table的诞生目地不1样,DIV的诞生便是用来合理布局网页页面,而Table的诞生便是以便放数据信息,大伙儿看KwooJan全部写的编码,仅有合理布局网页页面大板块的情况下才用,还记得上节课1刚开始合理布局网页页面板块的情况下编码么

拷贝编码
编码以下:

<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>

全部网页页面就这5个DIV,别的地区1般无需,由于DIV的重任便是合理布局网页页面!
大伙儿常常会进到1个误区,会觉得在Web2.0时期,要是网页页面选用了Table便是沒有技术性含量,便是丢脸,如果网页页面中沒有1个table,全部元素所有用DIV做,那便是牛人!大伙儿留意了,如果别人对你说,我的全部网站沒有运用1个Table,这时候候你便可以觉得这本人做网页页面沒有甚么技术性含量,而且CSS编码非常繁杂,压根不可以算是1个大神,顶多是1个DIV的狂热分子结构,做的网页页面也能说是规范,许多用Table便可以简简易单完成的实际效果,非要用DIV去完成,不但使CSS文档非常的臃肿,并且使网页页面载入速率变慢。
因此在这里KwooJan提示大伙儿,1定1定要走出这个误区!
好了说了这么多,这块的编码以下:

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;
}

最终1句话就更简易了,编码以下

HTML编码:

拷贝编码
编码以下:

<span>期待有明显奋发进取精神实质和互帮互助精神实质的盆友请添加!1块讨论1块沟通交流1块学习培训!</span>

CSS编码:

拷贝编码
编码以下:

#Content #ContentR span{
font-size:12px;
}

至此大家每一个版块均以合理布局结束,可是却有两点缺陷:
1)IE6和FF中有1点却显示信息的却不1样,底部版权在FF中却跑到了的右边ContentR的下面,如图:
1)IE6和FF中有1点却显示信息的却不1样,底部版权在FF中却跑到了的右边ContentR的下面,如图:

造成缘故:是由于id为Content的div,沒有全自动融入里边ContentL的高宽比
处理方式:最简单的方式是设定Content的CSS特性overflow:hidden;
如何难题处理了吧~
2)由于ContentR的高宽比沒有ContentL的高宽比高,因此在ContentR的下面留有1块空白,如图:

处理方式:只必须把Content的情况色调设定成和ContentR情况色调1样就OK了
这个难题也处理了吧~
最后实际效果

至此,全部网页页面算是合理布局进行了,觉得如何?有不懂的就回应帖子告知我

顺带说1下:最后编码实际上还能够开展精简,这个算是给大伙儿1个思索题了
下节课,大家即将讲讲合理布局网页页面的第2种方式---精准定位