我們的網頁都應該放到乙個資料夾內。 站點-本地站點
專案資料夾
1 .首頁 index.html1.4.2 css初始化2 .樣式 css資料夾 css檔案 相同樣式 (全域性樣式 公共樣式) base.css(基本樣式) global.css (全域性樣式)
3. images 檔案
4.特效 js資料夾 js 檔案
@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 刪除線正常流 normal flowi 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
浮動定位脫標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 s
p 不能放 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...