利用html+css进行制作静态网页制作,熟悉项目制作流程,建立起编写代码习惯。
一、项目分析
1.以下为静态网页的效果图,此文章目的利用html+css完成效果图;
2.此页面为三栏式结构,div+css直接进行三栏式布局;
3.需要进行CSS初始化;
4.当鼠标悬浮图片上方时,实现的覆盖显示效果:
项目比较简单,没有什么太多坑的地方(还是我没看出来。。。),做一个自适应的布局页面(现在还没搞清楚自适应和流体布局,,,后续再写个blog搞搞清楚这个吧)。
二、Let’s go!
1. 结构显示:
先将页面内所有需要展现的内容呈现(未加CSS样式效果):
因为图片模块实现效果一样,所以在编写的时候并未全部呈现,最后完成布局样式调整后直接添加。
2.CSS样式:
在增加样式过程中,总结以下问题:
1)每个模块间隔需要从包裹内容的根元素进行定义,将大体轮廓切出;一定要利用好div标签,进行模块划分。
2)box-sizing的用法:(值)border-box,指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算。 可加入到初始化CSS代码中。
详细的解析:https://www.jianshu.com/p/e2eb0d8c9de6
3)icon图标在线引用:
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
具体用法:
link图标在线css链接(上述网址获取),并在需要加入icon图标加入样式类名iconfont & 图标样式类名(同为上述网址获取),就可以啦。
4)页面注重统一性,关于字体的大小以及颜色,最好在一开始body中定义以保持统一性。
5)列表符号:list-style-position: inside; 可使符号位于盒子内部。
6)表单:后续整理另写一篇blog
input type运用。
input 和 select 设置宽度相同却不一致:
解决方法:
select的css width样式,包含边框和内边距,即:真实的width=CSS width。
而input的css width样式,则不包含边框和内间距,真实的width=CSS width border padding。
解决的方法:
设置select的CSS width = input 的CSS width+ border +padding
3.效果图:
页面字体样式后续作为基调设置,不然后续改起来太麻烦了….
效果图上四个页面都已经做好了,基本header & footer是一样的,就中间部分需要重新编写,迟些把代码传到GitHub….