CSS-温故而知新-By黑马梅兰商城

一、网站布局：

- 从上到下
	根据UI界面依次书写界面元素。
- 模块化
	把页面分别为各个模块，例如头部、内容部分、尾部。

二、CSS初始化

什么是CSS初始化？通俗讲就是CSS样式重置代码。
为什么会有css样式重置代码？

由于html标签在各个浏览器的默认css中表现差异化，为了统一布局，所以需要先重置样式。当然网上有很多这类型的css，例如新浪首页初始化代码，如下：

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

找了一篇比较新的样式重置代码，分享下：

*,:before,:after {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    word-break: break-all;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
 
body {
    background: #fff;
}
 
body,button,input,select,textarea{
    font-size: 14px;
    line-height: 1.6;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
 
small {
    font-size: 12px;
}
 
ul,ol {
    list-style: none;
}
 
h1,h2,h3,h4,h5,h6{
    font-size: 100%;
    font-weight: normal;
}
 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display: block;
}
 
li {
    display: block;
}
 
a {
    text-decoration: none;
    color: inherit;
}
 
table{
    border-collapse: collapse;
    border-spacing: 0;
}
 
::selection {
    color: #fff;
    background-color: #045478;
}
 
::-moz-selection {
    color: #fff;
    background-color: #045478;
}

三、top设置
1.margin:0 auto 0px表示上外边距为0px，左右外边距自动，下外边距为0px。
margin:0 2px表示上外边距和下外边距是0px，右外边距和左外边距是2px
margin:0 auto表示上下外边距为0px，左右外边距为自动。

2.ul>li*6>a 这段代码按下tab键出现以下代码：

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

3.解释一下display的几个常用的属性值，inline ， block， inline-block
inline（行内元素）:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素.

四、logo区域设置
1.精灵图精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。具体可看[这里]。(https://blog.csdn.net/wangwenkai76/article/details/82556642)

2.能扯到搜索引擎优化的知识点

<div>
  <div class="logo_r"></div>
  <h1 class="logo_l">梅兰商城</h1>
</div>

这里的logo_l原本应该也是用div包裹起来的，但是为了提高搜索引擎对本内容的搜索权重，就是更容易搜索，因此用h1包裹起来。例如淘宝界面的"淘宝网"三个字，也是用h1包裹起来。
但是在页面上看不到文字的显示，是因为为文字信息设置了两个属性：

    overflow: hidden;
    text-indent: -9999px;

五、导航栏
导航栏鼠标移入事件用hover属性

<ul class="nav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
</ul>
<style type="text/css">
        .nav li:hover {
            background-color: aquamarine;
        }
</style>

HTML中常用转移字符：