来谈谈：CSS实例教程:浮动(float)页面结构
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。网页制造poluoluo文章简介：CSS实例教程:浮动(float)页面结构
前四节的年夜实习人人做的怎样？有无难度，假如你觉着有难度没有干系，这节课，我带着人人做一下这个实习！
【第一步全体结构与大众CSS界说】
我们先来剖析一下这个页面
页面次要分5年夜块，顶部的Logo、导航条Nav、Banner、Content、Footer，以下图
如许HTML就很简单写出来了
<divid="Logo"></div>
<divid="Nav"></div>
<divid="Banner"></div>
<divid="Content"></div>
<divid="Footer"></div>由于这5块的宽度都是900像素，而且都是程度居中的，以是响应CSS代码以下
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:0auto;}【第二步结构Logo栏】
起首我们必要把页面上的logo给切割出来，其巨细为173*46,名字为：logo.gif
一样平常网站城市做到点击logo，就会回到主页，应当怎样做呢，人人起首会想到，给图片加上链接就能够了，代码一样平常会这么写
<ahref="#"id="logoLink">
<divid="ContentL">此处为右边ContentL</div>
<divid="ContentR">此处为右边ContentR</div>
</div>
CSS代码:
#Content#ContentL,#Content#ContentR{float:left;padding:15px;}/*为何都要左边浮动，假如不分明就往看第二节*/
#Content#ContentL{width:570px;background:#f0f0f0;}
#Content#ContentR{width:270px;background:#d3e7f2;}
页面效果：
内容部分我们就先做到这里，最初我们再结构内里的详细元素，上面接着来结构版权模块(Footer)
【第六步Footer结构】
这部分布局对照复杂，人人只必要晓得怎样结构就OK了
HTML代码：
<divid="Footer">
<p>版权回CSS进修</p>
<p>CSS交换QQ群:5505810/87951377/73513641/72263578</p>
</div>
CSS代码：
#Footer{
text-align:center;
background:#68acd3;
padding:10px0;
font-size:12px;
font-family:Arial,Helvetica,sans-serif;
color:#fff;
line-height:20px;
}
今朝效果以下：
就如许我们页面的全体布局基础出来了，剩下的事情就是内容板块外部元素的详细结构了，我将鄙人节课接着讲~
网页制造poluoluo文章简介：CSS实例教程:浮动(float)页面结构
我们接着上节课，持续进修，我把页面全体效果收回来，便利人人进修
【第七步内容左边板块(ContentL)结构】
我们剖析一下他的布局，次要包含题目和文章内容两块，而且题目和内容之间有一条虚线，而第二篇文章的内容部分是图片和笔墨相分离且笔墨围绕图片。
好~！既然弄分明布局了，前面我们结构就简单了
我盘算题目用<h1>标签，为何这么用呢，缘故原由以下
第一:<h1>标签自己字体就是加粗的如许CSS内里就不必再界说字体粗细
第二:假如题目用<h1>的话，搜刮引擎会起首抓取<h1>内里的内容，然后提取关头词，如许他人在搜刮引擎中输出关头词，会更简单找到你的网站哟~然后流量就唰唰滴~^_^
关于文章内容，我们就放到<p></p>中就OK了，响应的代码以下：
HTML代码：
<divid="ContentL">
<h1>CSS进修互动社区接待您！</h1>
<p>我们是一群酷爱页眼前端手艺并热中于推行W3C尺度的热情密友，假如您想学大概正在学DIV+CSS结构页面，到场我们！您会很快征服并把握这匹烈马！固然我们的论坛正在起步，可是这里的每一个人都很酷爱页眼前端手艺并热中于推行W3C尺度在中国的使用，只需你有成绩就能够问，必定会有人帮你解答！我们大概不是妙手，可是我们都是很乐于匡助，乐于研究。我们都很热情！</p>
</div>
CSS代码：
#Content#ContentLh1{
height:40px;
line-height:40px;/*设置行距，目标是包管h1中的笔墨垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px#969696dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距，让h1和上面的内容地区p坚持10像素的间隔*/
}
#Content#ContentLp{
font-size:12px;
line-height:20px;
text-indent:2em;/*这句话的目标就是为了让文章第一行缩进两个汉字，记着这句话就OK了*/
}效果以下：
这里我们第一篇文章已结构终了，上面结构一下第二篇文章，估量人人早就注重到了，两篇文章独一区分就是第二篇文章的内容的左边有一张图片，哈哈，这就好办了，把第一篇文章的代码复制过去，交换题目和文章内容，然后再文章内容内里拔出一张图片就OK了，代码以下：
HTML代码：
<h1>跟KwooJan进修DIV+CSS只需2天</h1>
<p>
<imgsrc="Images/1.gif"/>群上良多伴侣在刚打仗DIV+CSS的时分，很渺茫，不晓得从何学起，看网上的教程吧，实际性的器材太多，越看越懵懂，再说工夫上也不同意，也没有谁人耐烦，实在KwooJan也不喜好看这类视频教程，很单调，很有趣，即便耐着性质看完劳绩也不年夜，有用性不年夜，群上的一些伴侣告知我，他们进修DIV+CSS没有思绪，不晓得怎样往学，怎样往学，但愿KwooJan能带着他们一步一步走，从明天入手下手我将写个教程，盘算以例子为主，帮主人人更轻松的把握DIV+CSS。好了，在这里我必需要给人人改正一个毛病，我们平常说的DIV+CSS实际上是一种毛病的说法，是中国人本人创造的，其实不正确，不克不及够将所谓的页面结构头脑说的很切实，实在应当说XHTML+CSS才对。
</p>
可是假如我们预览效果的话，确是如许子的
不仅图片没有靠右边，并且笔墨的上方另有一年夜片空缺，应当怎样做呢？很简单，只需我们给图片左边浮动(float:left;)就能够了,CSS代码以下：
#Content#ContentLpimg{
float:left;
}
效果以下，很靠近了吧，只不外图片的左边和笔墨靠的太靠近了
这个很好办理，设置图片的右外边距(margin-right)嘛~,CSS代码以下：
#Content#ContentLpimg{
float:left;
margin-right:10px;
}
这下效果一样了吧~！~！~！
OK！到这里ContentL板块结构弄定！
【第八步内容右边板块(ContentR)结构】
有了ContentL板块结构的履历，右边就会很简单，题目“到场我们！”固然仍是用<h1>标签喽,好~！完工！
题目地区代码以下
HTML代码：
<h1>到场我们！</h1>
CSS代码：
#Content#ContentRh1{
height:40px;
line-height:40px;/*设置行距，目标是包管h1中的笔墨垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px#969696dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距，让h1和上面的内容地区p坚持10像素的间隔*/
}而内容的第一句“CSS进修互动社区QQ群：”的代码以下
HTML代码：
<strong>CSS进修互动社区QQ群：</strong>
CSS代码：
#Content#ContentRstrong{
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一切写的代码，只要结构页面年夜板块的时分才用，还记得上节课一入手下手结构页面板块的时分代码么
<divid="Logo"></div>
<divid="Nav"></div>
<divid="Banner"></div>
<divid="Content"></div>
<divid="Footer"></div>全部页面就这5个DIV，其他中央一样平常不必，由于DIV的任务就是结构页面！
人人常常会进进一个误区，会以为在Web2.0时期，只需页面顶用了Table就是没有手艺含量，就是丢人，如果页面中没有一个table，一切元素全体用DIV做，那就是牛人！人人注重了，如果或人对你说，我的全部网站没有使用一个Table，这时候候你就能够以为这团体做页面没有甚么手艺含量，而且CSS代码相称复杂，基本不克不及算是一个妙手，顶多是一个DIV的狂热份子，做的页面也能说是尺度，良多用Table就能够简复杂单完成的效果，非要用DIV往完成，不但使CSS文件相称的痴肥，并且使页面加载速率变慢。
以是在这里KwooJan提示人人，必定必定要走出这个误区！
好了说了这么多，这块的代码以下：
HTML代码：
<tablewidth="100%"border="0"cellpadding="0"cellspacing="0">
<tr>
<tdwidth="36%"height="20">1群：5505810</td>
<tdwidth="64%">2群：87951377</td>
</tr>
<tr>
<tdheight="20">3群：73513641</td>
<td>4群：72263578</td>
</tr>
</table>
CSS代码：
#Content#ContentRtable{
font-size:12px;
color:#900;
}最初一句话就更复杂了，代码以下
HTML代码：
<span>但愿有激烈朝上进步精力和合作精力的伴侣请到场！一块切磋一块交换一块进修！</span>
CSS代码：
#Content#ContentRspan{
font-size:12px;
}至此我们每一个版块均以结构终了，可是却有两点瑕疵：
1）IE6和FF中有一点却显现的却纷歧样，底部版权在FF中却跑到了的右边ContentR的上面，如图：
发生缘故原由：是由于id为Content的div，没有主动顺应内里ContentL的高度
办理办法：最烦琐的办法是设置Content的CSS属性overflow:hidden;
怎样成绩办理了吧~
2）由于ContentR的高度没有ContentL的高度高，以是在ContentR的上面留有一块空缺，如图：
办理办法：只必要把Content的背景色彩设置成和ContentR背景色彩一样就OK了
这个成绩也办理了吧~
最后的效果
至此，全部页面算是结构完成了，感到怎样？有不懂的就复兴帖子告知我
特地说一下：终极代码实在还能够举行精简，这个算是给人人一个思索题了
下节课，我们将要讲讲结构网页的第二种办法---定位
</p>
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素. 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
页:
[1]