欧美电影精品久久久,老师4tube日本video

　域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

第一步:先把把所有標(biāo)記歸置內(nèi)外邊距歸置為0,其實(shí)還有一種方法是根據(jù)根據(jù)BODY里面所用到的HTML標(biāo)記進(jìn)行重置為0.你也可以先用*重置為0然后在根據(jù)BODY中所使用的標(biāo)記進(jìn)行重置.如:我們BODY標(biāo)記中使用了,div,p那我們的選擇符就寫(xiě)body,div,p就可以了.不需要寫(xiě)*了.

margin:0px;

padding:0px;

}

第二步:把我們網(wǎng)頁(yè)整體的背景實(shí)現(xiàn),我們想要的結(jié)果內(nèi)容居中,背景漸變始終鋪滿屏幕.

這樣的話,我們可以為body 添加背景圖片.要讓基在沿水平方向平鋪即可.

body{

background:url(image/bj.jpg) repeat-x ;

}

第三步：通過(guò)觀察我們可以先把我們網(wǎng)頁(yè)劃分成為五大部分,然后先為其編寫(xiě)相應(yīng)的html代碼

HTML代碼:

通過(guò)PS測(cè)量得知,這五部分占據(jù)950寬,而且居中.我們可以使用群組選擇符,先讓這五個(gè)DIV居中.

#header,#nav,#banner,#main,#footer{

margin:0px auto;

width:950px;

}

第四步：先完成header頭部部分

LOGO：一般這個(gè)部分有兩個(gè)要求.1點(diǎn)擊LOGO可以返回網(wǎng)站首頁(yè).2要注意SEO方面的？所以我們采用了如下HTML代碼：

<h1><a href="#">北京杰飛css網(wǎng)頁(yè)切圖</a></h1>

那么CSS編碼該如何實(shí)現(xiàn)呢？

大家可以可以先想一下。然后在看我下邊寫(xiě)CSS代碼的，其實(shí)這個(gè)地方采用的是CSS以圖換字技巧。CSS代碼如下

#header h1 a{

background:url(image/logo.jpg);

width:476px;

height:102px;

display:block;

text-indent:-9999px;

}

好?，F(xiàn)在我們接著完成頭部右側(cè)部分，還是先進(jìn)行HTML 代碼的編寫(xiě)

<ul>

<li><a href=" #">css切圖培訓(xùn)</a></li>

</ul>

CSS代碼：

#header h1{

float:left;

}

我們首先讓H1左浮動(dòng)。這樣右側(cè)UL部分就可以在同行顯示了。

#header ul{

float:left;

padding:50px 0px 0px 200px;

list-style:none;

}

為了避免問(wèn)題，可以讓UL也浮動(dòng)。大家可以試一下，如果不設(shè)置浮動(dòng)在IE各版本，火狐中表現(xiàn)的是否一致

#header ul li{

float:left;

padding:0px 10px;

}

上邊代碼在火狐和IE8中沒(méi)有問(wèn)題，但是在IE6中會(huì)出現(xiàn)問(wèn)題。我們會(huì)在后面進(jìn)行講解。

#header ul li a{

color:#555;

text-decoration:none;

font-size:13px;

}

#header ul li a:hover{

color:#000;

text-decoration:underline;

}

這時(shí)候的結(jié)果如下顯示：

第五步：完成導(dǎo)航效果，效果說(shuō)明：鼠標(biāo)放上背景變成淺藍(lán)色，并且要制作當(dāng)前頁(yè)的效果。

HTML代碼：

<ul>

<li><a href="#”>office培訓(xùn)</a></li>

<li><a href="#">div css培訓(xùn)</a></li>

</ul>

現(xiàn)在直接編寫(xiě)導(dǎo)航的代碼會(huì)產(chǎn)生一個(gè)問(wèn)題。如果學(xué)過(guò)盒模型與浮動(dòng)的都應(yīng)該知道.

導(dǎo)航部分文字跑到header頭部右側(cè)了。怎么解決呢?

其實(shí)就該我們?nèi)f能的清除浮動(dòng)起作用了

CSS代碼

.clear{

clear:both;

}

這時(shí)候?yàn)槲覀?lt;div id="nav"></div>

變成了<div id="nav" class=” .clear”></div>

大家現(xiàn)在看一下，是不是解決了上邊的問(wèn)題呢。其實(shí)如果大家按照標(biāo)準(zhǔn)的盒模型計(jì)算，如果計(jì)算得當(dāng)，不會(huì)出現(xiàn)這個(gè)問(wèn)題。

完成導(dǎo)航的CSS樣式

#nav{

padding-top:3px;

}

#nav ul{

list-style:none;

}

#nav ul li{

float:left;

}

默認(rèn)li是占據(jù)整行顯示的,所以通過(guò)左浮動(dòng).使其在一行顯示。之后在設(shè)置A的狀態(tài)，達(dá)到咱們想要的結(jié)果

#nav ul li a{

display:block;

width:135px;

height:56px;

line-height:56px;

color:#fff;

text-align:center;

text-decoration:none;

font-size:14px;

}

display:block;讓A元素變成塊狀，然后好為其設(shè)置寬高背景。這里面還有一個(gè)要點(diǎn)就是line-height:56px，同高度56px對(duì)應(yīng)，可以實(shí)現(xiàn)什么效果呢。同學(xué)們想一下？

#nav ul li a:hover{

background:#177cb7;

}

現(xiàn)在我們導(dǎo)航基本已經(jīng)完成，但是還少了一個(gè)當(dāng)前狀態(tài)的導(dǎo)航效果。怎么辦呢。

其實(shí)很簡(jiǎn)單就是為當(dāng)前所在頁(yè)面的A鏈接添加一個(gè)ID為current的標(biāo)記。如下：

接著這個(gè)狀態(tài)和鼠標(biāo)懸停時(shí)是一致的，所以很簡(jiǎn)單，只需要在鼠標(biāo)懸停狀態(tài)后邊在添加一個(gè)#nav ul li a#current選擇符即可。你完成沒(méi)

第六步：產(chǎn)品宣傳banner圖片，公司網(wǎng)站的話一般會(huì)為一個(gè)動(dòng)畫(huà)或者是js/jquery的特效。目前咱們直接就放置一個(gè)圖片

必要的屬性是alt必須加上。替換文本，當(dāng)圖片不能正常加載，還有就是為了優(yōu)化。

小技巧：

因?yàn)槎啻斡玫経L。都需要添加默認(rèn)圓點(diǎn)。所以在*里面寫(xiě)上list-style:none;.這樣其它地方就不用寫(xiě)了。其實(shí)包含文字顏色大小等，如果很多地方也是一樣。同樣可以聲明到*選擇符里。

第七步：完成內(nèi)容區(qū)域

思路：我們可以把內(nèi)容區(qū)域劃分為兩部分：一部分是左側(cè)導(dǎo)航，一部分為主要內(nèi)容區(qū)域。這樣我先為進(jìn)行HTML編碼：

測(cè)試

</div>

現(xiàn)在我們先看一下右側(cè)導(dǎo)航的結(jié)果圖

右側(cè)導(dǎo)航html代碼:

<ul>

<li><a href="#l">div css培訓(xùn)</a></li>

</ul>

</div>

css代碼: 下邊這些代碼在上邊制作過(guò)程中都已經(jīng)說(shuō)過(guò)了。所以直接給出來(lái)了，不再講解。

#main{

padding:10px 0px;

}

#main .container{

width:674px;

margin-right:50px;

float:left;

}

#main .subMenu{

width:226px;

float:left;

margin-bottom:10px;

}

#main .subMenu h5{

background:#19577c;

height:39px;

text-align:center;

color:#fff;

font-size:15px;

line-height:39px;

}

#main .subMenu ul li{

border-bottom:1px solid #d4d4d4;

background:#f1f1f1;

}

#main .subMenu ul li a{

display:block;

color:#000;

height:36px;

line-height:36px;

text-decoration:none;

padding-left:60px;

background:url(image/li.jpg) no-repeat 40px 50%;

}

#main .subMenu ul li a:hover{

color:#177cb7;

background:url(image/li3.jpg) no-repeat 40px 50%;

}

第八步：內(nèi)容的主體區(qū)域編碼：通過(guò)上邊的效果的圖片，大家可以先想一下HTML如何編寫(xiě)。我是使用的DLDD的方式，大家一定要學(xué)會(huì)這個(gè)標(biāo)記的用法，很常用，敘述產(chǎn)品時(shí)經(jīng)常性用到。

現(xiàn)在我們看看HTML代碼：

<dd>杰飛學(xué)校特色：實(shí)行家教式教學(xué)模式，小班教學(xué)的完美結(jié)合可隨到隨學(xué)，可預(yù)約上課，可完全根據(jù)學(xué)員實(shí)際情況教學(xué)，保證學(xué)會(huì)為止……</dd>

</dl>

<dd><a href="#">淺談平面設(shè)計(jì)中配色方案</a><span>2013-4-14</span></dd>

</dl>

</div>

接著是最下邊產(chǎn)品部分的HTML編碼：

<ul>

</ul>

</div>

現(xiàn)在開(kāi)始完成CSS代碼的編寫(xiě)：

首選是學(xué)校簡(jiǎn)介與新聞，其實(shí)仔細(xì)觀察這兩個(gè)也是兩列布局，所以設(shè)定寬，并設(shè)置左浮動(dòng)：

#main .container dl{

width:300px;

float:left;

}

接著是欄目名稱：因?yàn)檫@兩個(gè)效果是一樣的。所以直接使用群組選擇符把兩個(gè)都選擇編寫(xiě)就可以了。

#main .container dl h5,#main .product h5{

border-bottom:1px #000 solid;

margin-bottom:15px;

font-size:17px;

}

#main .container dl h5 a{

padding-left:170px;

}

先完成左側(cè)學(xué)校簡(jiǎn)介，讓簡(jiǎn)介浮在圖片右方：

#main .container dl dt{

float:left;

width:110px;

}

#main .container dl dt img{

border:1px solid #ccc;

}

#main .container dl.xuexiao dd{

font-size:12px;

margin-left:25px;

float:left;

width:165px;

text-indent:2em;

}

單獨(dú)設(shè)置新聞的DD標(biāo)記

#main .container dl.xinwen dd{

height:22px;

line-height:22px;

background:url(image/li.jpg) no-repeat 0 50%;

}

#main .container dl.xinwen dd a{

color:#000;

text-decoration:none;

padding-left:20px;

}

#main .container dl.xinwen dd span{

padding-left:25px;

}

#main .container dl.xuexiao{

margin-right:40px;

}

現(xiàn)在我們開(kāi)始完成產(chǎn)品的CSS代碼：

#main .product{

padding-top:20px;

}

讓其距頂部空出一定距離。

#main .product h5 a{

padding-left:510px;

}

#main .product ul li{

float:left;

padding-left:10px;

}

讓LI進(jìn)行左浮動(dòng)即可。

最后一步：完成底部：

HTML代碼：

<p>聯(lián)系我們：北京市石景山區(qū)皓月寫(xiě)字樓328室;聯(lián)系電話:010-88685956;15910646335(陳老師)</p>

</div>

CSS代碼：

#footer{

background:#d1dce3;

height:50px;

line-height:50px;

text-align:center;

}

到此我們已經(jīng)完成了一個(gè)頁(yè)面的切圖。

幾個(gè)錯(cuò)誤：頭部標(biāo)記在IE6中有下面表現(xiàn)。所以通過(guò)下邊代碼解決一下：

<!--[if IE 6]>

<![endif]-->

上邊代碼的意思是僅IE6可以識(shí)別。這樣我們就可以單獨(dú)為IE6編輯樣式了。

<!--[if IE 6]>

#header ul li{

width:80px;

float:left;

padding:0px 10px;

}

Header頭部右側(cè)加寬度值

#main .container dl dt img{

border:1px solid #ccc;

}

#main .container dl.xuexiao dt{

float:left;

width:110px;

}

#main .container dl.xuexiao dd{

font-size:12px;

margin-left:20px;

float:right;

width:145px;

text-indent:2em;

}

#footer{

margin-top:-10px;

}

</style>

<![endif]-->

其中里面還涉及了一些別的知識(shí)。在后續(xù)課程會(huì)去講解。

來(lái)源:

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！

當(dāng)前位置：首頁(yè) > 站長(zhǎng) > 建站經(jīng)驗(yàn) > 正文

PSD轉(zhuǎn)div css網(wǎng)頁(yè)切圖示例

相關(guān)文章

當(dāng)div設(shè)置contentEditable=true時(shí),重置其內(nèi)容后無(wú)法光標(biāo)定位

HTML+CSS相對(duì)寬度和絕對(duì)寬度沖突時(shí)的div解決方法

div與div之間有空隙的解決方法

HTML中div嵌套div的margin不起作用的解決方法

CSS實(shí)現(xiàn)子元素div水平垂直居中的示例

熱門(mén)排行

信息推薦

熱門(mén)標(biāo)簽