課程
/前端開發(fā)
/HTML/CSS
/企業(yè)網(wǎng)站綜合布局實戰(zhàn)
按照老師寫的
結(jié)果是這樣:
然后在.logo加了overflow:hidden;
結(jié)果就這樣了:
請問大神門怎么才能把.nav_mid的圖片顯示出來,還有就是圖片亂序和列表亂序問題
2016-08-25
源自:企業(yè)網(wǎng)站綜合布局實戰(zhàn) 3-4
正在回答
這個是我寫的導航欄,已測試沒有問題,你對照一下
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>導航菜單</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body {font-family: 'Microsoft Yahei';}
.nav {
????width: 1000px;
? ? height: 40px;
????margin: 10px auto;
}
.nav_left {
????width: 10px;
????height: 40px;
????background: url(file:///E:/html/images/nav_left.jpg) no-repeat;
????float: left;
.nav_mid {
????width: 980px;
????background: url(file:///E:/html/images/nav_bg.jpg) repeat-x;
.nav_right {
????background: url(file:///E:/html/images/nav_right.jpg) no-repeat;
/* 下面是左側(cè)菜單和右側(cè)搜索框樣式*/
.nav_mid_left,.nav_mid_right {
.nav_mid_left {
????width: 680px;
.nav_mid_right {
????width: 300px;
.nav_mid_left li {
????list-style-type: none;
????line-height: 40px;
????text-align: center;
????width: 100px;
.nav_mid_left a {
????text-decoration: none;
????font-size: 16px;
.nav_mid_left a:link,.nav_mid_left a:visited {color: #fff;}
.nav_mid_left a:hover,.nav_mid_left a:active {color: #ff0;}
.search_text {
????width: 190px;
????height: 25px;
????margin-top: 8px;
????background: url(file:///E:/html/images/search.jpg) no-repeat right center #fff;
????padding-right: 27px;
????border: 1px solid #fff;
</style>
</head>
<body>
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于慕課</a></li>
<li><a href="#">新聞動態(tài)</a></li>
<li><a href="#">課程中心</a></li>
<li><a href="#">在線課程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" name="" class="search_text" />
</form>
<div class="nav_right"></div>
</body>
</html>
注意這個后面你的雙引號,少了一個
慕粉3858188
好像沒有添加無序列表左浮動
舉報
本課程重點介紹HTML/CSS實現(xiàn)常見企業(yè)網(wǎng)站布局的方法
3 回答列表溢出問題,以及項目圖片和文字不在一水平線
2 回答圖片顯示問題
1 回答焦點圖圖片不顯示問題
5 回答圖片顯示不出來
2 回答圖片顯示不出來
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2016-08-25
這個是我寫的導航欄,已測試沒有問題,你對照一下
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>導航菜單</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body {font-family: 'Microsoft Yahei';}
.nav {
????width: 1000px;
? ? height: 40px;
????margin: 10px auto;
}
.nav_left {
????width: 10px;
????height: 40px;
????background: url(file:///E:/html/images/nav_left.jpg) no-repeat;
????float: left;
}
.nav_mid {
????width: 980px;
????height: 40px;
????background: url(file:///E:/html/images/nav_bg.jpg) repeat-x;
????float: left;
}
.nav_right {
????width: 10px;
????height: 40px;
????background: url(file:///E:/html/images/nav_right.jpg) no-repeat;
????float: left;
}
/* 下面是左側(cè)菜單和右側(cè)搜索框樣式*/
.nav_mid_left,.nav_mid_right {
????float: left;
}
.nav_mid_left {
????width: 680px;
}
.nav_mid_right {
????width: 300px;
}
.nav_mid_left li {
????list-style-type: none;
????float: left;
????line-height: 40px;
????text-align: center;
????width: 100px;
}
.nav_mid_left a {
????text-decoration: none;
????font-size: 16px;
}
.nav_mid_left a:link,.nav_mid_left a:visited {color: #fff;}
.nav_mid_left a:hover,.nav_mid_left a:active {color: #ff0;}
.search_text {
????width: 190px;
????height: 25px;
????margin-top: 8px;
????background: url(file:///E:/html/images/search.jpg) no-repeat right center #fff;
????padding-right: 27px;
????border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于慕課</a></li>
<li><a href="#">新聞動態(tài)</a></li>
<li><a href="#">課程中心</a></li>
<li><a href="#">在線課程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" name="" class="search_text" />
</form>
</div>
</div>
<div class="nav_right"></div>
</div>
</body>
</html>
2016-08-25
2016-08-25
好像沒有添加無序列表左浮動