盒子
盒子
文章目录
  1. 做之前一定要分析好网页的结构层次。做到心中有数。(最好在纸上或者用作图工具画出来)
  2. 布局从大块到小块,不要恋战。
  3. 重置浏览器样式
  4. 清除浮动
  5. 关于< a>标签
  6. 鼠标触碰特效
  7. 把内容限制在一定宽度并居中
  8. 一段搜索框样式

大表哥的电商网页实战体验

表严肃官方网站

过了一遍《javascript DOM 编程艺术》,准备做一下书尾的实战项目,却发现难以入手。其实这个小项目只需要非常基础的html,css知识。我自认为之前也算是有所准备,但果然还是高看自己了。该书默认读者已经有一定的布局经验,我虽然已经跟着大表哥的博客布局走过一遍,但是上次只是在边看边誊抄代码。做了笔记,也只是零零散散的,没有条理。现在去看的话是完全不知道当时都记了什么…..(甚至已经找不到记在哪了…)

看书,一定不能纸上谈兵。要多实战。不过说起来,动手后要总结经验,这点更为重要。

这次跟着大表哥的电商站首页布局实战 - HTML&CSS实战 走了一遍。教程虽然只有几十分钟,但是我尝试着理解,然后自己不看代码敲出来,所以花了半天的时间。虽然是个非常简单的小东西,但对我这个菜鸟来说收获颇丰,在这里做个笔记。


  • 做之前一定要分析好网页的结构层次。做到心中有数。(最好在纸上或者用作图工具画出来)

比如在大表哥的实战中,先对该首页进行分析。有顶部的导航栏,广告与信息显示,商品展示,尾部的联系方式。而这四个大块里面,每个块又由好几个小块构成,每个小块下又有好几个部分。在做网页前,最好对这样的层次心中有数。如果能把这样的结构绘制出来,那么即便自己做不到心中有数,看一眼也能明白做到哪里了,下面该做什么。

  • 布局从大块到小块,不要恋战。

在上面已经把一个网页拆分为好几个区域块了。写代码的时候就可以先布下大体结构,再完善每个块里的细节。就像画画,总是先画下大体的轮廓,再细描细节。

  • 重置浏览器样式

可以排除浏览器对于一些元素的默认样式的干扰,保证完全由开发者来定位每个元素的准确位置。

使用方法:在 bootcdn 里搜索 normalize ,下载到本地或者复制链接,在网页引入该css样式。

  • 清除浮动

如果子元素是浮动的,那么母元素高度将会坍缩为0。这样会导致给母元素设置的背景色不能显示,以及使母元素下面的元素的布局样式会失效。(以及其他我暂时不知道的错误)

1
2
3
4
5
6
.clear-float:after,
.clear-float:before {
display: block;
content: " ";
clear: both;
}//利用伪类after,before,意思是给选中的元素的最后一个子元素和第一个子元素设置样式
  • 关于< a>标签

一般拿来使用需要清除它的下划线。

1
2
3
a{
text-decoration:none;
}

该标签默认display:inline; ,修改padding时可以直接修改左右,若需修改上下,需要覆盖display:inline-block;.

  • 鼠标触碰特效

利用伪类:hover{}

比如做一个简单的鼠标触碰到标签后,标签改变颜色。

1
2
3
a:hover {
color: #999;
}
  • 把内容限制在一定宽度并居中

1
2
3
4
5
.container {
max-width: 1080px;//无论浏览器什么规格,网页最大显示宽度为1080px
display: block;//以块级元素展示,一般div,p,等都是以块级元素展示
margin: 0 auto;//可以使内容居中
}
  • 一段搜索框样式

做搜索框样式的话,以我现在的水平能达到的地步,就是简单地覆盖原搜索框和按钮的边框颜色,在点击聚焦,鼠标触碰后给些反馈(比如变个颜色)。再加个渐变变色…

另外要使两个带边框的框并排放置,需加上box-sizing: border-box;

若不加,效果会是这样:

搜索框001

加了后,效果是这样。

搜索框002

以下是相关样式代码。

1
2
3
4
5
6
7
8
<body>
<div class="header">
<div class="search-bar">
<input type="text" />
<button>搜索</button>
</div>
</div>
</body>
1
2
3
4
5
6
* {
box-sizing: border-box; //并排放置两个带边框的框
-webkit-transition: background 200ms;//满足交互时的渐变效果
-o-transition: background 200ms;
transition: background 200ms;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.header {
padding: 20px 0;
}

.header .search-bar {
border: 2px solid #dd182b;
display: block;
position: relative;
min-height: 1px;
float: left;
width: 50%;
}

.header .search-bar input,
.header .search-bar button {
float: left;
border: 0;
padding: 10px;
outline: 0; //聚焦时的颜色清空
}

.header .search-bar input {
width: 80%;
color: #dd182b;
}

.header .search-bar input:focus {
-webkit-box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .3);
}

.header .search-bar button {
width: 20%;
background: #dd182b;
color: #fff;
}

.header .search-bar button:hover {
background: #f11429;
}