HTML+CSS基礎知識個人筆記_7
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_7
- 1. 顯示與隱藏
- 2. 土豆案例
- 3. overflow
- 4. cursor
- 5. 輪廓線和防止檔案域拖拽
- 6. vertical-align
- 7. 溢位文字省略號
- 8. sprite的使用
- 9. 微信滑動門
1. 顯示與隱藏
display 不佔坑
visibility 佔坑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_顯示與隱藏.html</title> <style> div { width: 300px; height: 300px; background-color: pink; /*隱藏, 不佔坑！！！*/ /*display: none;*/ /*顯示,慣用block，inline的話沒有內容還是看不到*/ /*display: block;*/ /*隱藏，佔坑!!!*/ /*visibility: hidden;*/ /*顯示*/ visibility: visible; } p { width: 100px; height: 100px; background-color: purple; } </style> </head> <body> <div></div> <p>123</p> </body> </html>
2. 土豆案例
典型處理a .mask
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_土豆.html</title> <style> * { margin: 0; padding: 0; } a { /*如果不寫寬高和轉換成塊 (inline-block也不行，可以有效果，但是auto不行了,margin:0 auto,適用於塊級元素且有寬)， 撐開是撐開，但是沒有寬高*/ width: 520px; height: 280px; display: block; margin: 100px auto; position: relative; } .mask { width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/icon.png) no-repeat center; position: absolute; top: 0; left: 0; display: none; } a:hover .mask { display: block; } </style> </head> <body> <a href="#"> <img src="images/tb.jpg" /> <div class="mask"></div> </a> </body> </html>
3. overflow
預設，溢位部分顯示
overflow: visible;
溢位部分隱藏，不是刪除
overflow: hidden;
滾動條，不管有沒有超出，都顯示滾動條
overflow: scroll;
在超出的時候，加滾動條，body 和 testarea 預設屬性
overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_土豆.html</title> <style> div { width: 300px; height: 300px; border: 1px solid red; /*預設，溢位部分顯示*/ /*overflow: visible;*/ /*溢位部分隱藏，不是刪除*/ /*overflow: hidden;*/ /*滾動條，不管有沒有超出，都顯示滾動條*/ /*overflow: scroll;*/ /*在超出的時候，加滾動條，body 和 testarea 預設屬性*/ /*overflow: auto;*/ } </style> </head> <body> <div> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> <p>123qwdsfgfnsasvsdvfe</p> </div> </body> </html>
4. cursor
<li style="cursor: default;">我是小白</li>
<li style="cursor: pointer;">我是小手</li>
<li style="cursor: move;">我是移動</li>
<li style="cursor: text;">我是文字</li>
5. 輪廓線和防止檔案域拖拽
/*取消輪廓線*/
outline: none;
/*防止檔案域拖拽*/
resize: none;
6. vertical-align
只針對行內或者行內塊，一般是圖片或表單和文字的對齊，不影響塊級元素
預設基線對齊，就算不加文字，也會有行高，就會有小空隙
解決：換成block或者換成基線對齊以外的對齊方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_vertical-align.html</title>
<style>
div {
border: 2px solid red;
/*line-height: 0;*/
}
/*vertical-align不影響塊級元素，只針對行內或者行內塊，特別是行內塊元素（基本上就是行內快），通常用來控制表單 圖片和文字的對齊*/
/*圖片預設基線對齊，就算不加文字，預設也有行高,如上，行高為0就沒有空隙，但這不是解決方法*/
img {
/*法一，轉換成塊級元素，佔一行，則不會有對齊問題*/
/*display: block;*/
/*法二，改成除了base-line之外的，如top middle bottom對齊*/
/*預設的*/
/*vertical-align: baseline;*/
/*vertical-align: top;*/
/*vertical-align: middle;*/
/*vertical-align: bottom;*/
}
</style>
</head>
<body>
<div>
<img src="images/tb.jpg" alt="">
</div>
</body>
</html>
7. 溢位文字省略號
- 文字一行顯示
- 溢位隱藏
- 文字溢位省略號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_溢位文字省略號.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li {
width: 106px;
height:50px;
border: 1px solid red;
/*white-space可以設定正常文字（亞洲文字和非亞洲文字）顯示方式，預設自動換行*/
/*white-space: normal;*/
/*1. 強制一行顯示*/
white-space: nowrap;
/*以下兩個是針對字母和數字，暫不探討*/
/*https://www.ablanxue.com/prone_9320_1.html*/
/*word-break: break-all;*/
/*word-wrap: break-word;*/
/*2. 溢位隱藏*/
overflow: hidden;
/*3. 文字溢位部分用省略號代替, 要和overflow：hidden搭配使用！*/
text-overflow: ellipsis;
/*預設*/
/*text-overflow: clip;*/
/*要實現溢位省略號顯示，以上三步皆要滿足
1. 一行顯示
2. 溢位隱藏
3. 溢位省略號*/
}
</style>
</head>
<body>
<!-- <ul> -->
<li>文字顯示方式，預設自動換行文字顯示方式，預設自動換行文字顯示方式，預設自動換行</li>
<!-- <li>sdafsvbdhfsdjsfshvbjdsihvbscshi</li> -->
<!-- </ul> -->
</body>
</html>
8. sprite的使用
本質，是為了減少對伺服器的請求次數
形式，將多張小 背景 圖片合成一張大圖片
使用，計算好background-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_精靈圖使用.html</title>
<style>
h3 {
width: 22px;
height: 23px;
/*精靈圖是為了減少對伺服器的請求，提高訪問速度
一般是把多張小的 背景 圖片，合成一張大圖片使用*/
/*取負值*/
background: url(images/wzry.png) no-repeat -1px -107px;
}
span {
display: inline-block;
background: url(images/wzry.png) no-repeat;
}
.one {
width: 22px;
height: 25px;
background-position: -1px -144px;
}
.two {
width: 23px;
height: 23px;
background-position: -2px -186px;
}
</style>
</head>
<body>
<h3></h3>
<span class="one"></span>
<span class="two"></span>
</body>
</html>
9. 微信滑動門
要理解透徹
a套span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_微信滑動門.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: url(images/wx-nav.jpg) repeat-x;
}
/*1. 左側圓角放a,不可指定寬度！*/
.nav a {
height: 33px;
display: inline-block;
background: url(images/wx-tu.png);
text-decoration: none;
line-height: 33px;
color: #FFF;
font-weight: 700;
padding-left: 15px;
}
/*2. 右側圓角放span，不可指定寬度！*/
.nav span {
height: 33px;
display: inline-block;
background: url(images/wx-tu.png) right;
padding-right: 15px;
}
/*.nav a:hover { 滑鼠經過a的時候，a的背景圖改變
background-image: url(images/wx-ou.png);
}
.nav a:hover span { 滑鼠經過a的時候，a裡面的span背景圖改變
background-image: url(images/wx-ou.png);*/
.nav a:hover,
.nav a:hover span {
/*background: url(images/wx-ou.png); 如此就會出錯！！！因為預設沒有指定時，是repeat left top*/
background-image: url(images/wx-ou.png);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
<span>首頁</span>
</a>
<a href="#">
<span>使用指南</span>
</a>
<a href="#">
<span>微信小程式</span>
</a>
</li>
</ul>
</body>
</html>