前端基礎學習筆記 滑鼠樣式cursor與盒陰影box-shadow
滑鼠樣式屬性
div{
cursor:default;
}
如上程式碼可設定滑鼠劃入div盒子時的滑鼠樣式,滑鼠樣式有以下屬性值:
- default 箭頭
- pointer 小手
- wait 等待
- text 文字
- move 可移動
- auto 瀏覽器根據情況來給
引入外部滑鼠樣式,為了防止使用者找不到指定路徑檔案,所以需要在路徑之後設定一個備胎。
div{ cursor:url("cursor/move.cur"),pointer; }
box-shadow
按照順序,第幾個值代表什麼意思:還可以疊加多個陰影,用逗號隔開。
- h-shadow:x軸偏移量
- v-shadow:y軸偏移量
- blur:模糊半徑
- spread:模糊大小
- color:顏色
- inset:內建陰影 outset:外接陰影
相關推薦
前端基礎學習筆記 滑鼠樣式cursor與盒陰影box-shadow
滑鼠樣式屬性 div{ cursor:default; } 如上程式碼可設定滑鼠劃入div盒子時的滑鼠樣式,滑鼠樣式有以下屬性值: default 箭頭 pointer 小手 wait 等待 text &n
前端基礎學習筆記 浮動 清除浮動 怪異盒模型
文件流 文件流為元素沒有改變特性時原本所要排列的位置和規則: 文件流為最底層 塊級 獨佔一行等在最底層排列,依次往下排列。 給上浮動之後,會把元素堆積起來,不佔文件流的位置。 浮動 可以讓元素脫離文件流。 浮動元素 浮動元素在文件流內不佔位置,後面的文件流元素,就會佔住浮動元
前端基礎學習筆記 字型文字樣式和特殊符號
字型樣式 字型顏色 color 字型風格 font-family span{ font-family:'微軟雅黑','宋體'; } 引入外部字型 @font-face{ font-family:"名稱"; src:url(' '); } 字型大小 font-size div
前端基礎學習筆記 樣式初始化 元素型別
樣式初始化 就是把預設樣式中的margin和padding取消、改變列表list-style、text-decoration文字裝飾、圖片邊框 <body> <style> *{margin:0;padding:0} ul,ol
前端基礎學習筆記 hover border-radius
hover 滑鼠移入元素時 偽類 style: div{ width:200px; height:200px; background-color:pink; } 滑鼠移入效果: div:hover{ background-color:red;
前端基礎學習筆記 圖片和元素的居中對齊
圖片對齊 首先看文字居中方式: 上下居中:給文字一個line-height,最好和文字盒子大小相同。 左右居中:給文字一個text-align:center; 考慮到文字與圖片對齊用到基線對齊,所以圖片在盒子裡居中的方式為: text-align和line-height放在父級元
前端基礎學習筆記 盒模型
邊框線border border 邊框:元素邊框的樣式 單樣式: border-width 大小 border-style 樣式 border-color 顏色 複合樣式:大小 型別 顏色 border :width style color 邊
前端基礎學習筆記 企業命名規範
網頁內容類 標題: title 摘要: summary 箭頭: arrow 商標: label 網站標誌: logo 轉角/圓角: corner 橫幅廣告: banner 子選單: subMenu 搜尋: search 搜尋框: searchBox 登入: login 登入條:loginbar
前端基礎學習筆記 CSS選擇器
選擇器 標籤選擇器 通過標籤名字選擇 id選擇器 通過id名字選擇標籤,id名唯一。 命名規則: 1、見名知意,看到名字就知道這個標籤的一個作用。 2、不能用拼音,不要用中文,也不能數字開頭,也不要用特殊符號。 3、建議英文小寫開頭。 4、-符號連詞 _(不建議使
前端基礎學習筆記 表格
表格 在 CSS 建立之前, HTML <table> 元素常常被用於佈局頁面。 這種用法在 HTML 4之後不被推薦使用,並且 <table>元素 不應該 被用於此目的。 <table> <tr> <td>
前端基礎學習筆記 過渡、動畫和變換
過渡 transition 讓屬性變化成為一個持續一段時間的過程,而不是立即生效的 可能的屬性: 執行變換的屬性: transition-property, 變換延續的時間: transition-duration, 過渡延遲的時間:transition-del
前端基礎學習筆記 表單
定義 定義了一個區域,可以和使用者互動的區域,也可以用來向web伺服器提交資訊,一般用來做登陸註冊搜尋的功能。 form表單的屬性: action :一個處理這個form資訊的程式所在的URL 規定向何處傳送表單 (接受資料的地址) method
前端基礎學習筆記 選擇器(高階)
組合選擇器的優先順序 比較優先順序時,保證精準控制到了元素 比較id選擇器,如果id多,那優先順序高 id選擇器一樣多時,比較class選擇器,class多的則優先順序高 class如果相等,比較標籤選擇器,標籤選擇器多則優先順序高 偽類選擇器,如hover,優先順
前端基礎學習筆記 定位
相對定位 CSS position屬性用於指定一個元素在文件中的定位方式。 top , right , bottom 和 left 屬性則決定了該元素的最終位置。 如下:未定位前的位置在定位後的位置左面50px。 .box1{
前端基礎學習筆記 彈性盒子模型
基本彈性盒模型演示 div{ display:flex; width:600px; border:1px solid red; } p{ height:200px; border:1px solid blue; } 任何元素都可以設定display:f
前端基礎學習筆記 背景 漸變 倒影 遮罩
背景 background-size: X Y;改變背景圖片的大小 具體的值px 百分比 相對於元素框 cover 保持寬高比不變,等比例放大縮小,圖片四條邊軸都鋪滿盒子 contain 同上,上面的區別是水平或
web前端開發學習筆記-04-表單與表單元素
原課程在這裡:https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce 表單與表單元素 表單:是一個區域,採集使用者資訊 表單元素:文字框,按鈕,單選,複選,下拉列表,文字域 表
Python基礎學習筆記(一)python發展史與優缺點,崗位與薪資
相信有好多朋友們都是第一次瞭解python吧,可能大家也聽過或接觸過這個程式語言。那麼到底什麼是python呢?它在什麼機緣巧合下誕生的呢?又為什麼在短短十幾年時間內就流行開來呢?就請大家帶著疑問,讓我們來探索python的奧祕吧! 一:python發展史與優缺點 1.發展史 pyt
前端入門學習筆記(十四)CSS基礎(二)CSS 規則與選擇器
CSS語法 CSS是由瀏覽器解釋的樣式規則,然後應用於文件中相應的元素。 樣式規則有三個部分:選擇器,屬性和值。 例如,標題顏色可以定義為: h1{color: red;} 選擇器{ 屬性: 值;} selec
MySql 基礎學習筆記 1——概述與基本數據類型: 整型: 1)TINYINT 2)SMALLINT 3) MEDIUMINT 4)INT 5)BIGINT 主要是大小的差別 圖 浮點型:命令
where float 函數名 src ron 編碼方式 永遠 -m mas 一、CMD中經常使用mysql相關命令 mysql -D, --database=name //打開數據庫 --delimiter=name //指定分隔符 -h, --host=na