第一次完整的静态页面

学习html和css以来，一直都只是写的小demo,从没有写过一个完整的网页,这两次模仿的腾讯云和页面就有很大的感触。

---

一、写一个页面的过程

1、布局与规划

因为写的是静态页面就用的是div+css布局，这种布局就要一开始对自己的页面的布局和规划进行构思，将整个页面分为几个大的div,并设置高和宽（注意外面最大盒子不应限制高度和宽度，它应该是被很多div撑起来的，如果设置了大小布局就显得比较死板）以及div之间的排列方式，eg:我的布局：

image.png

2.写html文档和css样式

给每个div写html文档，写文档时理清思路，知道每块内容应该使用的标签类型eg:对导航栏的每项内容用列表将其排列，如果有需要跳转到其他页面的将链接写在

标签内等。HTML完之后需要对每个内容添加样式。

3.对细节部分进行设计

对于页面导航栏置顶、一键置顶、悬停的功能，可以在整个页面大体样式出来之后进行单独的设计。

---

二、印象深刻的问题

1. 对于css继承性问题,子元素会继承父元素的属性。
2. 字体类型，css的font-family属性中依次添加多个字体的名称，显示的优先级是按先后顺序排列的，依次识别。
3. 相对大小的设定
   px是相对长度单位，是相对于屏幕分辨率的相对单位，em是根据继承关系的相对单位会受父元素影响。
4. 内联元素与块级元素的相互转换
   熟练使用display属性可以实现块级元素与内联元素之间的转换。

常用display属性：
none此元素不会被显示并且不占用空间；
block此元素显示为块级元素，此元素前后会带有换行符；
inline默认，此元素会被显示为内联元素，元素前后没有换行符；
inline-block行内块元素，前后无换行符；既具有block的宽高特性又具有inline的同行元素特性。

5. 定位
   a> 相对定位：position：relative 不脱离文档流，参考自身静态位置通过定位。但是定位之后它原来位置还在那。
   b> 绝对定位：position:absolute 脱离文档流，当父元素有相对定位时（一般选取最近的父元素），其可通过 top,bottom,left,right 进行相对父元素位置的定位。定位后原来的位置不在。eg:隐藏的下拉菜单。

c> 固定定位：fixed 固定定位，所固定的对像是可视窗口而并非是body或是父级元素。eg:导航栏置顶

6. 浮动造成的BFC问题
   很多时候我们会用到浮动，但是浮动会使该盒子脱离了文档流，造成父盒子的塌陷，一般需要给父盒子加入overflew:both或者其他清除浮动的方法。
7. css伪类hover的使用
   要实现当鼠标未点击时不出现，鼠标点击时才出现时可以用到css的伪类hover这个属性，如图可以使鼠标点击id为message1时message出现，未点击时不出现。

image.png

以上只是个人对制作静态网页小小的总结，如有错误，请大佬指点。