开发者学堂课程【零基础学前端 HTML+CSS ：顶部】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5153
顶部
1、构建网页的代码，在构建代码之前需要针对目录做一些更改，需要把所用到的图像都放在一个目录下，要有规矩的放在一个目录下，要用英文的名字给它起好，在这里当作根目录的 ATM 文件。
2、用一个新的文件生成，当作新的 html 文件，找到目录，名字改成 index.html 首页的意思。
3、在 title 这里写“快租客”，下面的工作就是要随时看页面的构成，构成进行一个分析，分析里面的结构都是什么，怎么去改这里面结构。
4、首先需要衡量内容的尺寸，安装一个软件 Macromedia
Fireworks，这个是一个比较老的版本的软件，现在的都叫 cs3，虽然软件比较老，但是运行速度很快，用它主要测量一下原文件的设计图，比如文字的字号，里面的花是多大，但是一般情况在实际的工作当中，设计人员都会标号，因为这块没有标注，所以取这个图像，看到原文件以后，就知道这个图像这个框需要做多大。
5、回到页面，添加一个样式，名字是 css。
6、在样式表文件里面，把它们 link 进来，直接 link，css 样式，首先看 css 目录保存在哪里，再看一下目录的结构，不要让目录出错，一般来讲要放在一个目录下，但是要这里要放在一个单独的目录下，这样就能连接上，测试一下代码。
Css.css 中代码：
Body{
background-color: yellow;
}
Index.html中代码：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title>快租客</title>
<link href=”css.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
</body>
</html>
运行看效果。样式跟结构已经绑定在一起了。
7、可以先做出最大外框的结构，上面是一个标题栏，top 的区域，中间是一个搜索的区域，下边是一个广告的区域，再往下是图像的区域，底部是评价的区域，最后最下面是角标的区域。
8、在这里分别制定 div，用 id 进行表示，id=nav，这是顶部的内容，顶部的下面主要是一个检索的区域，开方式广告的区域，id=nav-s 检索的一个区域，再下面是是一个广告的区域，id=ad，自定义进行一个命名就可以，再往下是主内容的区域，id=main，主内容肯定会做嵌套，再往下是点评的区域，id=dianping，最下面是 id=foot，角标区域，首先把 body 的北京颜色初始化为白色，首先让它变成一个纯白的页面，加一个 background-image 图像，图像下面有一个 url，url 找到一个放图像的目录，找到 images下bg.jpg，这是放图像的文件，刷新执行。
background-color: #ffffff;
background-image: ur1("images/bg. jpg') ;
9、把图片加到背景上，不希望它重复，输入 background-repeat：no-repeat，再刷新就可以看到它不重复。
background-repeat: no-repeat ;
10、background 再 position 有一个定位，可以针对于 center 进行一个定位，刷新以后，定位在中间。
background-position: center ;
11、再输入 top，进行 top center 的定位，刷新。上下居中，左右居中，顶端居中。
background-position: top center ;
12、改变 div 上面的封条，这些封条为了让它自适应这个屏幕，宽度就做成百分百的。制定一个最大宽度 1920px 和最小宽度 960px，它能在这个宽度里面正常的显示，背景颜色变成纯白颜色，
Css.css 中代码：
Body{
background-color: #ffffff ;
background- image: url("images/bg. jpg") ;
background-repeat: no-repeat ;
background-position: top center;
}
#nav{
width: 100%;
min-width: 960px;
max -width: 1920px;
background-color:#ffffff;
}
13、在 index.html 中输入一些文字：
<div id=”nav”>顶部</div>
<div id=”nav-s”>搜索</div>
<div id=”ad”>广告</div>
<div id=”main”>主区域</div>
<div id=”dianping”>点评</div>
<div id=”foot”>底部信息</div>
再刷新可以看见顶部的白条出来了。
14、首先改变顶部白条的高，参数里面并没有给，可以在软件里面量一下它的高度，可以看到显示的高度是60，刷新一下，顶部的高度就是60像素。
15、可以发现页面最上面有一个缝隙，这是因为浏览器初始化时有一些固有的属性在里面，像搜狐，它都有一个叫格式化页面的代码，但是这个可以自己写，比如打开 sohu.com，选择查看网页源代码，它里面就有一段代码叫做全局 css 定义，它里面值都等于0，可以直接拿来用。把代码复制上以后，再刷新就会发现缝隙没了。一般网页比较习惯于写全局的东西，就是把整个网页的可能固有的东西取消掉。这里面还写了一些 h6 的大小，这些都是一些固定的大小，所以在默认值以上再修改里面细节的参数。
Css.css 中代码：
/*全局 CSS 定义*/
body{font-family:"\5B8B\4F53" , "Arial Narrow" ,HELVETICA ; text-align:cente
body > div{ text-align: center ; margin-right
: auto ; margin-left:auto; }
div , form, ul , ol,li, span , p{margin: 0; padding
:0 ; border :0;}
img,a img{border : 0 ; margin: 0; padding:0;}
h1,h2, h3,h4, h5,h6{margin:0;
padding:0;font-size:12px;font-weight:normal;
ul,ol,li{list-style: none}
table, td ,input{font-size: 12px ; padding:0}
body{
background-color: #ffffff;
background-image:url ( "images/bg.jpg");background-repeat: no-repeat;
background-position: top center;
}
16、在顶部放 logo，输入 span 标签，菜单很多都是数据库里提出来的，比如菜单就一个两个，比较少，不从数据库提，用 span 直接写就可以，没有改变文字的大小，一会会处理文字大小，现在文字比较小无所谓。
<span>我要租房</span> <spn> 快租低价</spn>
17、如果是从数据库里提出来的，还有一种写法，写菜单的形式。<1i>我要租房菜单之前有写过，让它变成一个横行。
18、我要租房和快租低价这两个文字前面要加一个class，因为毕竟是首页主要的文字，class=text-botton 主要的标题，设置大小为20像素，一切的东西都要根据设计图，具体的样式可以再改。
19、还有一个登陆的图，可以整个都居于右边即可。这个肯定是有超级链接的，最右边是一个按钮的形态，也可以直接做一个按钮，就是用 div 的东西做了一个按钮，因为它是横行，再加一个 span 的标签，需要注意 class 起一个名字叫做 free-botton。因为 span 是一个横级元素，设置不了宽和高，按钮大小是186*39，加个背景颜色，可以在软件里面看见是什么颜色。
Index.html 中代码：
<span id=”top-right”>
<img src=”images/user-logo.gif”>登录注册<span class=”free-botton”>免费发布房间</span>
Css.css 中代码：
.free-botton{
width: 186px;
height: 39px;
background-color:_#FDCA00;display : inline-block ;
20、回到页面刷新之后可以会发现没有任何变化，span 的标签不具备块的元素，所以不能改变大小，这时需要通过 display 属性进行一个转变，转变成 inline-block，具体位置再进行调整。
Display：inline-block；
21、再去修改一下居右的尺寸，把 text-align 放在外面的边框里面。
.top-right{
text-align:
}
22、把内容放到右边，右边的内容是 id。右边的内容居右边，左边的内容居左边，在不同的尺寸下都在右边显示。
#top-right{
float:right;
}
23、在 span 里面多加一个图层，让它到左边，left">
#top-left{
float:left;
}
左边的内容加了 span 控制它，一个 span 控制右边部分，一个 span 控制左边部分，让左边的浮动到左边，右边的浮动到右边。
24、右边的按钮没有该名称，把登陆注册两个文字括起来，这样才能加 class，左边文字跟右边文字都是一样大小的，因为文字其实都是超级链接，所以在前面加上a 标签，href 等于空的链接，还得改变超级链接的样式，用line-height固定一下它的位置，就是它在行这有一个高度。
line-height：50px；
25、直接输入 font-size：20px；改变文字的大小即可。
