前端小结1-CSS和HTML

目前将CSS/HTML教程学完了一遍，现在边学习JS，边对之前学习的CSS/HTML进行一些总结。此篇文章主要是网站项目搭建相关的。

1、网站的首页的html文件名一般都叫做index.html

2、对应哪个网页的css文件名最好和该网页的html文件名一致，方便修改代码

3、因为一般一个网站不止有一个网页，而且这些网页的样式一般都有一些是相同的，所以可以创建一个base.css文件来写不同网页的公共样式。具体地，目前我接触过的写在base.css文件中代码有：

3.1 body的样式

/* 一般情况下，网页的字体有一个统一的样式 */
body{
    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    /* 不让body过小，导致body中的元素溢出 */
    min-width: 1226px;
}

3.2 解决外边距重叠问题和浮动造成的父元素高度塌陷问题

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

3.3 一般网页主要内容显示的区域并不是全屏的，因此可以设置一个类表示中间容器的宽度，并令中间容器居中：
.

w{
    width: 1226px;
    margin: 0 auto;
}

3.4 超链接要统一去除下划线，也可顺便统一重置一下超链接的颜色

a{
    text-decoration: none;
    color: #333;
}

4、网站的图标：网站的图标一般在标题栏和收藏栏出现（例子可见小米官网标题栏的图标），图标图片一般都储存在根目录下。具体设置网站图标的代码如下（写在head标签里面）：

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

5、PC端网页一般要引入重置样式表来重置样式，移动端的网页只需要使用统配选择器简单重置一下样式即可：

5.1 PC端引入重置样式表代码（写在head标签里面）

 <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.min.css">

5.2 统配选择器简单重置样式

*{
    margin: 0;
    padding: 0;
}