頁面練習--隨筆一個頁面

時間 2019-12-18

標籤頁面練習隨筆一個简体版

原文原文鏈接

html代碼：php

<!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" />
<meta  name="keywords" content=""/>
<meta  name="description" content=""/>

<link rel="stylesheet" type="text/css" href="css/cssstyles.css"/>
<title>首頁設計</title>
</head>

<body>
<!--頭部-->
<!--頭部分包括Logo圖片+導航條-->
<div id="header">

  <!--logo圖片超連接-->
    <a id="logo" href="#"><img src="images/logo.png"/></a>
  
  <!--導航-->
  <ul id="nav">
    <li><a href="#">首頁</a></li>
    <li><a href="#">培訓課程</a></li>
    <li><a href="#">優秀學員</a></li>
    <li><a href="#">課程疑問</a></li>
    <li><a href="#">職業生涯</a></li>
    <li><a href="#">學員社區</a></li>
    <li><a href="#">官方博客</a></li>
    <li><a href="#">學員地址</a></li>
  </ul>
</div>



<!--banner部分-->
<!--banner圖片，應該用js控制多張圖片-->
  <a  id="banner" href="#"><img  src="images/banner.jpg" /></a>




<!--內容部分-->
<div id="content">

  <!--左側的文章：圖片，標題，正文-->
  <div id="leftArticle">
  
    <!--正文圖片-->
    <a  id="articlePicA" href="#"><img src="images/articleBanner.jpg"/></a>
    
    <!--正文標題-->
    <h1><a href="#">Web前端開収工程師好找工做嗎？</a></h1>
    
    <!--正文內容,p標籤-->
    <p>據09年全國Web前端開發行業調查統計顯示，09年大型企業對於Web前端開發人才需求緊缺。 Web前端開發目前是一種新興職業，專業的前端開發人員絕大部分存在於    大型企業中，如騰訊、百度等，換種說法就是：選擇從事Web前端開發就等於你的一隻腳已經邁進了騰訊、百度等高薪企業。</p>
    <p>隨着Web2.0的大潮席捲而來，2010年互聯網發展速度空前，互聯網向標準化、專業化、精細化方向發展，致使Web開發職位進一步細分，Web前端開發工程師、Web頁    面重構師等這些高薪職業相繼誕生。現在流行的瀏覽器有十幾種，不一樣的瀏覽器對頁面的解析不一樣，致使相同的頁面在不一樣的瀏覽器內顯示效果不一樣，不能兼容多種瀏    覽器，用戶體驗下降，搜索引擎抓取率低，加載速度慢等影響頁面總體質量的因素產生，因此對頁面製做要求愈來愈高，導致許多公司急需提供製做標準頁面服務的技術人員。</p>
    <p>如今YAHOO、MSN等國際門戶網站，網易、新浪等國內門戶網站，和主流的Web2.0網站，均採用xHTML(DIV)＋CSS的框架模式，更加印證了xHTML(DIV)＋CSS是大勢所趨。</p>
    <p>正由於如此Web前端開發人員成爲市場上緊缺的人才，同時也成爲一個新興的高薪職業。</p> 
  </div>
  
  <!--右側的信息連接-->
  <!--信息欄和導航欄的佈局差很少，可是這裏使用「dl+dt+dd」比「ul+li」要好-->
  <div id="rightInfo">
   
    <!--職業生涯欄目-->
    <dl>
      <dt>職業生涯</dt>
      <dd><a href="#">Web前端開發工程師須要掌握哪些核心技能？</a></dd>
      <dd><a href="#">我是程序員，有必要進行web前端開發的學習嗎?</a></dd>
      <dd><a href="#">我是網站美工，目前發展遇到瓶頸，該如何解決？</a></dd>
      <dd><a href="#">我適合從事web前端開發行業嗎？</a></dd>
      <dd><a href="#">Web前端工程師如何給本身定位？</a></dd>
      <dd><a href="#">Web前端開發工程師好找工做嗎？</a></dd>
    </dl>
    
    <!--好職推薦欄目-->
    <dl>
      <dt>好職推薦</dt>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=370">盛大網絡--前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=397">阿里巴巴--前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=97">金山軟件--KIS-WEB前端頁面工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=62">360京東商城 -- Web前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=419">阿里巴巴 - 技術部 - Web前端開發工程師（高級）</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=418">阿里巴巴 - 技術部 - Web前端開發工程師（初級）</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=417">人人網 - 技術部 - 3G前端工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=416">人人網 - 技術部 - Web前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=415">搜狐 - 媒體技術產品中心 - JavaScript前端</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=414">新浪 - 運營部 - Web前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=413">新浪 - 無線部 - Web前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=412">新浪 - 技術部 - Web前端開發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=411">新浪 - 產品部 - JavaScript前端工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=410">百度 - Web前端研發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=409">百度 - 商務搜索 - Web前端研發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=408">百度 - 社會化網絡事業部 - JavaScript前端</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=407">百度 - 搜索研發部 - web前端研發工程師</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=406">百度 - 系統部 - WEB前端開發工程師</a></dd>
    </dl>
  </div>
</div>



<!--頁底部分：第一行文字所有爲連接，第二行左邊的是備案號，右側是版權信息-->
<div id="footer">
  <!--上半部分爲所有連接-->
  <p>
    <a href="#">關亍cssStudy</a> | 
    <a href="#">廣告服務</a> | <a href="#">提交問題</a> | <a href="#">聯繫咱們</a> | <a href="#">版權聲明</a> | <a href="#">關亍隱私</a> | <a href="#">合s做夥伴</a> </p> <!--第二行左邊的是備案號，右側是版權信息--> <p> <a href="#">京ICP備10055601號</a> All rights(C)2008-2010 Reserved </p> </div> </body> </html>

CSS代碼：css

/*標籤重置,圖片邊框處理*/
body,div,p,ul,li,dl,dt,dd,h1,a{ margin:0px; padding:0px;}
img { border:none;}
/*設置頁面的寬度，而且水平居中，四大板塊的寬度應該都是同樣的*/
#header,#banner,#content,#footer{ width:1000px; margin:0 auto;}


/*頁面背景:html,body的背景*/
html { background:url(../images/bg.gif) repeat-x;}
body { background:url(../images/clouds.gif) repeat-x; padding-top:45px;}


/*header版塊*/
/*頭部與上邊沿有45px的距離，爲實現這個效果，咱們採用設置body上內邊距的辦法*/
/*將header的logo圖片作爲塊狀元素，包括超連接*/
#logo { display:block; width:220px; height:54px; float:left; background-color:#991616;}
#logo img{ display:block;}
/*導航部分的css設計*/
#nav { width:780px; height:54px; list-style:none; float:left; background-color:#393838;}
#nav li{ float:left;}
#nav li a { display:block; width:86px; height:54px; line-height:54px; text-align:center; font-size:12px; text-decoration:none; float:left;
 color:#ccc;}
#nav li a:hover { color:#fff;}
/*
BUG:FireFox內，不可以自適應內部元素的高度，因此它的高度變爲零，而在ie6裏面卻能夠正帯顯示，這是一個很嚴重的問題，若是高度不能自適應的話，那內部子元素logo和nav的浮動產生的影響就會"外泄"，對header外面的版塊產生影響，從而產生版塊錯位。直接在header的樣式裏"overflow:hidden;"*/
#header { overflow:hidden;}
/*設置某一項處於當前激活狀態：
#nav li .navActive { background:url(../images/navHoverBg.png) no-repeat; color:#fff;}
*/


/*banner版塊*/
/*設置圖片的大小，包括父容器的大小，防止圖片大小自適應大小致使圖片破壞頁面佈局*/
#banner { display:block; width:1000px; height:292px; margin-top:10px; margin-bottom:10px;}
#banner img { display:block; width:1000px; height:292px;}


/*content版塊*/
#content { overflow:hidden; font-size:12px; line-height:24px; background:#EAEAEA;}
/*
bug：leftArticle和rightInfo 上下左右都有10像素的外邊距，若是咱們用左側浮動來實現2欄效果，在存在外邊距的狀況下就會出現IE6的雙倍邊距Bug，爲了不出現bug，咱們就利用"display:inline;"
*/
#leftArticle,#rightInfo { margin:10px; float:left; display:inline;}
#leftArticle{width:660px;} 
#rightInfo{width:300px;} 
#articlePicA,#articlePicA img { display:block;}
/*h1 styles*/
#leftArticle h1{ margin:20px 0; font-size:24px; font-family:"黑體", "楷體", "宋體";}
h1{ font-size:100%;}
#leftArticle h1 a { color:#900; text-decoration:none;}
#leftArticle h1 a:hover { text-decoration:underline;}
/*每段文字都會縮進兩個文字:text-indent:2em*/
#leftArticle p { text-indent:2em; color:#333; margin-bottom:30px; font-size:14px;}
/*右側的信息欄*/
#rightInfo dl{ margin-bottom:10px;}
/*dt*/
#rightInfo dl dt { background:url(../images/title.jpg) no-repeat; height:32px; line-height:32px; color:#fff; font-size:14px; font-weight:bold;
 text-indent:30px;}
/*dd*/
#rightInfo dl dd { height:24px; line-height:24px; background:url(../images/dot.gif) no-repeat 7px 10px; text-indent:30px;}
#rightInfo dl dd a { color:#333; text-decoration:none; }
#rightInfo dl dd a:hover { color:#999; text-decoration:underline;}


/*footer版塊*/
#footer{ 
background:#393838; 
height:52px; 
line-height:18px; 
margin-top:10px;
padding-top:18px; 
text-align:center; 
color:#ccc; 
font-size:12px; }


#footer a{color:#ccc; text-decoration:none;} 
#footer a:hover{text-decoration:underline;}

Css設計步驟：html

1.對用到的html標籤進行Css樣式的重置(margin 0,padding 0)，方便頁面的從新架構。前端

2.對於頁面中的全部圖片邊框進行處理，美觀而且防止影響佈局。程序員

3.頁面的主體居中。margin:0 auto,而且必定要設置絕對寬度。web

4.頁面的背景，背景的顯示跟加載的速度有關，而背景圖片的大小直接影響加載的速度。這裏採用的是：給html和body都添加背景圖片，不一樣的是html標籤的背景圖片很是小，是一個藍色向白色漸變的小圖片，body標籤背景圖片是一張完整的圖片。當頁面開始加載時，會先顯示html的背景，上面藍色下面白色漸變的背景，若是body背景還沒加載完，頁面也不會顯得太單調。chrome

5.header版塊，logo圖片和導航欄。有連接的圖片，應該把a,img標籤都定義成塊元素，方便頁面的佈局。瀏覽器

導航的設計：ul+li 設置寬度和高度；去掉標籤的點：list-style:none;注意li的左浮動；導航下的a
標籤設置爲塊元素，設置寬高；height和line-height，若是容器設定了高度，而且有文字，最好設定行
高同樣，效果顯得好看！？li和li a都float:left。網絡

(注意：overflow:hidden ！一個塊狀元素內的子塊狀元素，若是要浮動，則應該在父塊狀元素內添加overflow:hidden，爲了防止ff的bug!)前端工程師

6.設置某一項處於當前激活狀態：

#nav li .navActive{ background:url(../images/navHoverBg.png) no-repeat; color:#fff;}。

7.banner版塊，圖片大小直接影響頁面佈局，全部圖片最後定義寬度和高度，因此圖片應該定義成塊狀元素，有連接的圖片，a標籤連接也應該定義成塊狀元素。

注：設置圖片的大小，包括父容器的大小，防止圖片大小自適應大小致使圖片破壞頁面佈局。

8.content版塊，佈局時要注意兩個點，第一，overflow:hidden ！一個塊狀元素內的子塊狀元素，若是要浮動，則應該在父塊狀元素內添加overflow:hidden，爲了防止ff的bug。第二，IE6的雙邊距bug，當父容器當中的子容器(塊級元素)有浮動樣式的時候，給子容器元素添加margin-left和margin-right樣式，會出現。

解決辦法：

一，display:inline;display:list-item 這樣在元素浮動時就不會出現；

二，!important解決，好比
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下屬性寫的是5PX，但在顯示出來的是10p

9.a標籤的僞類樣式，hover,visited

10.其餘的樣式，包括字體樣式，背景，等等，具體調試或者藉助chrome