博客第二课－静态主页

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

<!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课程的时候再学也不迟。这个系列课程主要是带大家窥探下，打造网站的各个主要环节和技术构成，细枝末节的部分我们后续再探讨。

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

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

博客第二课－静态主页相关推荐

12. 橡皮擦技术博客写作课，第一版收尾篇，写作也要懂点心理学
欢迎来到橡皮擦的写作课本文内容:那些博客中的写作心理学心理学用在写作中随着不断的写作,橡皮擦发现其实博客写作与产品设计有很多相似的地方,在写作的时候,你可以主动去设计一些"套路&quo ...
β版本展示博客-第二组（攻城喵组）
>>>点击进入新版瀚海星云BBS<<< 测试账号:BBStest 密码:20180810bbs 一.前情回顾 ①团队介绍:超简洁版 →[攻 ...
基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能
由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...
一鼓作气博客--第二篇 note2
1.循环正常结束是指没有中间截断,即没有执行break; for i in range(10) print(i) else: print("循环正常结束") 2.嵌套循环 for ...
“项目冲刺”博客——第二篇
目录一.今日会议二.任务总结 2.1昨日任务 2.2今日任务三.燃尽图四.程序代码 4.1代码签入五.总结作业课程广工2023软件工程课程作业要求团队作业--项目冲刺作业目标第二 ...
简单的个人博客网站设计静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页设计作业
Scrum 冲刺博客第二篇
一.当天站立式会议照片一张二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中昨天已完成的工作配置和连接微信小程序服务器个人界面设计部主页界面设计答题界面设计今 ...
团队博客-第二周：需求规格说明书（科利尔拉弗队）
项目码云地址:https://gitee.com/pipiment/cat_community Github项目地址:https://github.com/maoniGroup/maoni 需求规格说 ...
Trick and Magic（OO博客第二弹）
代码是设计,不是简单的陈述.而设计不仅要求功能的正确性,更注重设计风格和模式. 真正可以投入应用的程序设计,不是那种无脑的"黑箱",超巨大的数组,多重循环暴力搜索,成吨全局变量-- ...

博客第二课－静态主页

博客第二课－静态主页相关推荐

最新文章

热门文章