課程
/前端開發
/HTML/CSS
/網頁布局基礎
不知道怎么寫,怎么寫都不對,求指教,感恩不盡
2016-11-03
源自:網頁布局基礎 3-3
正在回答
效果圖:
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
* {
? ? margin:0;
padding:0;?
}
?/*應用全局 a偽類樣式 p*/
a{color:white; text-decoration:none}
p{ font:12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
?#top{ height:22px; background:#F8F8F8; line-height:22px; border-bottom:1px solid #cccccc;}
#header {?
margin:0 auto;
width:910px;
/*logo存放樣式*/
#header .logo { background: url(http://s.pc.qq.com/pc/images/910x70moren.jpg) no-repeat; height:70px; width:440px; float:left}
/*logo右邊內容展示區 樣式*/?
#header .r_logo{ ?float:right; width:470px; padding-top:20px; height:50px;}
.titleMenu{ height:32px; clear:both; background:#36F}
.titleMenu .Nav, .right_nav{ height:32px; width:100%; line-height:32px; font-size:14px; color:#ffffff; font-weight:bold; text-align:center; background:url(http://s.pc.qq.com/pc/images/navbgnew1125.gif) no-repeat; float: left}
/*導航欄制作,左浮動*/
.titleMenu .Nav li{ float:left; margin-left:10px; ?width:94px; height:36px; list-style:none; }
/*定義選中導航欄的樣式*/
.titleMenu .Nav .nav_a{background:url(http://s.pc.qq.com/pc/images/icon_s.png) repeat scroll 0 0 transparent; margin-top:4px;}
.titleMenu .Nav .nav_a a{ color:#000;} /*被選中的導航欄字體顯示黑色*/
?
</style>
</head>
<body>
<div id="top"></div>?
? ? ? <div id="header">?
? ? ? ? ? ? ? ? <div class="logo"> </div> <!--logo存放-->
? ? ? ? ? ? ? ? <div class="r_logo"> ?<!--logo右邊內容展示區-->
? ? ? ? ? ? ? ? ? ? <h4>騰訊軟件中心,騰訊精品軟件展示臺</h4>
? ? ? ? ? ? ? ? ? ? <p>我們會不斷提升產品的性能和體驗,為你打造最好用的軟件!</p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ??
? ? ? ? ? ? <!--導航欄-->
? ? ? ? ? ? ? ? <div class="titleMenu">
? ? ? ? ? ? ? ? ? ? <ul class="Nav">
? ? ? ? ? ? ? ? ? ? ? ? <li class="nav_a"><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">PC 產品 </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">Mac 產品 </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">無線產品 </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">企業產品 </a></li>
? ? ? ? ? ? ? ? ? ? </ul> ? ? ? ?
? ? ? </div>
</body>
</html>
慕粉0317 提問者
123124
怎么寫都不對,有沒有類似的代碼借鑒下,謝謝
這是由幾個背景圖片組成還有p標簽
舉報
讓你精通CSS中三大定位機制,徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-17
效果圖:
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
* {
? ? margin:0;
padding:0;?
}
?/*應用全局 a偽類樣式 p*/
a{color:white; text-decoration:none}
p{ font:12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
?#top{ height:22px; background:#F8F8F8; line-height:22px; border-bottom:1px solid #cccccc;}
#header {?
margin:0 auto;
width:910px;
}
/*logo存放樣式*/
#header .logo { background: url(http://s.pc.qq.com/pc/images/910x70moren.jpg) no-repeat; height:70px; width:440px; float:left}
/*logo右邊內容展示區 樣式*/?
#header .r_logo{ ?float:right; width:470px; padding-top:20px; height:50px;}
.titleMenu{ height:32px; clear:both; background:#36F}
.titleMenu .Nav, .right_nav{ height:32px; width:100%; line-height:32px; font-size:14px; color:#ffffff; font-weight:bold; text-align:center; background:url(http://s.pc.qq.com/pc/images/navbgnew1125.gif) no-repeat; float: left}
/*導航欄制作,左浮動*/
.titleMenu .Nav li{ float:left; margin-left:10px; ?width:94px; height:36px; list-style:none; }
/*定義選中導航欄的樣式*/
.titleMenu .Nav .nav_a{background:url(http://s.pc.qq.com/pc/images/icon_s.png) repeat scroll 0 0 transparent; margin-top:4px;}
.titleMenu .Nav .nav_a a{ color:#000;} /*被選中的導航欄字體顯示黑色*/
?
</style>
</head>
<body>
<div id="top"></div>?
? ? ? <div id="header">?
? ? ? ? ? ? ? ? <div class="logo"> </div> <!--logo存放-->
? ? ? ? ? ? ? ? <div class="r_logo"> ?<!--logo右邊內容展示區-->
? ? ? ? ? ? ? ? ? ? <h4>騰訊軟件中心,騰訊精品軟件展示臺</h4>
? ? ? ? ? ? ? ? ? ? <p>我們會不斷提升產品的性能和體驗,為你打造最好用的軟件!</p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ??
? ? ? ? ? ? <!--導航欄-->
? ? ? ? ? ??
? ? ? ? ? ? ? ? <div class="titleMenu">
? ? ? ? ? ? ? ? ? ? <ul class="Nav">
? ? ? ? ? ? ? ? ? ? ? ? <li class="nav_a"><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">PC 產品 </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">Mac 產品 </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">無線產品 </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li ><a href="#">企業產品 </a></li>
? ? ? ? ? ? ? ? ? ? </ul> ? ? ? ?
? ? ? ? ? ? ? ? </div>
? ? ? </div>
?
</body>
</html>
2016-11-04
123124
2016-11-04
怎么寫都不對,有沒有類似的代碼借鑒下,謝謝
2016-11-03
這是由幾個背景圖片組成還有p標簽