如何写好一个网页---传智首页

Posted 2020-08-19

---恢复内容开始---

  学习前端知识也有一个月了吧，十月十四号来到这里学习的，一直到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;}

 

 

 

---恢复内容结束---