鼠标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控制字体的多种变换
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
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>
网友评论