0
点赞
收藏
分享

微信扫一扫

web前端入门到实战: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控制字体的多种变换

专门建立的学习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>


举报

相关推荐

十五种CSS鼠标样式

0 条评论