前端基礎學習筆記 hover border-radius
hover
滑鼠移入元素時 偽類
style:
div{ width:200px; height:200px; background-color:pink; } 滑鼠移入效果: div:hover{ background-color:red; border:1px solid blue } p{ display:none;//一開始消失 width:100px; height:100px; background-color:blue; } 加波浪線滑鼠移入出現 div:hover ~p{ display:block; }
border-radius
%
寬高一樣時50%是圓 不一樣時 橢圓
px
px值大於等於寬高一半時 是圓
一個值 四個方向
兩個值 左上右下 和 右上左下
三個值 左上 右上左下 右下
四個值 左下 右上 右下 左上
相關推薦
前端基礎學習筆記 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放在父級元
前端基礎學習筆記 字型文字樣式和特殊符號
字型樣式 字型顏色 color 字型風格 font-family span{ font-family:'微軟雅黑','宋體'; } 引入外部字型 @font-face{ font-family:"名稱"; src:url(' '); } 字型大小 font-size div
前端基礎學習筆記 盒模型
邊框線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、-符號連詞 _(不建議使
前端基礎學習筆記 樣式初始化 元素型別
樣式初始化 就是把預設樣式中的margin和padding取消、改變列表list-style、text-decoration文字裝飾、圖片邊框 <body> <style> *{margin:0;padding:0} ul,ol
前端基礎學習筆記 浮動 清除浮動 怪異盒模型
文件流 文件流為元素沒有改變特性時原本所要排列的位置和規則: 文件流為最底層 塊級 獨佔一行等在最底層排列,依次往下排列。 給上浮動之後,會把元素堆積起來,不佔文件流的位置。 浮動 可以讓元素脫離文件流。 浮動元素 浮動元素在文件流內不佔位置,後面的文件流元素,就會佔住浮動元
前端基礎學習筆記 表格
表格 在 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{
前端基礎學習筆記 滑鼠樣式cursor與盒陰影box-shadow
滑鼠樣式屬性 div{ cursor:default; } 如上程式碼可設定滑鼠劃入div盒子時的滑鼠樣式,滑鼠樣式有以下屬性值: default 箭頭 pointer 小手 wait 等待 text &n
前端基礎學習筆記 彈性盒子模型
基本彈性盒模型演示 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 同上,上面的區別是水平或
前端入門學習筆記(十四)CSS基礎(二)CSS 規則與選擇器
CSS語法 CSS是由瀏覽器解釋的樣式規則,然後應用於文件中相應的元素。 樣式規則有三個部分:選擇器,屬性和值。 例如,標題顏色可以定義為: h1{color: red;} 選擇器{ 屬性: 值;} selec
web前端入門學習筆記——html基礎(傳智播客)
Html基礎1 常用快捷鍵Ctrl+c複製Ctrl+v貼上Ctrl+x剪下Ctrl+a全選Ctrl+s儲存Ctrl+z撤銷一步Windows+d返回桌面Windows+e我的電腦Windows+r開啟執行Alt+tab切換軟體Ctrl+tab軟體文件之間的切換F2重新命
python基礎學習筆記
好的 留下 path false 找到 __name__ ems 單詞 ups 1 #!/usr/bin/env python 2 #coding=utf-8 3 4 def login(username): 5 if username==‘
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