李洪强和你一起学习前端之(11)梅兰商贸案例

李洪强和你一起学习前端之(11)梅兰商贸案例

今天的内容是梅兰商贸案例的讲解,这也是CSS的最后一天

今天要实现的效果是: 

---

 

---

大家看到了,今天这个案例的内容非常的多,我们只能一点点的分析. 一点点的完成,因为如果内容结构琐碎,我们会感觉到很乱

要不断想着刚才的结构,一不留神就会重新理清之前的思路,这样特别浪费时间,所以面对这样的案例的时候,我要一点一点肢

解它

首先我们分析一下结构:

---

 

---

接下来我们看一下"建筑材料"这个模块,因为这个模块有点复杂

---

 

怎么样,看到这里是不是觉得有点乱了,其实啊,这个案例最复杂的就是这个部分,只要写好了这个部分,其他的都比较简单了

第一部分: CSS初始化

/*CSS初始化*/
            div,p,h1,h2,h3,h4,h5,h6,a{
                font: 12px 宋体;
                text-decoration: none;
            }
            ul,dl,dd,body,h1,h2,h3,h4,h5,h6,p{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            input{
                border: 0 none;
                outline-style: none;
            }