标签：注释 12px ima 书写方式 还需 知识 如何 black 恢复
---恢复内容开始---
学习前端知识也有一个月了吧，十月十四号来到这里学习的，一直到11月7号，差不多也有一个月的时间了，所以今天想谢谢这个时间段学到的一些知识，也留着以后能够回头看看这段时间的付出。
今天写的主题内容是一个简单的网页制作，用的模板的话就是传智的首页，因为自己素材只有传智首页的素材罢了。。。
对我而言，想要去设计一个网站，我先会做大量的分析，第一步做的就是对整个网站的整体框架的和模块的划分。就例如传智首页来说，我选择将这个首页看成是一个最大的整体模块，然后在这个模块里面去再划分众多小的模块。如图1.2.3所示。做完模块的划分之后就比较简单了，我们只要去实现每个模块部分功能就可以的，下面我将一步步来讲解这个过程。
首先我把这个整体的大模块用box定义，然后下面我们先写box下的第一个小模块，也就是这个网页的标题模块，我们把这个模块用top定义，
1 <div class="top"> 2 <span class="top1floatl"> 3 专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构</span> 4 <ul> 5 <li ><a href="#" class="floatr" >网站首页</a></li> 6 <li ><a href="#" class="floatrred">免费公开课</a></li> 7 <li > <a href="#"class="floatrred" >校园生活</a></li> 8 <li ><a href="#" class="floatrblue">传智特刊</a></li> 9 <li ><a href="#"class="floatr">人才服务</a></li> 10 <li><a href="#"class="floatr">招贤纳士</a></li> 11 <li ><a href="#"id="floatr9">联系我们</a></li> 12 13 14 </ul> 15 16 </div>
先把最基础的网页HTML代码写了，然后再给他加样式，也就是通常我们所说的，想做好一道菜，我们先把食材摆上来，把食材准备好。按网页的需求我们写好这些HTML代码，网站要求当我们点击的时候，能够实现跳转的功能，所以我们给这些文字添加了跳转的链接标记。
1 /*top模块*/ 2 3 .box .top a:link,a:visited{color:#444; border-right:dotted 1px #444;padding-right:8px;} 4 .box .top a:hover{color:red;} 5 .box .top .floatrred:link,.box .top .floatrred:visited{color:red;} 6 .box .top .floatrblue:link,.box .top .floatrblue:visited{color:blue;} 7 #floatr9{border:none;} 8 .box .top {height:27px;} 9 .box{width:973px; margin:0px auto;} 10 .box .top ul{float:right;} 11 .box .top .top1floatl{float:left;line-height:27px;color:#0181CC;} 12 .box .top ul li{float:left;line-height:27px;margin-right:10px;}
写完这个模块的HTML代码之后，我们就要开始给它添加样式了，也就是我们的CSS代码，当然，这里为了让整个网页的代码显得更加整洁，美观，我选择了外链式CSS代码，将HTML代码，JS代码，JQ代码，CSS代码分割开，能让整个网页设计页面看的更加抢出一些，也是为了后期的修改和调试更加方便一点。这里的外链式方式就是在link标记的href中添加CSS代码的路径。如下：
1 <link rel="stylesheet" type="text/css" href="css.css" />
只有在link标记中添加了CSS代码的路径代码才会生效，将外部的CSS代码引入到HTML文件当中以后，我们就要开始对这个模块的HTML代码进行样式书写了。可能我的这一种至上而下，一步步写的方式和很多人不一样，有些人可能都是将这些HTML文件全部写完，然后开始写CSS文件，经过了这么多的模块练习，我也发现到了自己这种书写方式的弊端，一个模块一个模块的书写很多时候并不能达到防止漏写的效果，相反，当写完一个模块的时候，我想要去调试一下是不是达到自己所要的效果的时候，却没办法展示效果，这也是我现在一直打算改掉自己这种问题的原因所在。我们都知道，在书写CSS样式的时候，我们第一件事做的应该就是设置好一些全局样式，但是像我那样HTML代码还一个模块一个模块写的话，这个全局样式很多时候都不好写。
1 body,h1,h2,h3,h4,ul,li,a{margin:0;padding:0} 2 body{font-size:12px; color:#F1F1F1;background:#ccc url(images/bg-body.gif) repeat-x;} 3 /*去掉所有的ul li下的标记符号*/ 4 ul,li{list-style:none;} 5 /*因为图片也是有边框额 所以要去点图片的边框*/ 6 img{border:none;} 7 /*去掉所有a链接标记下的下划线*/ 8 a{text-decoration:none;}
这边代码里面我也做好了整个注释，一是为了让整个代码层次更加分明一点，还有就是方便后期的修改和调试。在写样式前，我们要写做好全局样式的设置，在这个网页中，需要设置的有body，标题标记，还有用到的众多无序列表，有序列表，还有对这整个网页的body标记的设置。
对TOP模块的CSS样式书写的话这里还是比较简单的，很明显这是一个span标记和无序列表。但是span标记是属于行内元素，而无序列表是块元素，这两个是怎么排在同一行的呢？我们第一反应应该就是浮动（float）吧，没错，这里用的就是浮动效果。首先，我们将span标记左浮动，整个的无需裂变右浮动，这样就可以实现一个行内元素和块元素排在同一行，但是我们发现这样做的效果还是和预期的不一样，为什么呢？虽然无序列表做了一个右浮动，但这是一个无序列表的整体右浮动，他的li还是占着每一行，所以我们需要做第二次浮动，对这个无序列表li的浮动。写到 这里应该有很多人会有一个问题，我们经常说在做浮动的时候要记得清楚浮动，但是这里为什么我们没有做清楚浮动？我不知道大家有没有认真注意到代码的一个细节，在这里，我们已经对这个模块做了宽高的设定，在清楚模块的学习的时候我们知道，如果对这个模块做过了固定宽高设定，那么他还需要清楚浮动吗？？
做完了第一个模块的设置之后，我们就可以往下写第二个模块了。前面我们说过了，对这个网页做了第一次的整体布局分析，那么在对模块做具体设计的时候，我们还要做一个模块内的内容功能分析。对这个模块来说，构造其实还是比较见到的。我们可以看到这事一个大的DIV，然后里面嵌套三个div,第一个和第三个div里面装的是一张图片，第二个div装的是一个经过浮动的无序列表罢了。
1 <!--logo开始--> 2 <div class="logo"> 3 <div class="div1"> 4 <img src="images/logo.gif" /> 5 </div> 6 <div class="div2"> 7 <h2>PHP学院</h2> 8 <ul> 9 <li><a href="#">北京校区</a></li> 10 <li><a href="#">广州校区</a></li> 11 <li><a href="#">深圳校区</a></li> 12 <li><a href="#">广州校区</a></li> 13 </ul> 14 </div> 15 <div class="div3"> 16 <img src="images/topword.gif"> 17 </div> 18 <div class="clear"></div> 19 </div> 20 <!--van开始--> 21 <div class="van">
1 /*logo模块*/ 2 .box .logo{height:120px; padding:0px 10px; /*border:1px solid red;*/} 3 .box .logo .div1{width:210px;/*border:1px solid red;*/height:97px;float:left;padding-top:23px;} 4 .box .logo .div2{width:375px;height:120px;/*border:1px solid red;*/float:left;} 5 .box .logo .div2{color:black;} 6 .box .logo .div3{width:360px;height:100px;/*border:1px solid red;*/float:right;} 7 .box .logo h2{color:#0473C4;margin-top:40px;} 8 .box .logo .div2 ul li{float:left;width:73px; ;background-image:url(images/li01.png);margin-right:10px;line-height:20px;padding-left:5px;} 9 .box .logo a{color:white;} 10 .box .logo ul{padding-top:10px;} 11 .box .logo .div3{padding-top:20px;}
---恢复内容结束---
标签：注释 12px ima 书写方式 还需 知识 如何 black 恢复
原文地址：http://www.cnblogs.com/yexiaodoong/p/6057996.html
