css頁面布局和重置樣式

2021-09-29 20:33:39 字數 1388 閱讀 2711

標題欄        

導航欄

內容區

/* 

*common.css:通用樣式

*//* 螢幕寬度在340px至410px時,基準尺寸使用20px */

html

/* 螢幕寬度小於340px時,基準尺寸使用18px */

@media (max-width: 340px)

}/* 螢幕寬度大於410px時,基準尺寸使用22px */

@media (min-width: 410px)

}/* body預設樣式 */

body

/**彈性布局類**/

.fixed

.position_lr_0

.position_tb_0

/**居中定位**/

.position_center

/* 

*reset.css:重置樣式檔案

*//* 1.去掉所有元素的內外邊距 */

html, body, div, span,

h1, h2, h3, h4, h5, h6, p, pre,

a, img, ul, li, form, label, input,

table, tbody, tfoot, thead, tr, th, td,

audio, video

/* 2.統一全域性字型 */

body

/* 3.列表元素去掉預設的列表樣式 */

ol, ul

/* 4.table元素的邊框摺疊 */

table

/* 5.去掉預設的下劃線 */

a/* 6去掉input自帶的邊緣效果和背景顏色 */

input

/* index.css引入重置樣式和通用樣式以及字型圖示 */

@import './reset.css';

@import './common.css';

如頭部導航的開發,實現左 中 右的布局:

返回

我是標題

底部導航的開發:

首頁    

分類

發現

我的

css樣式重置

作為一名切圖仔,經常會遇到頭疼的各大瀏覽器相容性問題,確切的說是相容它們 預設 的css樣式表。重置樣式成為我們為我們的網頁梳妝打扮的第一步,也是關鍵性的一步。以前我這樣重置樣式 body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,u...

css樣式重置

1.缺點 稍微影響效能 優點 不用考慮哪些標籤有預設樣式ula 取消連線下劃線 img問題現象 內容跟容器底部出現縫隙 內聯元素的對齊方式是按照文字基線對齊的,而不是文字底線對齊的 2.寫具體頁面的時候或乙個布局效果的時候 1.寫結構 2.css重置樣式 3.寫具體樣式 3.浮動 概念 脫離文件流,...

CSS 樣式重置 公共樣式

我的部落格地圖 作為前端工程師,需要不斷的去總結和積累有共性的 這對於開發來說事半功倍。在書寫樣式檔案時,公共樣式和樣式重置 樣式初始化 每次都會用到。1 公共樣式 按鈕公共樣式 btn btn primary btn primaryact btn danger btn warning btn s ...