博客第二课－静态主页

来源：互联网发布：澳大利亚科廷大学知乎编辑：程序博客网时间：2024/05/06 14:25

上一课为大家介绍了网页最基本的框架，这一篇我们将扩展上次的框架带大家定制博客的静态主页。什么叫静态页面，从字面上就很好理解，即内容不会动态改变的网页，和用户也没有任何交互，静态页面是动态网页的基础，下一课我们就会学到动态网页的知识了，不用着急，骚年，慢慢来…
请看代码：

<!DOCTYPE html>
<html>
<head>
     <title>静态主页</title>
     <style type="text/css">
          html{font-family: 'Microsoft YaHei','Arial','sans-serif'; background-color: #EEE;}
          body,div,ul,p{margin: 0px; padding: 0px;}
          h4{margin: 10px 0px;}
          ul{list-style: none;}

          div#title {position: absolute; margin-left: 70px; top: 15px; height: 60px;}

          div.record {margin-bottom: 40px;}
          div.record span{font-size: 12px; color: #7c7c7c;}
          div.record span.date{margin-left: 30px}

          div.detail {margin-top: 5px; font-size: 14px; line-height: 2; border-bottom: 1px dashed gray; padding-bottom: 20px;}

          div.footer {position:relative; background-color: #000; height: 60px; bottom: 0px; text-align: center; color: gray;}
          div.footer p{font-size: 12px; line-height: 60px;}
     </style>
</head>
<body>
<div class="header" style="position: relative; height: 100px; background-color: #000;">

     <div id="title">
          <p style="font-size: 28px; color: #fff;">程序员之我行</p>
          <p style="font-size: 14px; color: gray; margin-top: 5px;">路漫漫其修远兮，吾将上下而求索</p>
     </div>

</div>
<div class="content" style="margin: 20px 70px; min-height: 800px;">
     <ul>
          <li>
               <div class="record">
                    <h4>第一个静态博客</h4>
                    <div>
                         <span>晴</span>
                         <span class="date">2017/05/14</span>
                    </div>
                    <div class="detail">
上一课为大家介绍了网页最基本的框架，这一篇我们将扩展上次的框架带大家定制博客的静态主页。什么叫静态页面，从字面上就很好理解，即内容不会动态改变的网页，和用户也没有任何交互，静态页面是动态网页的基础，下一课我们就会学到动态网页的知识了，不用着急，骚年，慢慢来…
                    </div>
               </div>
          </li>
     </ul>
</div>
<div class="footer">
     <p>© ZASON 2017</p>
</div>
</body>
</html>

还是那句话，建议大家手抄代码,然后保存成index.html,请遵循这个命名，因为后续的课程还会用到这个文件。然后拖入浏览器看看效果，是不是比第一课的网页漂亮很多了？

这一课有点长，但是都很简单，凭大家的智商，完全可以一目十行^~^。我稍微解释一下上面的代码。

这一课的代码，除了上一课的html以外加入了一门新的语言－CSS,就是包含在style字样里的那些语句。CSS的全称是。还记得html的全称嘛，如果已经忘记了，你或许该翻翻上一课的内容。渣哥认为，做为一名称职的程序猿，知道一些英文缩写的全称是有必要的。

html和css都属于标记语言，说得通俗点，就是它们都不负责计算，只负责显示。如果把网页比喻成一间房子，html就是毛坯，而css可以看成是房间的装修了。你可以试着把css的部分去掉，然后对比一下两个页面的效果就知道我说的是什么意思了。温馨提示: 新手打造网站先写html，运行下看看效果，再加入css是一个好的习惯，这样能让你始终保持思路清晰。

css代码和html结合主要可以通过三种方式，这果只演示了两种，第一种是包含在<head>标签里，第二种是直接写在需要装饰的html标签里，另一种方式在第三课里会用到。下面说下本课中css的几种格式。

1：直接用html标签
例: ul{list-style: none;}
这种方式设置的效果会直接应用到当前page里所有ul标签，可以看作是全局生效的。

2：html标签 + # + html-id
例: div#title {position: absolute; margin-left: 70px; top: 15px; height: 60px;}
该例中这种方式应用在id为title的div上，大家可以回头在上面的代码中找到这个div标签。

3：html标签 + . + html-class
例: div.record {margin-bottom: 40px;}
该例中这种方式应用在class为record的div上，同样大家可以在上面的代码中找到这个html标签。

全局的方式大家应该很好理解，那么id 和 class有什么不同呢？id 和 class都是html的属性名称，id 主要用于标识该标签的角色是当前page中独一无二的，class则表示该角色同属于某个类别，换句话说id 是不能重复的，而class则是可以重复利用的。比如说，id 为 title 的div在本课中代表网页的头部，一个网页当然只有一个头部，所以用id作标识，而 class为record的 div代表博客的一篇文章，显然不会只有一篇，所以用了class。合理的应用id和class是写好css的关键，大家可以认真体会一下。

无论上述哪种格式，科学的说法叫做css选择器，主要的作用就是准确的定位到想要装饰的html标签。因为html是一门嵌套式语言，所以css当然也是啦，所以就有了这样的格式:

div.footer p{font-size: 12px; line-height: 60px;}

通过上面的讲解，大家应该知道它是想找哪个html标签了吧。

好啦，css暂时就会大家介绍到这里，篇幅有限，{}中的部分在这就不做过多解释了，大家可以自己百度一下相关的文档。如果你英文够好，估计也能猜个八九不离十(平时多学习下英文吧，骚年)，或者也可以等渣哥后续专门开css课程的时候再学也不迟。这个系列课程主要是带大家窥探下，打造网站的各个主要环节和技术构成，细枝末节的部分我们后续再探讨。

这一课就到这里，大家自行总结下都学到了什么，下一课我们就要进入后端的开发了，是不是很快？整个课程学完，你就是一名既懂前端又懂后端的全栈开发工程师了。为自己点个赞，我们下课再见。

<转自公众号: 程序员之我行>

阅读全文

0 0