簡(jiǎn)單html以及css的用法詳解

2020-03-24 17:34:24

字體：大中小

供稿：網(wǎng)友

我將利用三天的時(shí)間來(lái)完成制作京東首頁(yè)的靜態(tài)頁(yè)面效果，其中包含的內(nèi)容有html以及css。1、在開發(fā)進(jìn)行之前，首先要配置開發(fā)環(huán)境：我們需要安裝sublime webstorm vscode Hbuilder atom等開發(fā)軟件，選擇其一即可。我所使用的是webstorm。2、在主文件夾中建立相關(guān)的項(xiàng)目文件夾：為了將與項(xiàng)目相關(guān)的文件放在一塊，便于管理和以后的維護(hù)。其中：包括與項(xiàng)目相關(guān)的一些文件主頁(yè)或是首頁(yè) index.html default.htmlCss文件夾 css文件的 Base.css global.cssImages文件夾用來(lái)放置網(wǎng)站中的所有的圖片Js文件音頻或是視頻文件3、在這之后我們要進(jìn)行樣式初始化，一般所有網(wǎng)站開發(fā)之前都會(huì)進(jìn)行樣式初始化，例如淘寶、京東這樣的大網(wǎng)站，都有自己的樣式初始化css文件。如：XML/HTML Code復(fù)制內(nèi)容到剪貼板
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{ margin:0; padding:0; } fieldset,img,input,button{ border:none; padding:0; margin:0; outline-style:none; } ul,ol{ list-style:none; } /*去掉原樣式中的小黑點(diǎn)*/ input{ padding-top:0; padding-bottom:0; font-family: SimSun , 宋體 } select,input{ vertical-align:middle; } /*輸入字居中顯示*/ select,input,textarea{ font-size:12px; margin:0; } /**/ textarea{ resize:none; } /*防止拖動(dòng)*/ img{ border:0; vertical-align:middle;/*去掉圖片底部默認(rèn)的3像素空白縫隙*/ } table{ border-collapse:collapse;/*合并外連線*/ } body{ font:12px/150%Arial,Verdana, /5b8b/4f53 /*unitedCode的寫法，宋體的寫法*/ color:#666;/*150%基于當(dāng)前字體尺寸的百分比行間距*/ background:#fff; } .clearfix:before,.clearfix:after{ /*清除浮動(dòng)，最好最標(biāo)準(zhǔn)的寫法*/ content: display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1;/*IE/7/6*//*兼容IE6下的寫法*/ } a{ color:#666; text-decoration:none; } a:hover{ color:#C81623; } h1,h2,h3,h4,h5,h6{ text-decoration:none; font-weight:normal; font-size:100%; } s,i,em{ font-style:normal; text-decoration:none; } .col-red{ color:#C81623!important;/*京東主色調(diào)*/ } /*公共類*/ .w{ /*版心提取*/ width:1210px; margin:0auto; } .fl{ float:left; } .fr{ float:right; } .al{ text-align:left; } .ac{ text-align:center; } .ar{ text-align:right; } .hide{ display:none; }
這樣可以方便開發(fā)人員對(duì)各個(gè)標(biāo)簽的樣式的初始化以及公共類的重用。4、分析網(wǎng)站結(jié)構(gòu)做網(wǎng)站的時(shí)候也有一個(gè)規(guī)范或是通例布局的順序一般是從上到下，從左到右在寫頁(yè)面的時(shí)候，一般考慮使用標(biāo)準(zhǔn)流的元素，其次才使用浮動(dòng)或是定位。就在標(biāo)準(zhǔn)流元素當(dāng)中，寬高是最穩(wěn)定的，其實(shí)才使用padding,最后或者可以使用margin.我們網(wǎng)站結(jié)構(gòu)中的任何標(biāo)簽都可以看成是一個(gè)盒模型，都可以設(shè)置寬高，只是有的元素設(shè)置了寬高之后，不起作用。要想讓行內(nèi)元素的寬高起作用：1. 將行內(nèi)元素轉(zhuǎn)換成塊級(jí)元素或是行內(nèi)塊元素2. 浮動(dòng) 脫標(biāo) 3. 定位脫標(biāo)在布局行內(nèi)塊元素時(shí)，行內(nèi)塊元素之間有默認(rèn)的幾像素的間距。這幾像素的間距只能用浮動(dòng)來(lái)清除。定位有四種： Fixed absolute relative static一般我們?cè)诜治鼍W(wǎng)站結(jié)構(gòu)時(shí)，使用火狐瀏覽器可以將這個(gè)網(wǎng)頁(yè)截圖之后保存下來(lái)：然后我們可以使用fireworks來(lái)提取網(wǎng)站中的具體內(nèi)容的寬高、顏色等。Fw的常用快捷鍵：I 滴管工具吸取顏色 K 切片工具量取元素的寬度Z 放大鏡工具 V 移動(dòng)A 指針工具常用的復(fù)合屬性：Backgroundmso-char-indent-count:3.4900; 浮動(dòng)的原因就是因?yàn)楦负凶記](méi)有高度，原來(lái)的高度是靠標(biāo)準(zhǔn)流中的子元素?fù)纹饋?lái)，但是子元素浮動(dòng)了之后，脫離標(biāo)準(zhǔn)流了，造成父級(jí)元素的高度為0;1.給父盒子設(shè)置一個(gè)高度 2.Clear: both 3.Overflow: hidden 觸發(fā)了BFC模式也可以用來(lái)清除浮動(dòng)4.偽元素或是雙偽元素清除法XML/HTML Code復(fù)制內(nèi)容到剪貼板
.clearfix:before,.clearfix:after{ /*清除浮動(dòng)，最好最標(biāo)準(zhǔn)的寫法*/ content: display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1;/*IE/7/6*//*兼容IE6下的寫法*/ }
定位元素的層級(jí)問(wèn)題：如果只給一個(gè)元素絕對(duì)定位，而不寫trbl值的話，會(huì)以原位顯示定位(相對(duì)和絕對(duì)或固定)的元素都有一個(gè)層級(jí)的屬性或是概念。如果定位了的相鄰多個(gè)元素，在同一個(gè)位置的話，后面的元素默認(rèn)會(huì)壓住前面的元素。如果同樣是定位了的元素，默認(rèn)他們的層級(jí)都是0，只不過(guò)后面的元素會(huì)壓住前面的元素。如果想讓當(dāng)前的元素顯示在后面的元素之上，這個(gè)時(shí)候就需要改變層級(jí)的關(guān)系,用z-index來(lái)改變。z-index的取值范圍0---9999999，最好是正數(shù)，盡量不要用負(fù)數(shù)。另外要注意，position:relative依舊會(huì)占據(jù)標(biāo)準(zhǔn)流中的位置，會(huì)導(dǎo)致其他內(nèi)容無(wú)法在其層級(jí)上顯示。

透明度opacityOpacity:有兼容性問(wèn)題，而且不但讓背景顏色透明，而且還讓里面的內(nèi)容也透明background: rgba(0,0,0,.3);僅讓背景色透明，內(nèi)容不透明相鄰元素的層級(jí)問(wèn)題淘寶網(wǎng)頁(yè)中鼠標(biāo)移入后邊框閃現(xiàn)效果
XML/HTML Code復(fù)制內(nèi)容到剪貼板
margin-left:-10px; position:relative;/*定位了的元素，默認(rèn)的都會(huì)有層級(jí)的概念，而且默認(rèn)的層級(jí)都是0*/ } div:hover{ border-color:red; position:relative; z-index:1; } /style /head body div /div div /div div /div div /div div /div /body
這樣就可以通過(guò)相鄰元素的層級(jí)問(wèn)題，用hover偽元素來(lái)控制邊框的顏色以及其他屬性，達(dá)到淘寶那樣的效果。以上這篇簡(jiǎn)單html以及css的用法詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.htmlhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：div+css命名規(guī)范大全

下一篇：CSS font_0