百度首頁效果如下:
百度首頁效果
-
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
大神勿噴
