Day8:html和css
Day8:
html和css
顯示和隱藏:
display: none 為 無，隱藏元素
display: block 為 顯示元素 轉換為塊級元素
visibility: visible 顯示
visibility: hidden 隱藏
dis和vis的區別:
dispaly 不佔位置
visibility 站位置
overflow:
hidden 溢位的部分隱藏掉
visible 顯示
auto 自動 超出的就顯示滾動條,不超出不顯示
scroll 總是顯示滾動條
使用者介面:
cursor滑鼠樣式
default 小白
text 文字
move 移動
pointer
輪廓線:
outline: 0 或者為 none;
防止文字域拖拽:
resize: none;
vertical-align: 和行內塊使用
溢位文字部分顯示省略號
white-space: nowrap 文字一行顯示
溢位部分隱藏: overflow: hidden
text-overflow: ellipsis 超出部分以省略號顯示
字型圖示
iconfont
icomoon字型檔
http://www.iconfont.cn/
阿里
icon font字型檔
fontello
http://fontello.com/
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
字型圖示
- 設計字型圖示
- 上次生產字型包
- 下載相容字型包
- 字型引入到
html
// fonts
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
span {
font-family: "icomoon";
}
span: before {
content: "\e900";
}// 字型下載目錄 demo-filles fonts demo.html ReadMe.txt selection.json style.css
上傳生成字型包
http://icomoom.io
http://www.iconfont.cn/
http://www.iconfont.cn/https://www.xxx.com/favicon.ico<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>// 對瀏覽器
<link rel="stylesheet" href="css/normalize.css"/>
// 對頭部和底部樣式
<link rel="stylesheet" href="css/base.css"/>
// 首頁
<link rel="stylesheet" href="css/index.css"/>我是文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
body {
line-height: 1.5;
}
div {
font-size: 16px;
}
</style>
</head>
<body>
<div>
我是文字
</div>
</body>
</html>行高不帶單位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
body {
line-height: 1.5;
}
div {
font-size: 16px;
}
</style>
</head>
<body>
<div>行高不帶單位</div>
</body>
</html>複習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<a href="#">
<span>首頁</span>
</a>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>元素的定位屬性
| 邊偏移屬性 | 描述 |
|---|---|
top |
頂端偏移量，定義元素相對於其父元素上邊線的距離 |
bottom |
底部偏移量，定義元素相對於其父元素下邊線的距離 |
left |
左側偏移量，定義元素相對於其父元素左邊線的距離 |
right |
右側偏移量，定義元素相對於其父元素右邊線的距離 |
position屬性的常用值
| 值 | 描述 |
|---|---|
static |
自動定位 |
relative |
相對定位 |
absolute |
絕對定位 |
fixed |
固定定位 |
靜態定位唯一的用處：
就是 取消定位。
position: static;疊放次序（z-index）
元素的顯示與隱藏
display visibility 和 overflow
display 顯示
display 設定或檢索物件是否及如何顯示。
visibility 可見性
設定或檢索是否顯示物件。
overflow 溢位
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
visible : 不剪下內容也不新增滾動條。
auto : 超出自動顯示滾動條，不超出不顯示滾動條
hidden : 不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll : 不管超出內容否，總是顯示滾動條滑鼠樣式cursor
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文字</li>
</ul>輪廓 outline
outline : outline-color ||outline-style || outline-width 防止拖拽文字域resize
<textarea style="resize: none;"></textarea>vertical-align 垂直對齊
vertical-align : baseline |top |middle |bottom white-space
white-space設定或檢索物件內文字顯示方式text-overflow 文字溢位
text-overflow : clip | ellipsis
clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（...）經典佈局
<li>
<a href="#">
<span>導航欄內容</span>
</a>
</li>上傳生成字型包
推薦網站： http://icomoon.io
阿里icon font字型檔
http://www.iconfont.cn/
http://fontello.com/
http://fortawesome.github.io/Font-Awesome/
http://glyphicons.com/
https://icons8.com/目錄說明
| 名稱 | 說明 |
|---|---|
| css | 用於存放CSS檔案 |
| images | 用於存放圖片 |
| index | 京東首頁 HTML |
| js | 用於後期存放javascript檔案 |
引入ico圖示
<img src="media/ico.png" style="border: 1px dashed #ccc; padding:3px;" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 網頁title 標題
Description 網站說明
Keywords 關鍵字
如果看了覺得不錯
點贊！轉發！
達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊