表严肃官方网站

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

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

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


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

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

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

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

  • #### 重置浏览器样式

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

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

  • #### 清除浮动

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

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

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

a{
    text-decoration:none;
}

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

  • #### 鼠标触碰特效

利用伪类:hover{}

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

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

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

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

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

若不加,效果会是这样:

搜索框001

加了后,效果是这样。

搜索框002

以下是相关样式代码。

<body>
	<div class="header">
        <div class="search-bar">
            <input type="text" />
            <button>搜索</button>
        </div>
    </div>
</body>
* {
    box-sizing: border-box; //并排放置两个带边框的框
     -webkit-transition: background 200ms;//满足交互时的渐变效果
    -o-transition: background 200ms;
    transition: background 200ms;
}
.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;
}