簡(jiǎn)單html以及css的用法詳解
我將利用三天的時(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.html
Css文件夾 css文件的
Base.css global.css
Images文件夾 用來(lái)放置網(wǎng)站中的所有的圖片
Js文件
音頻或是視頻文件
3、在這之后我們要進(jìn)行樣式初始化,一般所有網(wǎng)站開發(fā)之前都會(huì)進(jìn)行樣式初始化,例如淘寶、京東這樣的大網(wǎng)站,都有自己的樣式初始化css文件。如:
- 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: 0 auto;
- }
- .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ù)合屬性:
Background
mso-char-indent-count:3.4900;">浮動(dòng)的原因就是因?yàn)楦负凶記]有高度,原來(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.偽元素或是雙偽元素清除法
- .clearfix:before, .clearfix:after {
- /*清除浮動(dòng),最好最標(biāo)準(zhǔn)的寫法*/
- content: "";
- display: table;
- }
- .clearfix:after {
- clear: both;
- }
- .clearfix {
- *zoom: 1; /*IE/7/6*/ /*兼容IE6下的寫法*/
- }
(一般常用偽元素的方法來(lái)清除浮動(dòng))
定位元素的層級(jí)問題:
如果只給一個(gè)元素絕對(duì)定位,而不寫trbl值的話,會(huì)以原位顯示
定位(相對(duì)和絕對(duì)或固定)的元素都有一個(gè)層級(jí)的屬性或是概念。如果定位了的相鄰多個(gè)元素,在同一個(gè)位置的話,后面的元素默認(rèn)會(huì)壓住前面的元素。如果同樣是定位了的元素,默認(rèn)他們的層級(jí)都是0,只不過后面的元素會(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í)上顯示。
透明度opacity
Opacity:有兼容性問題,而且不但讓背景顏色透明,而且還讓里面的內(nèi)容也透明
background: rgba(0,0,0,.3);
僅讓背景色透明,內(nèi)容不透明
相鄰元素的層級(jí)問題
淘寶網(wǎng)頁(yè)中鼠標(biāo)移入后邊框閃現(xiàn)效果
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- div {
- width: 200px;
- height: 500px;
- border: 10px solid blue;
- float: left;
- /*margin-right: 10px;*/
- 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>
這樣就可以通過相鄰元素的層級(jí)問題,用hover偽元素來(lái)控制邊框的顏色以及其他屬性,達(dá)到淘寶那樣的效果。
以上這篇簡(jiǎn)單html以及css的用法詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持我們。
原文地址:http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html
上一篇:HTML用正則表達(dá)式檢驗(yàn)表格的實(shí)例代碼
欄 目:CSS/HTML
下一篇:HTML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例
本文標(biāo)題:簡(jiǎn)單html以及css的用法詳解
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9606.html
您可能感興趣的文章
- 04-02好看的字體樣式css,好看的字體樣式圖片
- 04-02html中加入css樣式的簡(jiǎn)單介紹
- 01-10通過html為FLASH加鏈接的實(shí)現(xiàn)代碼(div層)
- 01-10IE瀏覽器HTML Hack標(biāo)簽總結(jié)
- 01-10html用style添加屬性示例
- 01-10HTML中rel屬性分析
- 01-10HTML元素設(shè)置焦點(diǎn)的方法
- 01-10在html文件里include文件內(nèi)容的方法小結(jié)
- 01-10常用HTML meta 標(biāo)簽屬性(網(wǎng)站兼容與優(yōu)化需要)
- 01-10用HTML和CSS打造屬于自己的暖男“大白”


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁(yè)樣式css,分頁(yè)樣式j(luò)q
- 04-02分頁(yè)樣式css,分頁(yè)樣式欄里用來(lái)定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動(dòng)條樣式,css滾動(dòng)條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁(yè)引入css樣
- 04-02html中加入css樣式的簡(jiǎn)單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機(jī)閱讀
- 08-05織夢(mèng)dedecms首頁(yè)調(diào)用縮略圖為背景
- 08-05DEDECMS點(diǎn)擊主欄目默認(rèn)顯示第一個(gè)子欄
- 01-10bat批處理徹底隱藏文件的方法(使用
- 01-10vue實(shí)現(xiàn)分頁(yè)加載效果
- 08-05dedecms織夢(mèng)模板全站調(diào)用收藏?cái)?shù)的方法
- 01-10C++實(shí)現(xiàn)將數(shù)組中的值反轉(zhuǎn)
- 01-10C++ 類訪問控制的條件總結(jié)
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 08-05dedecms織夢(mèng)模板編輯文檔的同時(shí)自動(dòng)更
- 01-10C語(yǔ)言打印楊輝三角示例匯總