爱飞 发表于 2015-1-16 10:31:20

今天来学习第十天　div+css网页尺度结构实例教程（二）

Div是标签，承载的是内容，而css是层叠样式表，承载的是样式。其实我倒觉得Div是气球，css是氢气，两者结合，极尽所能。

[*]
[*]
（接上一篇，本节教程笔墨较多，对照单调，假如前边常识进修固定，能够间接下载源代码检察，哪一个中央不分明，再回过火来看哪一部分）
5、结构页面——头部和导航

有了上边的基本，上面的义务就是要使用html和css制造完成一个完全的网页了。先重新部入手下手，第三大节时我们已把全体框架给搭建好了，就像盖屋子一样，全体布局已出来了，上面就必要填砖支解空间了。先剖析下头部：分为两部分，一个是logo靠左边显现，一个是搜刮靠右边显现，那末结构时拔出两个div，一个向左浮动，一个向右浮动的体例来完成。别的另有良多种完成办法，好比logo用h1标签，搜刮用span，大概把logo做为背景图片也是能够的，不论接纳哪一种办法，要依据页面的需求选用一种最公道的办法。假如要在logo加上链接的话，那末就不克不及用背景图片的办法了。
<divid="header">
<divid="logo">此处显现id"logo"的内容</div>
<divid="search">此处显现id"search"的内容</div>
</div>
先在header里拔出以上两块元素。然后分离拔出响应的内容，在logo里拔出我们事前切割好的logo图片，在search里拔出一个表单，一个文本框和一个按钮，拔出后以下：
<divid="header">
<divid="logo"><formid="form1"name="form1"method="post"action="">搜刮产物<inputclass="inp_srh"type="text"name="textfield"id="textfield"/><inputclass="btn_srh"type="submit"name="button"id="button"value="查询"/></form></div></div><divclass="clearfloat"></div><divid="nav"><divid="nav_l"></div><divid="nav_r"></div><divclass="nav_main"><ul><li><ahref="#"><span>首页</span></a></li><li><ahref="#"id="nav_current"><span>企业旧事</span></a></li><li><ahref="#"><span>企业简介</span></a></li><li><ahref="#"><span>产物展厅</span></a></li><li><ahref="#"><span>企业汗青</span></a></li><li><ahref="#"><span>招商加盟</span></a></li><li><ahref="#"><span>网高低单</span></a></li><li><ahref="#"><span>接洽我们</span></a></li></ul></div><divclass="nav_son"><ul><li><ahref="#">企业静态</a></li><li><ahref="#">向导举动</a></li><li><ahref="#">产物资讯</a></li><li><ahref="#">关照通告</a></li></ul></div></div><divclass="clearfloat"></div><divid="maincontent"><divid="main">此处显现id"main"的内容</div><divid="side">此处显现id"side"的内容</div></div><divclass="clearfloat"></div><divid="footer">此处显现id"footer"的内容</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
6、结构页面——侧边栏

主体部分触及side和main两部分，的内容对照多，但都不难，本节教程没有增添甚么新的常识点，学起来其实不费劲。主体部分先从侧边栏提及，解说怎样切图时已说过，侧边栏能够共用一个款式，上面就先做一个通用的，拔出以下html代码
<divclass="side_box">
<h2><strong>产物</strong>导购</h2>
<divclass="side_con">此处显现class"side_con"的内容</div>
</div>
这里的题目接纳h2标签，没需要再用个div，另有“产物导购”中“产物”二字是白色字体，这里用strong标签，如许能够省往良多没需要的界说，以是在页面结构傍边必定要公道使用每个标签。讲到这里，有需要说一下第一节教程中讲的为何不克不及叫div+css而应当叫xhtml+css了，由于div只是xhtml中的一个标签，叫div+css会让很多伴侣误以为碰到块级元素就得用div，形成了div的滥用，而公道使用每一个标签，才是web尺度计划的一个原则。回过火来界说侧边栏的款式以下：
#side{float:right;width:228px;}
.side_box{margin-bottom:8px;}
.side_boxh2{height:25px;padding:6px10px010px;background:url(../images/side_bg.gif)00no-repeat;font-size:14px;color:#444;}
.side_boxh2strong{color:#f30;}
.side_con{padding:10px;background:url(../images/side_bg.gif)0bottomno-repeat;}
预览一下效果吧，是否是全体效果出来了，下边就必要界说里边各个部分了。

先看下产物导购部分，内容分为三部分，能够用ul、li列表的情势完成，前边的图标用背景图片来完成，能够在li上设置背景图片，但如许贫苦一点，每一个都必要设置，并且还得定位，有个更烦琐的办法是界说ul的背景图片，由于在切图标时，每一个图标之间的间距是依照最终效果的间距来切的。
<divclass="side_box">
<h2><strong>产物</strong>导购</h2>
<divclass="side_conproduct">
<ul>
<li><strong>语音营业：</strong><ahref="#">一般德律风</a>|<ahref="#">语音数字中继</a></li>
<li><strong>语音营业：</strong><ahref="#">一般德律风</a>|<ahref="#">语音数字中继</a></li>
<liclass="product3"><strong>语音营业：</strong><ahref="#">一般德律风</a>|<ahref="#">语音数字中继</a></li>
</ul>
</div>
</div>
仔细的用户已发明，这里的class后跟了两个款式称号，申明一个元素是能够界说多个款式的，两头用空格分隔。也能够把product款式界说在ul上。
说到能够界说多个款式，夸大一点：很多老手伴侣经常大批利用，如一个块元素必要设置边框，绿色笔墨和灰色背景以是就在css里界说：
.border{border:1pxsolid#f60;}
.color{color:#080;}
.bg{background:#ccc;}
然后在块元素上增添：
<divclass="bordercolorbg">此处显现新Div标签的内容</div>
实在这是一个十分欠好的写法，如许外表看似到达了代码重用性，但实践傍边，当必要把个中一个元素的的边框改成2px，怎样改？假如把.border的边框改了，那末一切使用这一款式的元素都改了。假如再在代码中增添一个款式，那末又得往改html代码，和代码和布局分别的理念相违反了。一个好的代码结构，不论今后怎样改作风，只用改款式表，而不必往改html代码，这才真正做到二者分别了。
扯远了，不外这点很主要，老手很简单犯这个偏差。回到方才的成绩上，给第三个li界说了一个product3款式，然后在款式表中界说它的底部边框为无，由于前边界说li的底边框为1px的虚线，而最初一个不必要，以是独自界说个款式把它作废失落，这里的product依据必要本人界说的称号，一样平常用能表达这块内容意义的简便英文来暗示，大概用拼音。有关款式定名上请参考：http://www.ckuyun.com/web_w3c/248.shtml。“产物导购”的款式界说以下：
.product{padding:0px10px;}
.productul{background:url(../images/icon2.gif)5px12pxno-repeat;}
.productulli{height:58px;padding:14px0064px;border-bottom:1pxdashed#dcdcdc;color:#777;}
.productullistrong{display:block;height:24px;color:#333;}
.productullia{color:#777;}
.productullia:hover{text-decoration:underline;}
.productulli.product3{border-bottom:none;}
“产物导购”完成后，下边该“利用问答”了。“利用问答”部分都是一问一答的情势，问答各接纳分歧的图标，并且问的笔墨加粗了。以是这部分接纳dl、dt、dd的情势来完成。
<divclass="side_conask">
<dl>
<dt><ahref="#">最新出的这个产物怎样利用？</a></dt>
<dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强了很多，利用办法加倍烦琐...</dd>
</dl>
<dl>
<dt><ahref="#">最新出的这个产物怎样利用？</a></dt>
<dd>该产物接纳全新的手艺，较上一...</dd>
</dl>
<dl>
<dt><ahref="#">最新出的这个产物怎样利用？</a></dt>
<dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强了...</dd>
</dl>
<dl>
<dt><ahref="#">最新出的这个产物怎样利用？</a></dt>
<dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强...</dd>
</dl>
<dl>
<dt><ahref="#">最新出的这个产物怎样利用？</a></dt>
<dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强了很多，利用办法加倍烦琐...</dd>
</dl>
</div>

.askdl{padding:10px0;border-bottom:1pxdashed#dcdcdc;}
.askdldt{height:22px;overflow:hidden;font-weight:bold;background:url(../images/icon.gif)0-149pxno-repeat;padding-left:20px;}
.askdldta{color:#666;}
.askdldd{color:#666;background:url(../images/icon.gif)0-198pxno-repeat;padding-left:20px;}
“利用问答”完成后，侧边栏就剩下“接洽我们”了，这个更复杂，间接拔出图片就好了，然后调剂一下地位就能够了。
<divclass="side_box">
<h2><strong>接洽</strong>我们</h2>
<divclass="side_concontact"><ahref="#"><formid="form1"name="form1"method="post"action="">搜刮产物<inputclass="inp_srh"type="text"name="textfield"id="textfield"/><inputclass="btn_srh"type="submit"name="button"id="button"value="查询"/></form></div></div><divclass="clearfloat"></div><divid="nav"><divid="nav_l"></div><divid="nav_r"></div><divclass="nav_main"><ul><li><ahref="#"><span>首页</span></a></li><li><ahref="#"id="nav_current"><span>企业旧事</span></a></li><li><ahref="#"><span>企业简介</span></a></li><li><ahref="#"><span>产物展厅</span></a></li><li><ahref="#"><span>企业汗青</span></a></li><li><ahref="#"><span>招商加盟</span></a></li><li><ahref="#"><span>网高低单</span></a></li><li><ahref="#"><span>接洽我们</span></a></li></ul></div><divclass="nav_son"><ul><li><ahref="#">企业静态</a></li><li><ahref="#">向导举动</a></li><li><ahref="#">产物资讯</a></li><li><ahref="#">关照通告</a></li></ul></div></div><divclass="clearfloat"></div><divid="maincontent"><divid="main"><divid="index_top"><divid="pic"><scriptlanguage=javascripttype="text/javascript">linkarr=newArray();picarr=newArray();textarr=newArray();varswf_width=269;varswf_height=210;varfiles="http://www.ckuyun.com/upload/2010-09/21/images/pic.jpg|http://www.ckuyun.com/upload/2010-09/21/images/pic1.jpg|http://www.ckuyun.com/upload/2010-09/21/images/pic2.jpg|http://www.ckuyun.com/upload/2010-09/21/images/pic3.jpg";varlinks="#|#|#|#";vartexts="";for(i=1;i<picarr.length;i++){if(files=="")files=picarr;elsefiles+="|"+picarr;}for(i=1;i<linkarr.length;i++){if(links=="")links=linkarr;elselinks+="|"+linkarr;}for(i=1;i<textarr.length;i++){if(texts=="")texts=textarr;elsetexts+="|"+textarr;}document.write(<objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"width="+swf_width+"height="+swf_height+">);document.write(<paramname="movie"value="http://www.ckuyun.com/upload/2010-09/21/images/indexpic.swf"><paramname="quality"value="high">);document.write(<paramname="menu"value="false"><paramname=wmodevalue="opaque">);document.write(<paramname="FlashVars"value="bcastr_file=+files+&bcastr_link=+links+&bcastr_title=+texts+">);document.write(<embedsrc="http://www.ckuyun.com/upload/2010-09/21/images/indexpic.swf"wmode="opaque"FlashVars="bcastr_file=+files+&bcastr_link=+links+&bcastr_title=+texts+&menu="false"quality="high"width="+swf_width+"height="+swf_height+"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"/>);document.write(</object>);</script><divid="login"><span><ahref="#"><divid="news_top"><h1>苹果iphone4手机将于9月25日在中国上市</h1><p>日前中国联通正式公布将于9月25日9时在中国年夜陆市场周全推出iPhone4，并为iPhone4用户量身定制了合约企图。</p></div><divid="news_list"><ul><li><span>9-22</span><ahref="#">纯CSS完成三列DIV等高结构</a></li><li><span>9-22</span><ahref="#">HTML元素的ID和Name属性的区分</a></li><li><span>9-22</span><ahref="#">完善兼容ie6,ie7,ie8和firefox的css通明滤镜</a></li><li><span>9-22</span><ahref="#">DIV+CSS完成缩小镜效果的分页款式</a></li><li><span>9-22</span><ahref="#">javascript为FF设置首页</a></li><li><span>9-22</span><ahref="#">复制到体系剪贴板之IE,ff兼容版</a></li></ul></div></div></div><divid="index_pic"><h2><span></span></h2><ul><li><ahref="#"><divclass="box"><h2><aclass="more"href="#">更多..</a><span>企业汗青</span></h2><divclass="box_con"><dl><dt><ahref="#"><strong>多角度对照苹果iPod系列真机</strong></a>导言：北京工夫9月2日清晨1点苹果在旧金山举办新品公布会，数码特派记者在美国现场直播…</dd></dl><ul><li><ahref="#">纯CSS完成三列DIV等高结构</a></li><li><ahref="#">HTML元素的ID和Name属性的区分</a></li><li><ahref="#">完善兼容ie6,ie7,ie8和firefox的css通明滤镜</a></li><li><ahref="#">DIV+CSS完成缩小镜效果的分页款式</a></li><li><ahref="#">javascript为FF设置首页</a></li><li><ahref="#">复制到体系剪贴板之IE,ff兼容版</a></li><li><ahref="#">DIV+CSS完成缩小镜效果的分页款式</a></li></ul></div></div></div></div><divid="side"><divclass="side_box"><h2><strong>产物</strong>导购</h2><divclass="side_conproduct"><ul><li><strong>语音营业：</strong><ahref="#">一般德律风</a>|<ahref="#">语音数字中继</a></li><li><strong>语音营业：</strong><ahref="#">一般德律风</a>|<ahref="#">语音数字中继</a></li><liclass="product3"><strong>语音营业：</strong><ahref="#">一般德律风</a>|<ahref="#">语音数字中继</a></li></ul></div></div><divclass="side_box"><h2><strong>利用</strong>问答</h2><divclass="side_conask"><dl><dt><ahref="#">最新出的这个产物怎样利用？</a></dt><dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强了很多，利用办法加倍烦琐...</dd></dl><dl><dt><ahref="#">最新出的这个产物怎样利用？</a></dt><dd>该产物接纳全新的手艺，较上一...</dd></dl><dl><dt><ahref="#">最新出的这个产物怎样利用？</a></dt><dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强了...</dd></dl><dl><dt><ahref="#">最新出的这个产物怎样利用？</a></dt><dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强...</dd></dl><dl><dt><ahref="#">最新出的这个产物怎样利用？</a></dt><dd>该产物接纳全新的手艺，较上一产物有质的奔腾，功效上加强了很多，利用办法加倍烦琐...</dd></dl></div></div><divclass="side_box"><h2><strong>接洽</strong>我们</h2><divclass="side_concontact"><ahref="#"><imgsrc="http://www.ckuyun.com/upload/2010-09/21/images/tel.gif"alt="接洽我们"width="222"height="112"/></a></div></div></div></div><divclass="clearfloat"></div><divid="footer"><dl><dt><ahref="#">关于我们</a>　||　<ahref="#">产物目次</a>　||　<ahref="#">接洽我们</a>　||　<ahref="#">友谊链接</a>　||　<ahref="#">反应成绩</a>　||　<ahref="#">告白互助</a></dt><dd>Copyright

金色的骷髅 发表于 2015-1-18 06:47:52

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

爱飞 发表于 2015-1-22 07:00:43

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

不帅 发表于 2015-1-30 23:43:00

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

山那边是海 发表于 2015-2-6 17:19:59

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

飘飘悠悠 发表于 2015-2-17 17:45:32

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

仓酷云 发表于 2015-3-5 21:59:05

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

再现理想 发表于 2015-3-12 16:03:49

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

活着的死人 发表于 2015-3-19 23:59:32

学Dreamweaver技术的过程其实是一个增加信心的过程。
页: [1]
查看完整版本: 今天来学习第十天　div+css网页尺度结构实例教程（二）