html+css网页布局积累

一、taobao.com

1.以图换字实现网页logo（以淘宝网为例）

2.标题栏小图标与文字间设置间距

3.淘宝搜索栏

4.导航栏

5.渐变按钮制作

6.新闻句子

7.图标

二、mi.com

1.头部菜单栏

2.logo点击图标切换

3.小米广告图标(实现图中框线效果，鼠标悬停透明度从0.7变为1）

三、媒体查询

一、taobao.com

0.<link rel="icon" href="favicon.ico">

1.以图换字实现网页logo（以淘宝网为例）

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">h1 a{display: block;width:143px;height:59px;background: url(logo.png) center no-repeat;/*图片作为背景图片*/text-indent: -9999px;/*设置文本缩进让文字消失*/overflow: hidden;/*超出隐藏*/}</style>
</head>
<body>
<h1><a href="">淘宝网</a></h1>
</body>
</html>

效果：

2.标题栏小图标与文字间设置间距

文本之间默认空隙存在时：

文本间空隙去除后：

重新设置箭头到左边内容间距后：

这里因为这个默认空隙与文字大小有关，我就设li的font-size：0；之后再给a、span设置字体大小。这个默认间隙，我们去做的时候一定要及时去除。

/*文本之间默认空隙与font-size有关，将父元素font-size设为0，重新设置箭头span.arrow到左边距离*/
#headMessage li{float:left;line-height: 35px;padding: 0 6px;font-size:0;
}#headMessage li span.arrow{margin-left: 7px; /*重新设置箭头到左边距离*/
}

3.淘宝搜索栏

（1）左边部分的以图换字（fl）（前面讲过了）

（2）右边二维码部分（fr）

/html结构
<div class="code fr"><span class="iconfont close"></span><span class="c5">手机淘宝</span><img src="data:images/code.png" alt="">
</div>//css样式
#headSearch .code{width: 72px;height: 86px;border: 1px solid #eee;position: relative;     //父盒子相对定位，X号图标绝对定位margin-right: 110px;text-align: center;
}
#headSearch .code img{      //设置二维码图片大小width: 62px;height: 62px;
}
#headSearch .close{        //关闭图标绝对定位position: absolute;left: -16px;top: -1px;width: 14px;height: 14px;line-height: 14px;font-size: 14px;border: 1px solid #eee;color: #ddd;cursor: pointer;
}

（3）中间搜索框（margin：auto）

分为三部分（上中下）

上面：

<ul class="searchTab clearfix"><li class="active">宝贝</li><li>天猫</li><li>店铺</li>
</ul>

中间：

<div class="searchContent clearfix"><form action="#"><div class="searchBox fl"><input type="text"><div class="placeholder"><i class="iconfont"></i><span>网红裤腰带 洋气 国际范 9.9包邮</span></div><span class="iconfont imgSearch"></span></div><div class="btn fl"><button type="submit">搜索</button></div></form>
</div>

下面候选词：

<div class="hotKey"><a href="#" class="c5">积木</a><a href="#">网线</a><a href="#" class="c5">爬行垫</a><a href="#">时尚连衣裙</a><a href="#">男士T恤</a><a href="#" class="c5">时尚休闲裤</a><a href="#">粽子</a><a href="#">沙发</a><a href="#">风扇</a><a href="#">定制窗帘</a><a href="#">男士内裤</a><a href="#">凉席三件套</a><a href="#">办公桌</a>
</div>