div+css構建自己的學習筆記網頁前臺一(頭部)

原創 sqzzy 2018-09-12 07:07

1.dw創建一個html基本頁面。採用的是外部調用css。

2.素材-背景圖片-和頭部圖片:

背景 

背景 

 

html部分:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>個人學習筆記</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
  6. <link rel='stylesheet' type='text/css' media='all' href='style.css' /> 
  7. <style type='text/css' media='screen'>@import "style.css";</style> 
  8.     </head> 
  9.     <body id = "index_body" class = "home"> 
  10.         <!--編碼開始--> 
  11. <div id = "wrapper"> 
  12. <div id = "header"> 
  13. <h1>個人學習筆記</h1> 
  14.         <ul id = "mainNav"> 
  15.         <li><a href = "#" id = "home">home</a></li> 
  16.         <li><a href = "#">PHP</a></li> 
  17.         <li><a href = "#">JavaScript</a></li> 
  18.         <li><a href = "#">Html/Css</a></li> 
  19.         <li><a href = "#" id="gallery">Mysql</a></li> 
  20.         <li><a href = "#">Linux</a></li> 
  21.         <li><a href = "#">Smarty</a></li> 
  22.         <li><a href = "#" id="contact">About</a></li> 
  23.         </ul> 
  24.         <!-- 主導航結束-->         
  25. <!--header div--> 
  26. </div> 
  27.  
  28.         <div id = "footer"> 
  29.  
  30.         </div> 
  31. <!--wrapper div--> 
  32. </div> 
  33.           
  34. </body> 
  35. </html> 

CSS樣式表部分:CSS樣式表名稱:style.css

 

  1. body{  
  2.     margin:0;  
  3.     padding:0;  
  4.     font:70% 'Lucida Grande',Verdana, Helvetica, sans-serif; /*通用字體族*/ 
  5. }  
  6. #index_body{  
  7.     background:#CAC78A url('images/background.gif') repeat-x fixed;  
  8. }  
  9. /*index body部分背景*/ 
  10. a:link{  
  11.     background-color: transparent;  
  12.     text-decoration: underline;  
  13.     color: #666;  
  14.  
  15. }  
  16. a:hover{  
  17.     background-color:#FFC;  
  18.     text-decoration:underline;  
  19.     color:#990;  
  20. }  
  21. a:visited{  
  22.     background-color:transparent;  
  23.     text-decoration:underline;  
  24.     color:#666;  
  25. }  
  26. /*下面是header部分*/ 
  27. h1{  
  28.     margin:0;  
  29.     padding:30px;  
  30.     font-size:150%;  
  31.     color:#FF0000;  
  32.     text-indent:-9000px;    /*屬性規定文本塊中首行文本的縮進。 */ 
  33. }  
  34. h2 {  
  35. margin: 0 10px 0 10px;  
  36. padding: 2px;  
  37. font-size: 130%;  
  38. color: #A3A06F;  
  39. background: #E5E2A9;  
  40. }  
  41. h3 {  
  42. text-transform: uppercase;  
  43. display: inline;  
  44. font-size: 92%;  
  45. margin: 10px 5px 0 5px;  
  46. padding: 2px;  
  47. }  
  48.  
  49. /*wrapper Css。 */ 
  50. #wrapper{  
  51.     width:750px;  
  52.     margin:0 auto;  
  53.     background-color:#D7D493;  
  54.     padding:0 10px 10px 10px;  
  55. }  
  56. /*header Css。 */ 
  57. #header{  
  58.     width:750px;  
  59.     height:170px;  
  60.     background:url('images/header.gif');  
  61. }  
  62. #mainNav  
  63. {  
  64.     margin: 30px 0 0 0;  
  65.     padding: 0;  
  66.     width: 750px;  
  67.     height: 35px;  
  68.     font-weight: bold;  
  69.     font-size: 90%;  
  70. }  
  71.  
  72. #mainNav ul  
  73. {  
  74.     list-style: none;  
  75.     margin: 0;  
  76.     padding: 0;  
  77.     border: none;  
  78. }  
  79.  
  80. #mainNav li  
  81. {  
  82.     display: block;  
  83.     margin: 0;  
  84.     padding: 0;  
  85.     float: left;  
  86.     width: auto;  
  87. }  
  88.  
  89. #mainNav a  
  90. {  
  91.     color: #D7D493;  
  92.     display: inline;  
  93.     width: auto;  
  94.     text-decoration: none;  
  95.     background: #000;  
  96.     margin: 0;  
  97.     padding: 10px 10px;  
  98.     border-right: 1px solid #FFF;  
  99. }  
  100.  
  101. #mainNav a:hover, #mainNav a:active { background: #D7D493;color: #000; }  
  102.  
  103. #mainNav a.active:link, #mainNav a.active:visited  
  104. {  
  105.     position: relative;  
  106.     z-index: 102;  
  107.     background: #BBB;  
  108.     color: #D7D493;  
  109.     font-weight: bold;  
  110. } 

//最後的效果:

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

css float與學習騎自行車

麪包理想 2019-02-23 00:25:45

css float與學習騎自行車

麪包理想 2018-10-17 02:14:16

當前標籤dede[field:**]標籤調用說明

410502505 2019-02-23 13:09:08

（JQuery學習筆記）利用jquery製作網頁導航定位

w1sw 2019-02-23 00:33:03

ios7 中關於導航切換影響UIScrollView的問題

dragon_cao 2019-02-23 00:11:51

iOS 7：自定義導航轉場動畫以及更多

dragon_cao 2019-02-23 00:11:50

動態生成二級導航菜單

zhupengfei418 2019-02-22 21:15:19

輸入框和導航組件

菜鳥不菜麼 2019-02-22 20:21:41

vsftp

519522607 2019-02-22 16:18:29

【REACT NATIVE 系列教程之五】NAVIGATOR(頁面導航)的基本使用與傳參

HimiScxin 2019-02-22 14:25:05

微信小程序實現頁面浮動導航

代码养家 2019-01-28 22:43:47

微信小程序實現頂部導航特效

BlochCoding 2019-01-28 22:43:47

定位導航方案在特殊環境下的適用說明

Rplidar 2019-01-03 13:28:24

vue頭部導航動態點擊處理方法

qq_22936647 2018-11-05 02:05:33

室內導航之公園（七）

永拓科技 2018-11-01 02:50:53