整体介绍

基于10.6考核基础上，完善了学校官网仿写。能够通过csdn,w3schoo等平台解决大部分问题，对于网页排版布局，一些css属性运用的能力得到了提高，但长路漫漫，对于初学者的我来说还是任重而道远。

困难及解决方案

窗口自适应

html,body{
  height: 100%;
}

选择器的优先级

1.层叠性

当一个元素被定义了两种相同的属性时，按照就近原则选取属性的取值

2.继承性

如果子代选择器和它的父类选择器有相同的属性，则按照子类的取值呈现

3.优先级

CSS选择器的优先级按照以下顺序排列：!important > 内联选择器 > ID选择器 > 类别选择器 > 属性选择器 > 伪类 > 元素选择器 > 通配符选择器 > 继承选择器。如果有多个选择器作用在同一个元素上，浏览器会根据这个优先级顺序来确定应用哪个样式。

需要注意的是，如果两个选择器的优先级相同，那么最后出现的样式将会被应用。

4.权重叠加

CSS权重叠加是指当多个CSS声明应用于同一元素时，它们的权重值会叠加，决定最终应用的样式。权重的计算是根据选择器的类型和数量来确定的。常见的选择器类型按照优先级从高到低为：内联样式，ID选择器，类选择器，元素选择器和通配符选择器。在同一类型的选择器中，选择器的数量越多，权重值越高。

通俗的说，权重值是复合选择器之间优先级的对比

一些陌生css属性

(详情可查w3school)
Transparent 透明
visibility:hidden （可见隐藏）占位
display:none 不占位
outline 边框线
recice 规定是否可由用户调整元素的尺寸
z-index 属性设置元素的堆叠顺序。
cursor 属性规定要显示的光标的类型（形状）
word-spacing 属性增加或减少单词间的空白（即字间隔）。
clear 属性规定元素的哪一侧不允许其他浮动元素。
writing-mode 属性规定水平还是垂直地排布文本行。
white-space 属性设置如何处理元素内的空白。

核心代码

写前

* {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
    background-color: #f5f5f5;
}

body ul {
    list-style-type: none;
}

a{
    cursor: pointer;
}

a:hover{
    color: #0573b8;
}

版心

.wrap{
   width:1200px;
   magin:0 auto;
}

二级菜单

.nav .sub-menu{
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    min-width: 100%;
    z-index: 100;
    background: #fff;
}

.nav .sub-menu li{
    border-top: 1px solid #cdcdcd;
    position: relative;
    white-space: nowrap;
    vertical-align: top;
}

.nav .sub-menu li a{
    text-align: center;
    display: block;
    color: #000;
    height: 40px;
    line-height: 40px;
    padding: 0 17px;
    font-size: 14px;
    background: none;
}

.nav ul .sub:hover {
    background-color: #71a2e2;
    text-decoration: none;
    color: #eee;
}

.sub a:hover{
    color: #eee;
}

.nav ul .sub:hover .sub-menu{
    display: block;
}

心得总结

写网页不能心急，写前先构思好版型，模块，注意细节，不懂的合理运用检查和相关平台进行。还是那句话长路漫漫，任重道远，这是一个不断完善自我，提升自我，挑战自我的过程，也很喜欢一句话“这片绿茵场上从不缺少天才，努力才是唯一的入场券”，那便努力向前吧。

学校官网仿写总结