我將利用三天的時間來完成制作京東首頁的靜態(tài)頁面效果，其中包含的內(nèi)容有html以及css。
1、在開發(fā)進行之前，首先要配置開發(fā)環(huán)境：我們需要安裝sublime webstorm vscode Hbuilder atom等開發(fā)軟件，選擇其一即可。我所使用的是webstorm。
2、在主文件夾中建立相關的項目文件夾 ：為了將與項目相關的文件放在一塊，便于管理和以后的維護。
其中：包括與項目相關的一些文件
主頁或是首頁 index.html default.html
Css文件夾 css文件的
Base.css global.css
Images文件夾 用來放置網(wǎng)站中的所有的圖片
Js文件
音頻或是視頻文件
3、在這之后我們要進行樣式初始化，一般所有網(wǎng)站開發(fā)之前都會進行樣式初始化，例如淘寶、京東這樣的大網(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;
- }
- /*去掉原樣式中的小黑點*/
- 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; /* 去掉圖片底部默認的3像素空白縫隙*/
- }
- table {
- border-collapse: collapse; /*合并外連線*/
- }
- body {
- font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的寫法，宋體的寫法*/
- color: #666; /*150%基于當前字體尺寸的百分比行間距*/
- background: #fff;
- }
- .clearfix:before, .clearfix:after {
- /*清除浮動，最好最標準的寫法*/
- 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ā)人員對各個標簽的樣式的初始化以及公共類的重用。
4、分析網(wǎng)站結(jié)構(gòu)
做網(wǎng)站的時候也有一個規(guī)范或是通例
布局的順序一般是從上到下，從左到右
在寫頁面的時候，一般考慮使用標準流的元素，其次才使用浮動或是定位。
就在標準流元素當中，寬高是最穩(wěn)定的，其實才使用padding,最后或者可以使用margin.
我們網(wǎng)站結(jié)構(gòu)中的任何標簽 都可以看成是一個盒模型，都可以設置寬高，只是有的元素設置了寬高之后，不起作用。
要想讓行內(nèi)元素的寬高起作用：
1. 將行內(nèi)元素轉(zhuǎn)換成塊級元素或是行內(nèi)塊元素
2. 浮動 脫標
3. 定位 脫標
在布局行內(nèi)塊元素時，行內(nèi)塊元素之間有默認的幾像素的間距。這幾像素的間距只能用浮動來清除。
定位有四種：
Fixed absolute relative static
一般我們在分析網(wǎng)站結(jié)構(gòu)時，使用火狐瀏覽器可以將這個網(wǎng)頁截圖之后保存下來：
然后我們可以使用fireworks來提取網(wǎng)站中的具體內(nèi)容的寬高、顏色等。
Fw的常用快捷鍵：
I 滴管工具 吸取顏色
K 切片工具 量取元素的寬度
Z 放大鏡工具
V 移動
A 指針工具
常用的復合屬性：
Background