滑鼠cursor常見樣式crosshair;/*十字形狀*/cursor:pointer;/*小手形狀*/cursor:wait;/*等待形狀*/cursor:text;/*預設 文本形狀*/cursor:default;/*箭頭指示形狀*/cursor:help;/*幫助形狀*/ 列表(list... ...
滑鼠cursor常見樣式crosshair;/*十字形狀*/cursor:pointer;/*小手形狀*/cursor:wait;/*等待形狀*/cursor:text;/*預設 文本形狀*/cursor:default;/*箭頭指示形狀*/cursor:help;/*幫助形狀*/
列表(list-style-type):none/*把列表前面的選項去除*/disc/*實心*/circle/*空心*/square/*方塊*/decimal/*序列*/lower-roman/*小寫羅馬*/upper-roman/*大寫羅馬*/lower-alpha/*小寫字母*/upper-alpha/*大寫字母*/
尺寸:height;max-height;min-height;width;max-width;min-width/*屏幕自適應寬度,100%*/textarea文本框:resize:none/*文本框不能拖動*/width:500px;height:300px;樣式繼承:文字有關的樣式會繼承下來(閱讀css常用樣式font控制字體的多種變換)文本框resize:none文本框不能拖動)樣式繼承/*文字有關的樣式會繼承下來*/閱讀"css常用樣式font控制字體的多種變換"
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>11種常用css樣式之滑鼠、列表和尺寸樣式學習</title> 7 <style type="text/css"> 8 /*常見滑鼠樣式*/ 9 #ceshi{ 10 /* width: 120px; 11 height: 20px; 12 line-height: 20px; 13 text-align: center; 14 border-radius: 5px; 15 color: #fff; 16 border: 1px inset red; 17 background-color: green; */ 18 cursor: crosshair;/*十字架*/ 19 cursor: text;/*預設 文本*/ 20 cursor: wait;/*等待載入*/ 21 cursor: help;/*請求幫助*/ 22 cursor:default;/*箭頭指示*/ 23 cursor: pointer;/*小手*/ 24 } 25 /*常見列表樣式*/ 26 .box>ul li{ 27 list-style: none;/*把列表前面的選項去除*/ 28 list-style-type: disc;/*實心圓點*/ 29 list-style-type: circle;/*空心圓點*/ 30 list-style-type: square;/*方塊*/ 31 list-style-type: decimal;/*序列123..*/ 32 list-style-type: lower-alpha;/*小寫字母*/ 33 list-style-type: upper-alpha;/*大寫字母*/ 34 list-style-type: lower-latin;/*小寫字母*/ 35 list-style-type: lower-roman;/*小寫羅馬*/ 36 list-style-type: upper-roman;/*大寫羅馬*/ 37 } 38 .box>ul li>a{ 39 text-decoration: none; 40 } 41 /*拓展，字母大小寫、文本預設方向;建議閱讀“css常用樣式對文本的處理演練”*/ 42 p{ 43 direction: ltr; 44 text-transform: uppercase; /*全部大寫*/ 45 text-transform: lowercase; 46 text-transform: capitalize; 47 } 48 /* 尺寸 如何清理浮動閱讀https://www.cnblogs.com/dhnblog/p/12313037.html*/ 49 .size{ 50 background-color: #000; 51 } 52 .size>ul{ 53 width: 1920px; 54 min-width: 1300px;/*屏幕自適應寬度100%*/ 55 padding-left: 0; 56 padding-right: 40px; 57 line-height: 40px; 58 } 59 .size>ul>li{ 60 list-style-type: none; 61 float: left; 62 margin-left: 15px; 63 } 64 .size>ul>li>a{ 65 text-decoration: none; 66 color: #fff; 67 } 68 .size::after{ 69 content: ''; 70 clear: both; 71 display: block; 72 }/*清浮動*/ 73 #ueser{ 74 width: 100px; 75 height: 100px; 76 resize: none;/*不能拖動*/ 77 } 78 </style> 79 <script> 80 window.onload=function(){ 81 var obj=document.getElementById('ceshi') 82 obj.onclick=function(){ 83 console.log('123'); 84 alert('f12打開控制台'); 85 document.body.style.background='#f90' 86 } 87 } 88 </script> 89 </head> 90 <body> 91 <div id="ceshi"> 92 點我有驚喜 93 </div> 94 <div class="box"> 95 <ul> 96 <li><a href="#">列表abc1</a></li> 97 <li>列表abc2</li> 98 <li>列表abc3</li> 99 <li>列表abc4</li> 100 <li>列表abc5</li> 101 </ul> 102 </div> 103 <p>asAAAAdbc</p> 104 <!-- 尺寸 使用ul製作一個導航菜單--> 105 <div class="size"> 106 <ul> 107 <li><a href="#">百度</a></li> 108 <li><a href="#">新浪</a></li> 109 <li><a href="#">搜狐</a></li> 110 <li><a href="#">網易</a></li> 111 <li><a href="#">考拉</a></li> 112 </ul> 113 </div> 114 <!-- textarea文本框 --> 115 <form action=""> 116 <p>用戶名：</p><input type="text" name=""> 117 <p>留言信息：</p> 118 <textarea name="" id="ueser" cols="30" rows="10" ></textarea> 119 </form> 120 <!-- 樣式繼承 文字有關的樣式會繼承下來 --> 121 </body> 122 </html>
