我將利用三天的時間來完成制作京東首頁的靜態(tài)頁面效果，其中包含的內(nèi)容有html以及css。
1、在開發(fā)進(jìn)行之前，首先要配置開發(fā)環(huán)境：我們需要安裝sublime webstorm vscode Hbuilder atom等開發(fā)軟件，選擇其一即可。我所使用的是webstorm。
2、在主文件夾中建立相關(guān)的項目文件夾 ：為了將與項目相關(guān)的文件放在一塊，便于管理和以后的維護(hù)。
其中：包括與項目相關(guān)的一些文件
主頁或是首頁 index.html default.html
Css文件夾 css文件的
Base.css global.css
Images文件夾 用來放置網(wǎng)站中的所有的圖片
Js文件
音頻或是視頻文件
3、在這之后我們要進(jìn)行樣式初始化，一般所有網(wǎng)站開發(fā)之前都會進(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;
- }
-
- /*去掉原樣式中的小黑點*/
- 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;
- }
-
- /*防止拖動*/
- 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 {
- /*清除浮動，最好最標(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ā)人員對各個標(biāo)簽的樣式的初始化以及公共類的重用。
4、分析網(wǎng)站結(jié)構(gòu)
做網(wǎng)站的時候也有一個規(guī)范或是通例
布局的順序一般是從上到下，從左到右
在寫頁面的時候，一般考慮使用標(biāo)準(zhǔn)流的元素，其次才使用浮動或是定位。
就在標(biāo)準(zhǔn)流元素當(dāng)中，寬高是最穩(wěn)定的，其實才使用padding,最后或者可以使用margin.
我們網(wǎng)站結(jié)構(gòu)中的任何標(biāo)簽 都可以看成是一個盒模型，都可以設(shè)置寬高，只是有的元素設(shè)置了寬高之后，不起作用。
要想讓行內(nèi)元素的寬高起作用：
1. 將行內(nèi)元素轉(zhuǎn)換成塊級元素或是行內(nèi)塊元素
2. 浮動 脫標(biāo)
3. 定位 脫標(biāo)
在布局行內(nèi)塊元素時，行內(nèi)塊元素之間有默認(rèn)的幾像素的間距。這幾像素的間距只能用浮動來清除。
定位有四種：
Fixed absolute relative static
一般我們在分析網(wǎng)站結(jié)構(gòu)時，使用火狐瀏覽器可以將這個網(wǎng)頁截圖之后保存下來：
然后我們可以使用fireworks來提取網(wǎng)站中的具體內(nèi)容的寬高、顏色等。
Fw的常用快捷鍵：
I 滴管工具 吸取顏色
K 切片工具 量取元素的寬度
Z 放大鏡工具
V 移動
A 指針工具
常用的復(fù)合屬性：
Background
mso-char-indent-count:3.4900;">浮動的原因就是因為父盒子沒有高度，原來的高度是靠標(biāo)準(zhǔn)流中的子元素?fù)纹饋恚亲釉馗恿酥?，脫離標(biāo)準(zhǔn)流了，造成父級元素的高度為0;
1.給父盒子設(shè)置一個高度
2.Clear: both
3.Overflow: hidden 觸發(fā)了BFC模式 也可以用來清除浮動
4.偽元素或是雙偽元素清除法
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- .clearfix:before, .clearfix:after {
- /*清除浮動，最好最標(biāo)準(zhǔn)的寫法*/
- content: "";
- display: table;
- }
-
- .clearfix:after {
- clear: both;
- }
-
- .clearfix {
- *zoom: 1; /*IE/7/6*/ /*兼容IE6下的寫法*/
- }
-
（一般常用偽元素的方法來清除浮動）
定位元素的層級問題：
如果只給一個元素絕對定位，而不寫trbl值的話，會以原位顯示
定位(相對和絕對或固定)的元素都有一個層級的屬性或是概念。如果定位了的相鄰多個元素，在同一個位置的話，后面的元素默認(rèn)會壓住前面的元素。如果同樣是定位了的元素，默認(rèn)他們的層級都是0，只不過后面的元素會壓住前面的元素。如果想讓當(dāng)前的元素顯示在后面的元素之上，這個時候就需要改變層級的關(guān)系,用z-index來改變。
z-index的取值范圍0---9999999，最好是正數(shù)，盡量不要用負(fù)數(shù)。
另外要注意，position:relative依舊會占據(jù)標(biāo)準(zhǔn)流中的位置，會導(dǎo)致其他內(nèi)容無法在其層級上顯示。
透明度opacity
Opacity:有兼容性問題，而且不但讓背景顏色透明，而且還讓里面的內(nèi)容也透明
background: rgba(0,0,0,.3);
僅讓背景色透明，內(nèi)容不透明
相鄰元素的層級問題
淘寶網(wǎng)頁中鼠標(biāo)移入后邊框閃現(xiàn)效果
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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)的都會有層級的概念，而且默認(rèn)的層級都是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>
-
這樣就可以通過相鄰元素的層級問題，用hover偽元素來控制邊框的顏色以及其他屬性，達(dá)到淘寶那樣的效果。
以上這篇簡單html以及css的用法詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html
