地址: 上海市靜安區(qū)共和新路4718弄10號(hào)樓2樓
熱線:400-166-3538
電話:19301461038
郵箱:sales@shyuanzhen.cn
1.css字體簡(jiǎn)寫規(guī)則
當(dāng)使用css定義字體時(shí)你可能會(huì)這樣做:
事實(shí)上你可以簡(jiǎn)寫這些屬性:
現(xiàn)在好多了吧,不過有一點(diǎn)要注意:使用這一簡(jiǎn)寫方式你至少要指定font-size和font-family屬性,其他的屬性(如font-weight, font-style,font-varient)如未指定將自動(dòng)使用默認(rèn)值。
2.同時(shí)使用兩個(gè)class
通常我們只為屬性指定一個(gè)class,但這并不等于你只能指定一個(gè),實(shí)際上,你想指定多少就可以指定多少,例如:<p class="text side">...</p>。通過同時(shí)使用兩個(gè)class(使用空格而不是逗號(hào)分割),這個(gè)段落將同時(shí)應(yīng)用兩個(gè)class中制定的規(guī)則。如果兩者中有任何規(guī)則重疊,那么后一個(gè)將獲得實(shí)際的優(yōu)先應(yīng)用。
3.css中邊框(border)的默認(rèn)值
當(dāng)編寫一條邊框的規(guī)則時(shí),你通常會(huì)指定顏色、寬度以及樣式(任何順序均可)。例如:border: 3px solid #000(3像素寬的黑色實(shí)線邊框),其實(shí)這個(gè)例子中唯一需要指定的值只是樣式。假如你指定樣式為實(shí)線(solid),那么其余的值將使用默認(rèn)值:默認(rèn)的寬度為中等(相當(dāng)于3到4像素);默認(rèn)的顏色為邊框里的文字顏色。如果這正是你想要的效果,你完全可以不在css里指定。
4.!important會(huì)被IE忽略
在css中,通常最后指定的規(guī)則會(huì)獲得優(yōu)先權(quán)。然而對(duì)除了IE以外的瀏覽器來說,任何后面標(biāo)有!important的語(yǔ)句將獲得絕對(duì)的優(yōu)先權(quán),例如:margin-top:3.5em !important;margin-top:2em。除IE以外所有瀏覽器中的頂部邊界都是3.5em,而IE為2em,有時(shí)候這一點(diǎn)很有用,尤其在使用相對(duì)邊界值時(shí)(就像這個(gè)例子),可以顯示出IE與其他瀏覽器的細(xì)微差別。(很多人可能還注意到了css的子選擇器也是會(huì)被IE忽略的)
5.圖片替換的技巧
使用標(biāo)準(zhǔn)的html而不是圖片來顯示文字通常更為明智,除了加快下載還可以獲得更好的可用性。但是如果你決心使用訪問者的機(jī)器中可能沒有的字體時(shí),你只能選擇圖片。
舉例來說,你想在每一頁(yè)的頂部使用“Buy widgets”的標(biāo)題,但你同時(shí)又希望這是能被搜索引擎發(fā)現(xiàn)的,為了美觀你使用了少見的字體那么你就得用圖片來顯示了:
這樣當(dāng)然沒錯(cuò),但是有證據(jù)顯示搜索引擎對(duì)真實(shí)文本的重視遠(yuǎn)超過alt文本(因?yàn)橐呀?jīng)有太多網(wǎng)站使用alt文本充當(dāng)關(guān)鍵字),因此,我們得用另一種方法:<h1><span>Buy widgets</span></h1> ,那你的漂亮字體怎么辦呢?下面的css可以幫上忙:
現(xiàn)在你既用上了漂亮的圖片又很好的隱藏了真實(shí)文本--借助css,文本被定位于屏幕左側(cè)-2000像素處。
6.css盒模型hack的另一選擇
css盒模型hack被用來解決IE6之前的瀏覽器顯示問題,IE6.0之前的版本會(huì)把某元素的邊框值和填充值包含在寬度之內(nèi)(而不是加在寬度值上)。例如,你可能會(huì)使用以下css來指定某個(gè)容器的尺寸:
然后在html中應(yīng)用:<div id="box">...</div>
盒的總寬度在幾乎所有瀏覽器中為150像素(100像素寬度+兩條5像素的邊框+兩個(gè)20像素的填充),唯獨(dú)在IE6之前版本的瀏覽器中仍然為100像素(邊框值和填充值包含在寬度值中),盒模型的hack正是為了解決這一問題,但是也會(huì)帶來麻煩。更簡(jiǎn)單的辦法如下:
這樣一來在任何瀏覽器中盒的總寬度都將是150像素。
7.將塊元素居中
假設(shè)你的網(wǎng)站使用了固定寬度的布局,所有的內(nèi)容置于屏幕中央,可以使用以下的css:
你可以把html的body之內(nèi)任何項(xiàng)目置于<div id="content"></div>中,該項(xiàng)目將自動(dòng)獲得相等的左右邊界值從而保證了居中顯示。不過,這在IE6之前版本的瀏覽器中仍然有問題,將不會(huì)居中,因此必須修改如下:
對(duì)body的設(shè)定將導(dǎo)致主體內(nèi)容居中,但是連所有的文字也居中了,這恐怕不是你想要的效果,為此#content的div還要指定一個(gè)值:text-align:left
8.使用css實(shí)現(xiàn)垂直居中
垂直居中對(duì)表格來說是小菜一碟,只需指定單元格為vertical-align:middle即可,但這在css布局中不管用。假設(shè)你將一個(gè)導(dǎo)航菜單的高度設(shè)為2em,然后在css中指定垂直對(duì)齊的規(guī)則,文字還是會(huì)被排到盒的頂部,根本沒有什么區(qū)別。要解決這一問題,只需將盒的行高設(shè)為與盒的高度相同即可,以這個(gè)例子來說,盒高2em,那么只需在css中再加入一條:line-height: 2em 就可實(shí)現(xiàn)垂直居中了!
9. 容器內(nèi)的css定位
css的最大優(yōu)點(diǎn)之一就是可以將對(duì)象定位在文檔的任何位置,同樣的也可以將對(duì)象在某容器內(nèi)進(jìn)行定位。只需要為該容器添加一條css規(guī)則:
則容器內(nèi)的任何元素的定位都是相對(duì)于該容器的。假定你使用以下html結(jié)構(gòu):
如果想將navigation定位在容器內(nèi)離左邊界30像素,離頂部5像素,可以使用以下css語(yǔ)句:
10.延伸至屏幕底部的背景色
css的缺點(diǎn)之一是缺乏垂直方向的控制,從而導(dǎo)致了一個(gè)表格布局不會(huì)遇到的問題。假設(shè)你在頁(yè)面的左側(cè)設(shè)定了一列用于放置網(wǎng)站的導(dǎo)航。頁(yè)面為白色背景,但你希望導(dǎo)航所在的列為藍(lán)色背景,使用以下css即可:
問題在于導(dǎo)航項(xiàng)不會(huì)一直延伸到頁(yè)面的底部,自然它的背景色也不會(huì)延伸到底部。于是左列的藍(lán)色背景在頁(yè)面上被半路截?cái)啵速M(fèi)了你的一番設(shè)計(jì)。怎么辦呢?很不幸我們現(xiàn)在只能用欺騙的辦法,即將body的背景指定為與左列同顏色同寬度的圖片,css如下:
背景圖應(yīng)為寬150像素的藍(lán)色圖片。這一辦法的缺點(diǎn)是沒法使用em來指定左列的寬度,當(dāng)用戶改變文字的大小導(dǎo)致內(nèi)容的寬度擴(kuò)張時(shí),背景色的寬度不會(huì)隨之改變。
有很多經(jīng)典的可以在建網(wǎng)站時(shí)利用,但有些經(jīng)典元素卻不能隨便用,因?yàn)檫@會(huì)牽涉到相關(guān)版權(quán)問題,作為站長(zhǎng)應(yīng)該去留神一下別人是怎么建網(wǎng)站的,對(duì)于一個(gè)優(yōu)秀網(wǎng)站來說,好的想法與經(jīng)典元素是流量的保證,把經(jīng)典的部分做好了才使網(wǎng)站易于發(fā)展。
建網(wǎng)站有什么經(jīng)典元素可以利用
影視作品的經(jīng)典元素需要有相應(yīng)版權(quán),國(guó)內(nèi)網(wǎng)站對(duì)其有著獨(dú)到的愛好,有一家網(wǎng)站把小品中的經(jīng)典形象制作成動(dòng)畫,用于電視廣告里的宣傳。為此這家公司和被告上法庭,索賠數(shù)百萬(wàn)。這就是隨便引用經(jīng)典的后果。雖然效果顯著,但卻不是隨便就可以拿來用的。
利用一些經(jīng)典的營(yíng)銷元素,建營(yíng)銷型的網(wǎng)站,都會(huì)把營(yíng)銷型流程分成很細(xì),大概有十多個(gè)個(gè)流程,每個(gè)流程都有相關(guān)的人員來負(fù)責(zé),各崗位之間都是精密配合的,如果團(tuán)隊(duì)能力不行,那整個(gè)網(wǎng)站就大打折扣,因此好的團(tuán)隊(duì),融入一些經(jīng)典的營(yíng)銷手法,是成就經(jīng)典的營(yíng)銷型網(wǎng)站必要因素。
利用一些經(jīng)典的內(nèi)容元素,要知道網(wǎng)站內(nèi)容是左右網(wǎng)站權(quán)重最為關(guān)鍵的環(huán)節(jié),也是吸引客戶關(guān)注度的重點(diǎn)。作為站長(zhǎng)我們務(wù)必為網(wǎng)站內(nèi)容進(jìn)行很好的策劃。很多朋友覺得網(wǎng)站內(nèi)容只是關(guān)于網(wǎng)站中的文字,其實(shí)不是這樣的,這塊的內(nèi)容不光指的是文字內(nèi)容,還有網(wǎng)站上一切的重點(diǎn)模塊,以首頁(yè)為例子,用戶可能對(duì)于網(wǎng)站新聞內(nèi)容、產(chǎn)品案例、留言這些都?xì)w屬于網(wǎng)站內(nèi)容的范疇,這些都應(yīng)該關(guān)注,以便讓內(nèi)容建設(shè)做的更好。
利用經(jīng)典的網(wǎng)站結(jié)構(gòu),有時(shí)某些具體產(chǎn)品需要比較高的權(quán)重,比方某些轉(zhuǎn)化率最高、利潤(rùn)率最高或者新推出的核心產(chǎn)品,搜索次數(shù)很多的產(chǎn)品,還有為指定節(jié)日或促銷活動(dòng)制作的專欄頁(yè)面。這些網(wǎng)頁(yè)依照經(jīng)典樹形框架進(jìn)行建造,離首頁(yè)一般有一定距離,權(quán)重不會(huì)太高。要想使這種核心內(nèi)頁(yè)獲得高權(quán)重,最容易的方法就是在首頁(yè)上直接加上幾個(gè)核心內(nèi)頁(yè)的鏈接,甚至可以在側(cè)欄推薦、促銷部分加上整站鏈接。
依靠以上元素最終形成用戶體驗(yàn),現(xiàn)在做網(wǎng)站都講求客戶體驗(yàn),然而什么是用戶體驗(yàn)?zāi)??建網(wǎng)站和網(wǎng)站內(nèi)容能夠滿足用戶需求,并給客戶帶來幫助和價(jià)值,這樣的網(wǎng)站就是最有用戶體驗(yàn)的。套用一句頗為經(jīng)典的俗話,哪兒有用戶哪兒就有市場(chǎng),同樣的,哪兒有客戶哪兒就有網(wǎng)站需求。因此我們?cè)诮ㄔO(shè)網(wǎng)站前,一定要對(duì)用戶群體進(jìn)行分析。比方網(wǎng)站的用戶分布在哪些地方,客戶的知識(shí)層次和年齡框架等,其實(shí)用戶的每一個(gè)細(xì)節(jié)都關(guān)乎到建網(wǎng)站的要求。因此準(zhǔn)確對(duì)用戶需求的了解,比建網(wǎng)站本身更為重要。
找到一家建網(wǎng)站的企業(yè)來完成一套建網(wǎng)站設(shè)計(jì),一個(gè)成熟的設(shè)計(jì)人員,是要用著經(jīng)典之作來不斷證明著自己實(shí)力價(jià)值,在很多情況下建一個(gè)網(wǎng)站設(shè)計(jì)好與壞是可以從訪問流量看出來。
? ? ? ? | 公司名稱:上海緣震網(wǎng)絡(luò)科技有限公司 開戶銀行:中國(guó)工商銀行上海市彭浦支行 銀行賬號(hào):1001 2508 0930 0206 455 |
總部:上海市奉賢區(qū)金海公路6055號(hào)29號(hào)3樓 分部:上海市靜安區(qū)共和新路4718弄10號(hào)樓2樓 商務(wù)官網(wǎng):133288.cn 新官網(wǎng):www.shyuanzhen.com 案例庫(kù):www.shyuanzhen.cc 彥蓁科技:www.shyanzhen.cn | 緣震網(wǎng)絡(luò)成立于 2014 年,公司主要經(jīng)營(yíng)全案策劃,高端品質(zhì)網(wǎng)站建設(shè)、多媒體視頻宣傳片制作、微信公眾號(hào)開發(fā)、微信小程序開發(fā)、商城定制、SEO優(yōu)化、電商托管、空間托管、網(wǎng)站維護(hù)、應(yīng)用軟件開發(fā)、手機(jī)端APP開發(fā)、等為客戶提供一條龍網(wǎng)絡(luò)運(yùn)營(yíng)解決方案的的技術(shù)型企業(yè)。我們?cè)谌肆Y源、業(yè)務(wù)范圍、設(shè)計(jì)、技術(shù)、服務(wù)、信譽(yù)度、規(guī)范管理及企業(yè)文化等諸多方面完善自己,公司目前已與千余家各類客戶進(jìn)行長(zhǎng)期戰(zhàn)略合作,提供專業(yè)的網(wǎng)站建設(shè)與運(yùn)營(yíng)服務(wù)。我們的口號(hào):廣結(jié)良緣、震古爍今! |