我们尝试理清楚,写一个页面的步骤
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;