学习html和css以来，一直都只是写的小demo,从没有写过一个完整的网页,这两次模仿的腾讯云和简书页面就有很大的感触。
一、写一个页面的过程
1、布局与规划
因为写的是静态页面就用的是div+css布局，这种布局就要一开始对自己的页面的布局和规划进行构思，将整个页面分为几个大的div,并设置高和宽（注意外面最大盒子不应限制高度和宽度，它应该是被很多div撑起来的，如果设置了大小布局就显得比较死板）以及div之间的排列方式，eg:我的简书布局：
image.png
2.写html文档和css样式
给每个div写html文档，写文档时理清思路，知道每块内容应该使用的标签类型eg:对导航栏的每项内容用列表将其排列，如果有需要跳转到其他页面的将链接写在<li></li>标签内等。HTML完之后需要对每个内容添加样式。
3.对细节部分进行设计
对于页面导航栏置顶、一键置顶、悬停的功能，可以在整个页面大体样式出来之后进行单独的设计。
二、印象深刻的问题
- 对于css继承性问题,子元素会继承父元素的属性。
- 字体类型，css的font-family属性中依次添加多个字体的名称，显示的优先级是按先后顺序排列的，依次识别。
- 相对大小的设定
px是相对长度单位，是相对于屏幕分辨率的相对单位，em是根据继承关系的相对单位会受父元素影响。 - 内联元素与块级元素的相互转换
熟练使用display属性可以实现块级元素与内联元素之间的转换。
常用display属性：
none此元素不会被显示并且不占用空间；
block此元素显示为块级元素，此元素前后会带有换行符；
inline默认，此元素会被显示为内联元素，元素前后没有换行符；
inline-block行内块元素，前后无换行符；既具有block的宽高特性又具有inline的同行元素特性。
- 定位
a> 相对定位：position：relative 不脱离文档流，参考自身静态位置通过定位。但是定位之后它原来位置还在那。
b> 绝对定位：position:absolute 脱离文档流，当父元素有相对定位时（一般选取最近的父元素），其可通过 top,bottom,left,right 进行相对父元素位置的定位。定位后原来的位置不在。eg:隐藏的下拉菜单。
c> 固定定位：fixed 固定定位，所固定的对像是可视窗口而并非是body或是父级元素。eg:导航栏置顶
- 浮动造成的BFC问题
很多时候我们会用到浮动，但是浮动会使该盒子脱离了文档流，造成父盒子的塌陷，一般需要给父盒子加入overflew:both或者其他清除浮动的方法。 - css伪类hover的使用
要实现当鼠标未点击时不出现，鼠标点击时才出现时可以用到css的伪类hover这个属性，如图可以使鼠标点击id为message1时message出现，未点击时不出现。
image.png
以上只是个人对制作静态网页小小的总结，如有错误，请大佬指点。
