CSS實戰(製作京東簡易首頁)

2021-08-08 09:29:37 字數 3534 閱讀 3623

我們的網頁都應該放到乙個資料夾內。 站點-本地站點

專案資料夾

1 .首頁 index.html

2 .樣式 css資料夾 css檔案 相同樣式 (全域性樣式 公共樣式) base.css(基本樣式) global.css (全域性樣式)

3. images 檔案

4.特效 js資料夾 js 檔案

1.4.2 css初始化

@charset

"utf-8"

;/*css 初始化 */

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img

fieldset, img,input,button

ul, ol

input

select, input

select, input, textarea

textarea

/*防止拖動*/

img /* 去掉低測預設的3畫素空白縫隙*/

table

body

.clearfix

:before,.clearfix

:after

.clearfix

:after

.clearfixaa

:hover

h1,h2,h3,h4,h5,h6

s,i,em

.col-red

/*公共類*/

.w.fl

.fr.al

.ac.ar

.hide

rel="stylesheet"

href="css/base.css" />

rel="stylesheet"

href="css/index.css" />

網頁顯示的圖示

行內式 css

aa

內嵌式樣式

.one

style>

外鏈式

font 字型綜合寫

font: 字型加粗 字型大小/行高 字型;必須有字型大小和字型。

font-weight:bold; 700

s del 刪除線

i em 傾斜

u ins 下劃線

字型加粗 font-weight: 700;

讓字型不加粗: font-weight:normal;

字型傾斜: font-style:italic; 不用

字型不傾斜: font-style:normal;

沒有下劃線 沒有刪除線: text-decoration: none;

定位: position:static; 靜態定位 約等於標準流

浮動的不浮動: float:none; none left right

定位的不定位: position: static; absolute relative fixed

權重–標籤 1 類 10 id 100 行內 1000

網頁穩定:

width 和height 最穩定

其次padding

最後才考慮margin

正常流 normal flow

浮動定位脫標out of flow

浮動目的:

可以讓多個塊級元素放到一行上。

float: left right none;

清除浮動: 根據情況需要來清楚浮動 。

清除浮動的目的: 就是為了解決 父 盒子高度為0 的問題。

清除浮動:

1. 額外標籤法

2. overflow: hidden 觸發 bfc 模式 就不用清楚浮動

3. 偽元素

.clearfix

:after

.clearfix

清除浮動: 真正的叫法閉合浮動

4. 雙偽元素

.clearfix

:before,.clearfix

:after

.clearfix

:after

.clearfix

cursor

: pointer 滑鼠變成小手

cursor: default; 小白

cursor

: move; 移動

cursor

: text ; 文字輸入

網頁布局:

給乙個盒子 : 寬度高度 背景邊框 位置

圓角矩形

border-radius: 7px 7px 7px 0;

border-radius: 左上 右上 右下 左下; 順時針

塊級元素 — 任何元素可以的。

行內元素 – 行內元素 只 巢狀元素b u span i sp 不能放 div 。

a 無所不能 。a裡面不能放 a input 等只有 定位的盒子 (除了static) 才有 z-index

如果都是定位 絕對定位 他們預設的z-index 是 0

最後的乙個靠上

lang="en">

charset="utf-8">

title>

/* .test

.test:hover */

.test

.test

:hover

style>

head>

class="test">

div>

class="test">

div>

class="test">

div>

class="test">

div>

class="test">

div>

body>

html>

css3

background: rgba(0,0,0,0.5);

opacity: 0.5; 讓盒子半透明 裡面的內容也半透明

CSS流式布局 仿京東

個人自學demo。效果圖 總結 1 流式布局 寬度使用百分比。2 預設樣式 body 點選高亮我們需要清除清除 設定為transparent 完成透明 在移動端瀏覽器預設的外觀在ios上加上這個屬性才能給按鈕和輸入框自定義樣式 禁用長按頁面時的彈出選單 img,a a ul 底部有空隙 浮動引起的 ...

CSS實戰應用

1 使用場景 為了可以減少客戶端對伺服器的請求,所以會把很多整合於乙個之上,稱為css sprites技術 css精靈 雪碧 那麼如何從整合後的中顯示我們需要的便可以採用clip樣式。css精靈 優點 減少客戶端對伺服器的請求,提高效能 減少位元組數,多個整合入1張圖的位元組數小於每個位元組數之和 ...

RPM包製作與實戰

1 安裝rpm軟體 yum install rpm build 2 建立目錄結構 mkdir usr src redhat p usr src redhat sources 存放源 補丁等檔案 usr src redhat specs 存放用於管理rpm製作程序的spec檔案 usr src red...