新人对一些网页开发的随笔

跟着B站做做项目,遇到的一些问题,在此记录下思路

 

1、网站开发的时候,采用多css引入方式,把初始化.css和多个页面共有的css文件单独拿出来制作.css文件(init.css、common.css)作为模块化开发

2、导入网站小图标

<link rel="shortchut icon" href="favicon.ico">

3、网站SEO优化:提高搜索自然排名。网站TDK:title、discription、keyword

4、看到紧贴的控件,多考虑浮动布局

5、看到横竖类型相似的,多考虑 li。竖线可以用border,也可以采用偶数的li来设置宽高

新人对一些网页开发的随笔

 

 

6、多使用H5新标签;多使用固定类名,提高可读性

新人对一些网页开发的随笔

 7、网站LOGO要针对SEO优化:使用h1标签,h1内放链接,将logo设为h1的背景图片,在链接内放文字并隐藏(1、盒子-999px,overflow: hidden;2、fort-size: 0),给链接一个title属性

8、如果行内块有缝隙使得,如1200/4 != 300从而从固定宽度框内掉下来的时候,可以考虑 1、margin-left: 负值;2、浮动 

9、数字会变换的盒子最好用padding来制作盒子宽度,而不是直接定义盒子宽度,可能会导致内容显示不全

padding: 0 5px;
    /* width: 14px; */

一些地方需要符合使用习惯的,比如下图,使用绝对定位的left值,当数字撑大盒子的时候,盒子宽度往右移动,而不是往左

position: absolute;
left: 105px;

新人对一些网页开发的随笔

10、

ul是无序列表,也就是说没有排列限制可以随意加li。

举例:

(li)可以随意放置(/li) 

(li)可以随意放置(/li) 

(li)可以随意放置(/li) 

 

dl是定义列表,会默认前后层级关系。 

举例: 

(dt)我是头(/dt) 

(dd)我是内容(/dd) 

(dd)我是内容(/dd)

11、制作隐藏式下拉菜单的时候,被hover触发的是整个菜单上的父系类

<div class="whole_shop">
                <dl class="whole"> 全部商品分类
                    <dt><a href="#">手机</a></dt>
                    <dt><a href="#">手机</a></dt>
                    <dt><a href="#">手机</a></dt>
                </dl>
            </div>

.whole_shop:hover  .whole dt{
    display: block;
}

12、ul下的li 添加float:right 就会从右往左排序。不想要这种效果 只需要给li(或者其他元素的父级)添加右浮动,子元素正常在父盒子里面添加左浮动即可

13、楼层区floor,一般不给高度,便于添加楼层

14、 tab栏

15、注册页面一般写得比较简单,不做seo优化

16、em与i当一个小盒子来使用,当界面有小图标或者小文字盒的时候可以使用

17、CSS3做无限循环内容,无缝滚动:在一份完整的内容后面需要再加一部分重复的内容。克隆一份数据放在后面,是为了当A向上移动时,后面有数据能填补漏出来的空白。当B移动到可视区域的顶部时,此时A刚好移出可视区域,那么此时将容器重新归0,用户是没有感知的,以为还是B中的第一条数据。然后继续向上滚动。

若内容为图片,个人使用background导入图片在循环播放时会无法定位播放,切背景图超出部分无法显示,故本人改成了img导入图片,img可正常循环播放。

18、在nth-child中,若单纯为n、2n等,n从1开始;若为公式2n+1,3n+1等,n从0开始

19、background添加背景图并修改背景图大小时,先加载图,再修改大小,否则修改无效

20、使用flex布局,盒模型一般不用设置高,若有图片,用插入图片img,用img撑开盒子,不用bg,否则宽度百分比变化,长度不变时,图片会变形。除非考虑rem,不过计算那么麻烦,不如直接img

21、bootstrap主框必须命名container,否则一些参数无法生效

上一篇:windows下mysql自动备份及备份同步至远端的NAS解决方案


下一篇:手机钉钉页面跳转