百度首页效果如下:
百度首页效果
-
1.先说一下总体布局的设置
三个部分是
3个div,为了更好地改变样式,我们给每个div设置id,在里面每个小的标签设置class,这样是为了更好地精准的设置样式,这样做好处很多 -
2.说一下整个的北京图片
body{ /*添加图片, no-repeat:不平铺*/ background: url("../images/bg.jpg") no-repeat; /*添加图片:覆盖整个body*/ background-size: cover; } -
3.说一下关于
<a></a>标签/*加粗* / font-weight:bolder; /*设置字体*/ font-family: 'sans-serif'; /*设置文字的大小*/ font-size: 15px; /*右边的外间距*/ margin-right: 10px; /*设置字体颜色*/ color: white; /*字体颜色是正常的*/ font-weight: normal; /*去除下划线*/ text-decoration: none; 4.说一下
<input>
说一下`<input>`
/*让输入框往里面缩小*/
box-sizing: border-box;
/*做内边距5px*/
padding-left: 5px;
/*字体大小*/
font-size: 16px;
input:focus{
/*去除外边框*/
outline: none;
border: 1px solid #3385ff;
}
百度一下
- 5.底部的设置
底部的设置
- 6.鼠标放在图片上会有阴影出现
说一下每个图片其实都是可以打开的,都是<a></a>标签嵌套一个图片
#代表链接,自己设置
<a href="#"><img src="images/d_1.png"></a>
鼠标放在图片上会有阴影出现
- 7.百度上面的阴影
主要是利用了CSS3的新特性,rgba,改变透明度
百度上面的阴影
百度首页demo 密码: mdn5
大神勿喷
