html+css项目分析

文档结构

如有使用scss或less也可创建相应的文件夹，scss文件名字前加一个下划线则不进行解析

        css：样式表

        img：图片资源

        // scss：scss文件

        footer.html：公共底部

        header.html：公共顶部

        index.html：网站首页

        register.html：注册页

        login.html：登录页

        reading.html：购物须知

        goods.html：商品详情页

        list.html：专辑列表页

reset清除标签自带默认样式

为什么要清除默认样式？

        避免重复定义他们,提高样式代码的重用。

        设置自己的风格,字体,颜色等。

        减少代码->减少维护成本

        可以提供完全空白的画布,然后你就可以自己定义相应的样式了。

        开发更加有逻辑性：你只是添加样式而不是移除和修改。

        浏览器的兼容性问题可以降到最小

/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
  padding: 0;
  margin: 0;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
/*去掉列表默认排列*/
ul,
ol,
li {
  list-style: none;
}
/*把a元素更改设置成块级元素，这个根据实际情况决定要不要*/
a {
  text-decoration: none;
  display: block;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素，默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img {
  border: 0;
  display: block;
}
/*清除浮动破坏带来的塌陷问题*/
/*清除浮动的兼容IE*/
.clearfix {
  zoom: 1;
}
.clearfix::after {
  content: '';
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

项目总结

根据自己习惯选择使用grid布局或flex布局

首先大致观察一下网页是什么布局，再用自己所习惯的方法写出大致布局，对布局中添加内容，class类名和id名命名规范，适当可以写一下注释。选择器的正确使用，有时候没有必要为一两个样式而单独添加一个类名，熟练运用子代后代以及兄弟选择器伪类选择器，

 

        当需要使用精灵图来切图时，当background-position的值为正值时向下/右移动，当为负值时向上/左移动

        子绝父相定位法，顾名思义，子级绝对定位，父级相对定位。当子级设置绝对定位，而父级没有设置任何定位时，绝对定位会按照网页的左上角为0，0点进行定位。当父级设置任何一个定位之后，子级的绝对定位会按照父级元素的左上角为0，0点。这么用的好处就是当整个父级元素移动位置是，只需要移动父级的位置就可以了。