練習 三 仿京東 中 html css

2021-09-28 18:10:59 字數 1836 閱讀 1511

本次是仿京東中上部

效果圖:

"#">hi~歡迎逛京東!

"#">登入 | "#">註冊

"#" class="user-info">

"login-b">

"#">新人福利

"#">plus會員

"news">

"news-t">

京東快報

"#">更多"icon-circle-right">

"news-m">

"expand">

css**:

.blue

.orange

.green

.red-orange

/* 中間分類模組 */

.grid

.grid-col1

.grid-col1 ul

.grid-col1 a

.grid-col1 a:hover

.grid-col1 ul li

.grid-col1 ul li:hover

/* banner 部分 */

.grid-col2

/* 輪播圖 */

.grid-col2-l

.circle

.circle li

.circle li:first-child

.arrow-l,.arrow-r

.arrow-l

.arrow-r

.arrow-l:hover,.arrow-r:hover

/* banner 右部分 */

.grid-col2-r

.grid-col2-r div

.grid-col2-r img

/* 右邊部分 */

.grid-col3

.grid-col3 a

.grid-col3 a:hover

/* 登入模組 */

.login

.login-t

.user-info

.login-b a

.login-b a:first-child

.login-b a:last-child

.login-b a:hover

/* 新聞模組 */

.news

.news-t

.news-t h5

.news-t a

.news-m li

.news-m span

/* 擴充套件模組 */

.expand li

.expand span

.expand span:first-child

.expand li:hover span

.expand span:last-child

HTML中table標籤屬性以及練習例項

實現 樣式,在html實現中,可以使用table標籤。邊框屬性 border 背景色屬性或者背景屬性 table內容邊距 cellpadding table單元格之間的距離 cellspacing 佔據的行數 rowspan 佔據的列數 colspan table 的標題 常用的標籤 行標籤,列標籤...

HTML中的三種定位方式

在一般的前端開發中比較常用的定位有三種 相對定位,絕對定位,固定定位。下面簡要的說明一下他們的使用特點 相對定位position relative 1.它可以在四個方向分別或者同時進行偏移 2.定義時它的參照物是父元素 沒有時為瀏覽器本身 3.偏移後元素的原來位置還是被佔著,並沒有空出來 4.當父元...

html中css的三種樣式

在html中定義css樣式的方法有三種,新建css檔案 使用link 關聯 這種是最常用的外部引用樣式,第二種講樣式寫在 head 頭部裡面 這種是頁面樣式 第三中樣式直接寫在行內 style裡面寫入相關的樣式就可以了。第一種 也是最常用的及時外部關聯相關的樣式表,使用關聯樣式,首先 新建乙個css...