11种常用css样式之鼠标、列表和尺寸样式学习

幼儿手工教程 發表於 2020-2-22 18:33:00

11种常用css样式之鼠标、列表和尺寸样式学习

鼠标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控制字体的多种变换"
<div class="cnblogs_code">
<pre>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 
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 
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></pre>
</div> 
来源：https://www.cnblogs.com/webaction/p/12346561.html

頁: [1]

琼殿技术论坛's Archiver

11种常用css样式之鼠标、列表和尺寸样式学习