亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

<link rel="stylesheet"

表明引入的是css樣式文件

index.html

css

js

img

reset.css初始化瀏覽器文件

• 京東商城首頁樣式改版

自動刷新工具使用方法

1、class="header" & class="content"，頁面頭部&內容區元素構建：

（1）class="xxx-box"：xxx元素區域的容器，如：

? ? class="search-box"：搜索區域；?class="logo-box"：logo區域；class="menu-box"：菜單區域；class="slider-box"：輪播圖區域；class="ad-box"：廣告區域；class="info-box"：信息區域；

（2）class="xxx-bar"：xxx元素欄，如：

? ??class="search-bar"：搜索欄

（3）class="wrapper"：封裝類；通用的，可復用（可寫入#common）

2、注意事項：

使用button標簽時，需要添加button的type，便于各瀏覽器兼容，即：

<button?type="button"></button>

1、頁面構建順序：html，css，js

2、html創建：

（1）頁面容器設置

A、div：容器標簽 <div></div>，div的命名要體現位置、層次、作用

B、頁面div基本層級

class="comtainer"：【comtainer】頁面中最大的容器，包含頁面內所有的元素

? ? class="nav"：導航區；【nav】=navigation 導航

? ? class="header"：頁面頭部，logo，搜索等

? ? class="content"：內容區

（3）class="nav"，導航元素框架搭建

創建無序列表&信息：

????<ul>?
????<li>信息</li>
????</ul>

3、VS-Code快捷鍵：

html元素*數字：快速創建幾對html元素標簽，如：

div*數字

li*數字

1、創建步驟：

（1）VS-Code打開新建的項目文件夾

（2）創建首頁的html頁面

（3）在項目根目錄下，創建三個文件夾：css，js，img

（4）css文件夾內依次創建文件：reset.css，common.css，index.css

（5）css文件引用，順序：

A、reset.css：首先解決不同瀏覽器的兼容性，所以先引用

B、commen.css：定義公共樣式

C、index.css

2、常用命令相關：

（1）新建html頁面快捷命令：html:5

（3）css引用：head內，<link rel="stylesheet" href="css/css文件名">；可直接輸入link+【enter】

3、css文件類型：

（1）# reset.css：【reset】的作用：初始化瀏覽器不同屬性；文件用于解決各瀏覽器的不同屬性

（2）#common.css：頁面的通用文件；解決整個頁面的公共樣式

（3）#index.css：index頁面的獨特的，或頁面級別的樣式文件；除上述外，解決頁面內元素/邏輯級的樣式

瀏覽器會給頁面添加默認樣式，因此需要reset.css初始化樣式

先將內容填入框架，再為內容定義樣式

asfdsf

在cart-btn里 購物車的文字圖標和"我的購物車"字體在用line-height和heigth實現垂直居中時有一個需要注意的地方是即使行高和高度設置了一樣，但字體還是會稍微向下偏移，這是由于文字圖標也是文字的一種，但line-height指的是文字中心到上下邊框的距離，所以可以在文字圖標的樣式中加入 vertical-align:?middle; 實現在水平方向的居中。

使用vscode代碼編輯器的小技巧：

vscode可以快速創建各種標簽，例如div*3快速創建三個div標簽；

當有多個標簽內容相同時，可以按住Alt鍵選中多個標簽進行編輯

實現小豎線可以利用偽類:after來執著具體代碼如下：

.nav-box?ul?li::after{

????content:?"";

????width:?1px;

????height:?14px;

????background:?#cccccc;

????position:?absolute;

????top:?8px;

????right:?0;

????display:?block;

}

去除后面的一個下劃線可以使用:not(last-child)實現：

.nav-box?ul?li:not(:last-child):after{

????content:?"";

????width:?1px;

????height:?14px;

????background:?#cccccc;

????position:?absolute;

????top:?8px;

????right:?0;

????display:?block;

}