鼠标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控制字体的多种变换"

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

     <style type="text/css">

     /*常见鼠标样式*/

     #ceshi{

         /* width: 120px;

         height: 20px;

         line-height: 20px;

         text-align: center;

         border-radius: 5px;

         color: #fff;

         border: 1px inset red;

         background-color: green; */

         cursor: crosshair;/*十字架*/

         cursor: text;/*默认 文本*/

         cursor: wait;/*等待加载*/

         cursor: help;/*请求帮助*/

         cursor:default;/*箭头指示*/

         cursor: pointer;/*小手*/

     }

     /*常见列表样式*/

     .box>ul li{

         list-style: none;/*把列表前面的选项去除*/

         list-style-type: disc;/*实心圆点*/

         list-style-type: circle;/*空心圆点*/

         list-style-type: square;/*方块*/

         list-style-type: decimal;/*序列123..*/

         list-style-type: lower-alpha;/*小写字母*/

         list-style-type: upper-alpha;/*大写字母*/

         list-style-type: lower-latin;/*小写字母*/

         list-style-type: lower-roman;/*小写罗马*/

         list-style-type: upper-roman;/*大写罗马*/

     }

     .box>ul li>a{

         text-decoration: none;

     }

     /*拓展，字母大小写、文本默认方向;建议阅读“css常用样式对文本的处理演练”*/

     p{

        direction: ltr;

        text-transform: uppercase; /*全部大写*/

        text-transform: lowercase;

        text-transform: capitalize;

     }

     /* 尺寸 如何清理浮动阅读https://www.cnblogs.com/dhnblog/p/12313037.html*/

     .size{

         background-color: #000;

     }

     .size>ul{

         width: 1920px;

         min-width: 1300px;/*屏幕自适应宽度100%*/

         padding-left: 0;

         padding-right: 40px;

         line-height: 40px;

     }

     .size>ul>li{

         list-style-type: none;

         float: left;

         margin-left: 15px;

     }

     .size>ul>li>a{

         text-decoration: none;

         color: #fff;

     }

     .size::after{

         content: '';

         clear: both;

         display: block;

     }/*清浮动*/

     #ueser{

         width: 100px;

         height: 100px;

         resize: none;/*不能拖动*/

     }

     </style>

     <script>

         window.onload=function(){

             var obj=document.getElementById('ceshi')

             obj.onclick=function(){

                 console.log('123');

                 alert('f12打开控制台');

                 document.body.style.background='#f90'

             }

         }

     </script>

 </head>

 <body>

     <div id="ceshi">

         点我有惊喜

     </div>

     <div class="box">

         <ul>

             <li><a href="#">列表abc1</a></li>

             <li>列表abc2</li>

             <li>列表abc3</li>

             <li>列表abc4</li>

             <li>列表abc5</li>

         </ul>

     </div>

     <p>asAAAAdbc</p>

     <!-- 尺寸 使用ul制作一个导航菜单-->

     <div class="size">

         <ul>

             <li><a href="#">百度</a></li>

             <li><a href="#">新浪</a></li>

             <li><a href="#">搜狐</a></li>

             <li><a href="#">网易</a></li>

             <li><a href="#">考拉</a></li>

         </ul>

     </div>

     <!-- textarea文本框 -->

     <form action="">

         <p>用户名：</p><input type="text" name="">

         <p>留言信息：</p>

         <textarea name="" id="ueser" cols="30" rows="10" ></textarea>

     </form>

     <!-- 样式继承 文字有关的样式会继承下来 -->

 </body>

 </html>

11种常用css样式之鼠标、列表和尺寸样式学习的更多相关文章

  1. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  2. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  3. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  4. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  5. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  6. css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）

    css3-5  css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结 一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...

  7. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  8. 常用 css html 样式

    CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS mar ...

  9. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

随机推荐

  1. laravel自动生成model

    laravel自动生成model 添加PHP扩展 composer require krlove/eloquent-model-generator --dev config/app注册Generato ...

  2. STM8 关闭PWM输出后的电平输出问题解决

    STM系列的单片机PWM输出如果被关断比如用TIM1_CtrlPWMOutputs进行停止输出后,电平的高低处于不确定的状态. 他取决于: 1.GPIO初始化的特性 2.关断那一刻时的电平 3.CCM ...

  3. Leetcode 题目整理-5 Valid Parentheses & Merge Two Sorted Lists

    20. Valid Parentheses Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...

  4. 如何获取 C# 类中发生数据变化的属性信息

    一.前言 在平时的开发中,当用户修改数据时,一直没有很好的办法来记录具体修改了那些信息,只能暂时采用将类序列化成 json 字符串,然后全塞入到日志中的方式,此时如果我们想要知道用户具体改变了哪几个字 ...

  5. Maven - 配置管理

    Maven Maven是一款自动化构建工具,专注服务于Java平台的项目构建和依赖管理.Project Object Model:项目对象模型.将Java工程的相关信息封装为对象形式作为便于操作和管理 ...

  6. ROS中3D机器人建模(五)

    一.创建一个差速驱动移动机器人模型 前面我们已经创建了一个7-DOF机械臂机器人模型,接下来我们将创建一个差速机器人模型,差速轮式机器人在机器人底盘的两端安装两个轮子, 整个底盘由一个或两个脚轮支撑. ...

  7. 实验13：VLAN/TRUNK/VTP/

    实验10-1: 划分VLAN Ø    实验目的通过本实验,读者可以掌握如下技能:(1) 熟悉VLAN 的创建(2) 把交换机接口划分到特定VLAN Ø    实验拓扑 实验步骤要配置VLAN,首先要 ...

  8. 遇到的一些在ie下的兼容问题和解决方案（ie10+）

    1,ie 10下实现水平垂直居中,不固定高度的话,正常的top:50%,left:50%,transform(translate(-50%,-50%)) 是不能实现的,ie下top:50%会失去效果. ...

  9. vmware14 unlock开启macos选项

    之前搜索了很多资料,用了很多Unlock都失败了,最后重新卸载vmware重新安装后,关闭应用竟然可以了 工具在微信公众号菜菜电脑已保存到百度网盘

  10. 未来图书-需求分析——脑机接口、VR、AI推荐系统

    个人比较喜欢科幻作品,也常常畅想未来.. "书"作为几千年来人类文明信息载体,必然会不断演变.. 文荟宿舍墙上贴着Elon Musk的海报,向往像他一样能够在有限的生命中用极致的想 ...