頁面練習--隨筆一個頁面
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&tid=370">盛大網絡--前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=397">阿里巴巴--前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=97">金山軟件--KIS-WEB前端頁面工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=62">360京東商城 -- Web前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=419">阿里巴巴 - 技術部 - Web前端開發工程師（高級）</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=418">阿里巴巴 - 技術部 - Web前端開發工程師（初級）</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=417">人人網 - 技術部 - 3G前端工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=416">人人網 - 技術部 - Web前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=415">搜狐 - 媒體技術產品中心 - JavaScript前端</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=414">新浪 - 運營部 - Web前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=413">新浪 - 無線部 - Web前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=412">新浪 - 技術部 - Web前端開發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=411">新浪 - 產品部 - JavaScript前端工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=410">百度 - Web前端研發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=409">百度 - 商務搜索 - Web前端研發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=408">百度 - 社會化網絡事業部 - JavaScript前端</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=407">百度 - 搜索研發部 - web前端研發工程師</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&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
相關文章
- 1. 頁面練習
- 2. 一個頁面跳轉到另外一個頁面，在另外一個頁面爲前一個頁面賦值
- 3. 練習:W3C頁面製做
- 4. 博客頁面練習
- 5. html頁面小練習
- 6. 頁面練習--鮮花店
- 7. 註冊頁面練習
- 8. 移動端頁面練習
- 9. 登陸頁面練習
- 10. 第一個頁面
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 頁面練習
- 2. 一個頁面跳轉到另外一個頁面，在另外一個頁面爲前一個頁面賦值
- 3. 練習:W3C頁面製做
- 4. 博客頁面練習
- 5. html頁面小練習
- 6. 頁面練習--鮮花店
- 7. 註冊頁面練習
- 8. 移動端頁面練習
- 9. 登陸頁面練習
- 10. 第一個頁面