css初學者第四天

<1>snipaste工具的使用

snipaste是一個簡單但強大的截圖工具，也可以讓你將截圖貼回屏幕上。

常用的快捷方式：

1、F1可以截圖，同時測量大小，設置箭頭書寫文字等

2、F3在桌面置頂顯示

3、點擊圖片，alt可以取色（按shift可以切換取色模式）

4、按下esc可以取消圖片顯示

簡潔版小米側邊欄案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: auto;background-color:rgb(61, 60, 60);}a {text-decoration: none;font-size: 14px;line-height: 30px;color: white;display: block;margin: 0  auto; padding: 0 20px;}a:hover {background-color: orange;}</style>
</head>
<body><div><a href="#">手機 電話卡</a><a href="#">電視 盒子</a><a href="#">筆記本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 兒童</a><a href="#">耳機 音響</a></div>
</body>
</html>

效果圖：

<2>css背景

通過css背景屬性，可以給頁面元素添加背景樣式。

背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。

2.1 背景顏色

background-color屬性定義了元素的背景顏色，默認情況下是透明色。

2.2 背景圖片

background-image屬性描述了元素的背景圖像。實際開發常見于logo或者一些裝飾性的小圖片或者是超大的背景圖片，優點是非常便于控制位置（精靈圖也是一種運用場景）

background-image ： none | url(url)

2.3 背景平鋪

如果需要再html頁面上對背景圖像進行平鋪，可以使用background-repeat屬性。

background-repeat : repeat: repeat | no-repeat | repeat-x | repeat-y

2.4 背景圖片位置

利用background-position屬性可以改變圖片在背景中的位置。

background-position: x y;

參數代表的意思是：x坐標和y坐標。可以用方位名詞或者精確單位。

參數值	說明
length	百分數 \| 由浮點數字和單位標識符組成的長度值
position	top \| center \| bottom \| left \| center \| right 方位名詞

2.4.1 參數是方位名詞

-如果指定的兩個值都是方位名詞，則兩個值前后順序無關，比如 left top 和 top left效果一致

-如果只指定了一個方位名詞，另一個值省略，則第二個值默認居中對齊

2.4.2 參數是精確單位

-如果參數值是精確坐標，那么第一個肯定是x坐標，第二個一定是y坐標

-如果只指定一個數值，那該數值一定是x坐標，另一個默認垂直居中

2.4.3 參數是混合單位

-如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是x坐標，第二個值是y坐標

如：

background-position: 20px center;

? 2.5 背景圖像固定（背景附著）

background-attachment屬性設置背景圖像是否固定或者隨頁面的其余部分滾動

background-attachment后期可以制作視覺滾動的效果。

參數	作用
scroll	背景圖像是隨對象內容滾動
fixed	背景圖像固定

2.6 背景屬性

為了簡化背景屬性的代碼，我們可以將這些屬性合并簡寫在同一個屬性background中，當使用簡寫屬性時，沒有特定的書寫順序，一般習慣約定順序為：

background：背景顏色背景圖片地址背景平鋪背景圖像滾動背景圖片位置

如：

background:black url(images/bg.jpg) no-repeat fixed center top;

2.7 背景半透明

語法：

background: rgba(0,0,0,0.3);

最后一個參數的alpha透明度，取值范圍在0~1之間

我們習慣把0.3的0省略掉，寫為background:rgba(0,0,0,.3);

注意：背景半透明是指盒子北京半透明，盒子里面的內容不受影響

五彩導航案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {display: inline;width: 600px;height: 100px;}.red {/* 背景圖片設置 */background-image: url('images/氣泡.jpg');background-color: #d3525e;background-blend-mode: soft-light;/* 改用柔光混合模式 */background-repeat: no-repeat;background-size: 100% 100%;/* 圖片完全覆蓋元素 */background-position: center;/* 圖片居中對齊 *//* 元素尺寸設置 */width: 80px;height: 56px;/* 文字樣式設置 */color: white;font-size: 10px;line-height: 56px;/* 行高等于容器高度實現垂直居中 */text-align: center;display: inline-block;transform: translateY(-2px);/* 微調文字位置 */}.blue {background-image: url('images/氣泡.jpg');background-color: #369ec8;background-blend-mode: soft-light;background-repeat: no-repeat;background-size: 100% 100%;background-position: center;width: 80px;height: 56px;color: white;font-size: 10px;line-height: 56px;text-align: center;display: inline-block;transform: translateY(-2px);}.purple {background-image: url('images/氣泡.jpg');background-color: #8150ca;background-blend-mode: soft-light;background-repeat: no-repeat;background-size: 100% 100%;background-position: center;width: 80px;height: 56px;color: white;font-size: 10px;line-height: 56px;text-align: center;display: inline-block;transform: translateY(-2px);}.pink {background-image: url('images/氣泡.jpg');background-color: #c154c8;background-blend-mode: soft-light;background-repeat: no-repeat;background-size: 100% 100%;background-position: center;width: 80px;height: 56px;color: white;font-size: 10px;line-height: 56px;text-align: center;display: inline-block;transform: translateY(-2px);}/* 添加鼠標懸停效果 */span:hover {background-blend-mode: multiply;/* 懸停時改變混合模式 */cursor: pointer;/* 顯示手型光標 */}</style>
</head><body><div><span class="red">五彩導航</span><span class="blue">五彩導航</span><span class="purple">五彩導航</span><span class="pink">五彩導航</span></div>
</body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/95035.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/95035.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/95035.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！