【HTML+CSS】练习：百度首页模拟
生活随笔
收集整理的這篇文章主要介紹了
【HTML+CSS】练习：百度首页模拟
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
色塊定位法
通過style添加css，設(shè)置background-color，方便查看當(dāng)前div在什么位置。
一個簡單的小練習(xí)，復(fù)雜的部分全部使用截圖。
整體布局
百度首頁模擬.html
<html><head><title>百度首頁模擬</title><meta charset="UTF-8"/><!--模擬百度首頁：1、首頁使用css+div進行頁面的布局css代碼一般使用外聯(lián)方式進行開發(fā)2、使用HTML進行每一個塊中的內(nèi)容填充 --><!--引入外部聲明的css文件--><link rel="stylesheet" type="text/css" href="css/baidu01.css"/><!--引入網(wǎng)頁標(biāo)題圖片--><link href="img/title.ico" rel="shortcut icon"/></head><body><!--聲明頭 部分--><div id="header"><!--聲明導(dǎo)航欄--><ul id="header_nav"><li><a href="">新聞</a></li><li><a href="">hao123</a></li><li><a href="">地圖</a></li><li><a href="">視頻</a></li><li><a href="">貼吧</a></li><li><a href="">學(xué)術(shù)</a></li><li><a href="">登錄</a></li><li><a href="">設(shè)置</a></li></ul></div><!--聲明主體--><div id="main"><!--引入百度logo--><img id="img_logo" src="img/bd_logo.png" width="270px" height="129px"/><br /><!--聲明搜索框和按鈕--><input type="text" name="" id="" value="" /><input type="submit" name="" id="" value="百度一下" /></div><!--聲明底部--><div id="footer"><!--聲明網(wǎng)站聲明內(nèi)容--><img src="img/footer.png"/></div></body> </html>baidu01.css
/*設(shè)置頁面的基礎(chǔ)樣式*/*{margin: 0px;padding: 0px;} /*設(shè)置header頭部分的大小*/#header{width: 100%;height: 45px;}/*設(shè)置導(dǎo)航欄樣式*/#header_nav{position: absolute;right:92px;top:26px;}#header_nav li{float: left;list-style-type: none;margin-left: 24px;}#header_nav li a{color: #333;font-size: 13px;font-weight: 700;line-height: 24px;} /*設(shè)置main主體部分的大小*/#main{width:100%;height: 384px;text-align: center;}#img_logo{margin-top: 30px;margin-bottom: 21px;}/*設(shè)置搜索框樣式*/input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url(../img/inp.png);background-repeat: no-repeat;background-position-x: 500px;background-position-y: 3px;}input[type=submit]{width: 100px;height: 34px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top:1px;} /*設(shè)置footer底部部分的大小*/#footer{width: 100%;height: 206px;text-align: center;} /*使用偽類給標(biāo)簽添加樣式*/#header_nav li a:hover{color: blue;}運行效果
總結(jié)
以上是生活随笔為你收集整理的【HTML+CSS】练习：百度首页模拟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【HTML】HTML+CSS复习笔记
- 下一篇： 【Java文件下载】如何让浏览器直接下载