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

2024-02-15 14:57:36

跟着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)

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

举例：

（dt）我是头（/dt）

（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，否则一些参数无法生效

码农公寓

相关文章