HTML整站规划笔记

最新推荐文章于 2023-09-15 16:58:26 发布

沐风的心

最新推荐文章于 2023-09-15 16:58:26 发布

阅读量933

点赞数 1

分类专栏： HTML、CSS笔记文章标签：整站规划样式重置前端规范 CSS兼容布局比较

本文链接：https://blog.youkuaiyun.com/JimmyLuo17/article/details/50987450

版权

HTML、CSS笔记专栏收录该内容

16 篇文章

订阅专栏

1. 网站的首页一般用index.html命名，如此命名是因为与服务器的默认设置有关系。导航栏的其他二级页面，都用英文命名，一是显示专业性，二是更加适合搜索引擎进行收录。

2. 一般主页HTML文件和二级页面HTML文件都放在同一个项目文件夹内。在这个项目文件夹内，一般会并列的建立如下文件夹：css、js、img和pages，或者是其他更新比较频繁的二级页面文件夹。Pages基本上是放其他三级页面或者是扉页的。

3. 做一个网站的CSS的整体考虑：

a) 网站的加载速度：一个网站打开在5秒中之内，基本上网站的用户量流失量在1%之内；超过5秒之后，用户流失量就会基本上以1%~2%/秒的速度递增。当网站打开速度为30秒时，网站的用户流失量会达到80%~90%之间。当时间越久，网站的每秒流失量速度就会越快。

b) 请求次数以及服务器压力。

c) 后期维护。

d) 样式的通用性。

4. 利用注释对来对样式进行分区，一般会分出这两个区：/* reset */……/* end reset */，样式重置区；/* public */……/* end public */，公共样式区。其他区可能就是各个页面特有的样式区。比如：/* index */……/* end index */，主页区。

5. 样式命名方式：根据每块元素的主题、功能或者在页面上的位置来进行命名。

a) 大驼峰命名法（帕斯卡命名法）：每个单词起始的首字母大写，例如#MainLeftBox{}；

b) 小驼峰命名法：从第二个单词开始每个单词的首字母大写，例如#mainLeftBox{}；

c) PHP命名法：每个单词中间以“_”隔开，例如：#main_left_box{}；

d) 中划线命名法：每个单词中间都用“-”隔开，例如：# main-left-box{}。

6. 写包含样式的路径的时候，只需写能找到这个元素的路径，但并且不影响其他元素的样式即可。

7. 如何避免页面与页面之间的样式命名方式重叠？解决方法有如下几种：

a) 每个页面的样式之前都加上每个页面的首字母前缀或者前几个字母的缩写；

b) 在每个页面之前加上程序员的名字缩写。

8. 一份完整的简洁的CSS样式重置：

a) body,dd,dl,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,ol,p,pre,th,td,select{margin:0;padding:0; font-size:[number]px; font-family:"XX字体";}

b) em{font-style:normal;}

c) li{list-style:none;}

d) a{text-decoration:none;}

e) img{border:0; vertical-align:top;}

f) table{border-collapse:collapse;}

g) textarea{resize:none; overflow:auto;}

9. 页面宽度：页面内容部分的宽度，并不是指整个页面有颜色的区域的宽度。

10. 两种页面结构比较：

a) <divclass="wrap">

<divclass="nav"></div>

<divclass="main"></div>

</div>

优劣：用此种方法写页面，用户在加载时，先是看到一片空白的，然后再突然所有东西都加载出来了，这种用户体验不是特别的好；另外，这种方法的后期扩展不是很好（不推荐）。

b) <divid="header">

</div>

<divid="picTab">

</div>

<divid="whyQQ" class="wrap"></div>

<divid="main" class="wrap"></div>

<divid="footer" class="wrap"></div>

优劣：用此种方法写页面时，用户在加载页面时，各个部分的内容是自上而下一项一项加载出来的，这种用户体验就比较好，并且这种方法利于后期扩展。比如，要添加宽度自适应屏幕的背景时只需要去除wrap（wrap的样式是设置页面宽度，并且居中），再在内部加入内容居中的样式就可以了（推荐）。

11. 显示整个网页的图标，需要先将图片转换成.ico格式的图片（用ico在线制作网页就可以完成）。 rel="icon"表示引入的图标是网页的图标且格式为.ico格式。

12. 在body中加入"min-width:[number-内容宽度]px;"，保证了当屏幕宽度小于内容宽度时，全屏背景能与内容宽度对齐，不让全屏背景的宽度跟随屏幕宽度的改变而改变。

13. "background-position:center0"能让图片位置居于父级的中间。

14. 在hover伪类的父级添加相对定位，是为了兼容在IE6下刷新时，会从页面左上角掉下hover伪类的样式。

15. 为了兼容在IE6下，hover伪类元素在鼠标划过时，会出现横线闪烁的问题。我们的解决办法是在a标签上直接加hover时的背景，但是将背景横向移动若干个像素，直到看不见为止，比如：“background:url(../img/nav_hover.png)no-repeat center 50px;”。然后，再在hover伪类的样式改成如下 “#nav a:hover,#nav .active{background-position:center 0;}”，让背景在鼠标划过时居中，这样就能解决上述问题。（此处的代码仅仅举例而已，具体代码还是有变化的）。