总结写页面的经验篇（一）对新人特别友好哦

我们尝试理清楚，写一个页面的步骤
1）引入基本的css common.css index.css reset.css base.css widge.css
2）先分析一下页面的大块的逻辑（容器）分布，把整体一部分大的结构写出来
3）再看每一块对应的 css 怎么写
4）常规情况下 如果大的结构里面有小的容器，会用到 position : relative position : absolute 或者利用float : left float : right
5)一些基本的东西需要知道

1、

输入框 内写文字 用的是 value              `<input type="text" class="headerSearch" value="抢10亿神券">`

2、

输入框旁边的搜索             `<input type="button" class="searchBtn">`

3、

常规引入小图标的两种方式
3-1    `background: url("../../img/3.jpg") no-repeat 0 -15px;`

3-2  

background-image: url("../../img/4.jpg");
  background-repeat: no-repeat;
  background-position: 6px -10px;
  background-color: #e1251b; 
	

4、

如果不是固定的小图标  要这样写  `比如这个小图标是变化的`  

                <li class="pr">京东超市<i class="hot pa" style="top:-15px;right:-9px;"></i></li>

这个地方很妙

5、

一定要小心细节 像 前面写的 id = "mainId" 后面写css 写成 #mianId{} 排查好久

6、

7、

轮播图
常规情况 包含3层 一个大的 带着几个小的一起走，还有一个控制可看到的范围

8、

z-index 展示的顺序 z-index 值越大 展示在上层 解决的是有的层被遮住 看不到的问题

9、

写轮播图上的小白点
有个要注意的地方 如果大容器是半透明 则里面的小容器 也会是半透明
小白点 想居中 先调节 自身和小框的 left : 50% 然后再 margin-left : width / 2

10、

11、

12、

如何实现里面的这一块的部分

css

.productBlock dl dt {
    width: 97px;
    height: 40px;
    margin: 45px auto 0 auto;
    /* 怎么实现上下两根线的操作 */
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    /* 水平居中的操作 */
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 22px;
}

.productBlock dl dd {
    width: 97px;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 12px;
}```
html

```javascript
 <div class="productList">
        <div class="productBlock">
            <dl>
                <dt>智能生活</dt>
                <dd>引领智能新风尚</dd>
            </dl>
        </div>
    </div>

13、

做页面的顺序
从外到内 从上到下 从左到右

14、

一个大图片 里面一个小的图标怎么实现?
比如这样的东西

html

<!-- 里面图片的大小 -->
        <div class="productImg">
            <!-- 里面的小放大镜 -->
            <i class="icons"></i>
        </div>
    </div>

css

/* 左边图片占据的空间  */
.productImg {
    width: 495px;
    height: 495px;
    border: 1px solid #ddd;
    position: relative;
}

/* 左边图片旁边的小圆圈 */
.productImg i.icons {
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url('../../icon/1.jpg') no-repeat -4px -4px;
}

实现之后是这样的

15、

常规情况下写 左右两个小箭头 使用 <label></label> <span></span> 组合

16、

要 限时去学习 去写代码 快速提升代码文件

17、

命名大容器的时候 不要写死 写的太特殊
写成这样比较好 productImageWrap fl 后面的fl
我写在公共的 common.css里面 float : left;

18、

一个好玩的事情 你怎么实现这样的东西 ？

上面的部分需要加

 position:relative；
 z-index : 5；
 // 先全部加上边框
  border : 1px solid #ccc ;
  background : #fff;
//  然后把下边框去掉
  border-bottom : 0;

下面的部分需要加

border : 1px solid #ccc;
background : #fff;
margin-top : -1px 往上一点 

19、

overflow : hidden 可以将超出容器宽度的部分隐藏掉 不然的话 就会超出来
我们举个例子说明一下这个情况
这个块 加上的时候是这样的

如果不加 则会挤下来 变成这个样子

占据其他的位置

20、

常规的左右居中 margin : 0 auto； 表示 上下 0 左右居中

21、

22、

一个容器里面的东西居中的方法是 文字高度和容器等高就可 height : 51px ; line-height : 51px;

23、

如果想请作者喝一杯卡布奇诺