前端学习记录4

项目实践1:学成在线项目

1. css和html的连接

<link rel="stylesheet" href="./css/index.css">

2. 布局：从外到内，从上到下，从左到右
   对于每一块，先确定宽度高度背景颜色或背景图
   css：浮动/display，盒子模型，文字样式

版心

.wrapper {
    width: 1200px;
    margin: 0 auto;
}

清除默认样式

* {
    margin: 0;
    padding: 0;
    /* 内减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}
/* 清除浮动 */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

控制placeholder的选择器

.search input::placeholder {
     font-size: 14px;
     color: #bfbfbf
 }

调节图片垂直对齐方式

 .user img {
     /* 调节图片垂直对齐方式 */
     vertical-align: middle;
 }

版权模块

注意清除浮动带来的影响，注意在哪发生的浮动就在哪儿加。浮动撑不开高。