前端学习（1809）：前端调试之微博头部开发
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1809）：前端调试之微博头部开发
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
index.html
<!DOCTYPE html> <html lang="en"><head><!--系統(tǒng)內(nèi)置 start--><script type="text/javascript"></script><!--系統(tǒng)內(nèi)置 end--><meta charset="UTF-8"><title>微博實(shí)戰(zhàn)--head</title><link rel="stylesheet" href="index.css"> </head><body><div class="outer-tile"><header class="clearFix"><div class="left"><div class="img"></div><div class="input-box"><input type="text" placeholder="大家正在搜：中國(guó)隊(duì)開(kāi)賽三天已超上屆金牌總數(shù)"><span class="search"></span></div></div><div class="right"><ul class="nav clearFix"><li><span class="first-page"></span> 首頁(yè)</li><li><span class="video"></span> 視頻</li><li><span class="find"></span> 發(fā)現(xiàn)</li><li><span class="game"></span> 游戲</li></ul><ul class="regist-login"><li>注冊(cè)</li><li>|</li><li>登錄</li></ul></div></header></div> </body></html>index.css
* {margin: 0px;padding: 0px; } ul {list-style: none; }.clearFix::after {display: block;content: '';clear: both; }.outer-tile {width: 1440px;background: #ffffff;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); }header {box-sizing: border-box;width: 1225px;height: 50px;margin: 0 auto; }.left {float: left; }.left>div {float: left; }.left .img {width: 80px;height: 50px;background: url(./images/weibo-header.png) no-repeat center;background-size: contain; }.left .input-box {position: relative;width: 470px;height: 30px;margin-top: 11px;margin-left: 30px;border: 1px solid #CCCCCC;box-sizing: border-box;background-color: #F2F2F2;}.left .input-box input {box-sizing: border-box;width: 100%;height: 28px;border: none;background-color: transparent;font-size: 12px;color: #808080;padding-left: 10px;padding-right: 35px;line-height: 29px;outline: 0; }.left .input-box span {position: absolute;width: 16px;height: 28px;line-height: 28px;top: 0px;right: 15px;background: url(./images/search.png) no-repeat center;background-size: contain; }.right {float: right;line-height: 50px; }.right ul {float: left; }.right .nav {margin-right: 30px; }.right .nav li {position: relative;float: left;margin-right: 15px;font-size: 12px;line-height: 50px;padding-left: 22px; }.right .nav li:last-child {margin-right: 0px; }.right .nav span {position: absolute;top: 16px;left: 0px;width: 17px;height: 17px; }.right .nav .first-page {background: url(./images/first-page.png) no-repeat center;background-size: contain; }.right .nav .video {background: url(./images/video.png) no-repeat center;background-size: contain; }.right .nav .find {background: url(./images/find.png) no-repeat center;background-size: contain; }.right .nav .game {background: url(./images/game.png) no-repeat center;background-size: contain; }.right .regist-login li {float: left;font-size: 12px; }.right .regist-login li:nth-child(2) {margin: 0 10px;color: #D9D9D9; }運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习（1809）：前端调试之微博头部开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 泛微oa明细表添加按钮_泛微OA系统表结
- 下一篇： RIA技术简介