鼠标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. .NET 框架设计 - 模式、配置、工具 Demo 搜索

    ps:http://www.ituring.com.cn/article/195770 看完第二章,我也忍了!但是随着第三章“副本”的开启,我的阅读速度开始慢慢的减缓,虽然对其中每一个程序模式的理论也 ...

  2. NOI2.5 8465:马走日

    描述 马在中国象棋以日字形规则移动. 请编写一段程序,给定n*m大小的棋盘,以及马的初始位置(x,y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. 输入 第一行为整数T ...

  3. chrome 安装

    Centos7 yum安装chrome浏览器   跟着这个教程安装的:Centos7安装chrome浏览器 (点击) 1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 goo ...

  4. Jenkins环境配置(集成自动化程序)

    一.下载 直接到官网https://jenkins.io/download/  进行下载 二.安装 1.在浏览器地址栏输入:http://loclhost:8081 运行Jenkins,首次进入会提示 ...

  5. WEB打印控件LODOP的使用

    有人说她是Web打印控件,因为她能打印.在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来: 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几乎能想到的打印控制事 ...

  6. C#系列之Convert类型转换（三）

    知识点一: 类型如果相兼容的两个变量,可以使用自动类型转化或者强制类型转换,但是,如果两个变量不兼容,比如说String和int或者String和Double类型,这个时候我们就需要一种名叫conve ...

  7. openstack启动云主机的流程

    看一下openstack启动云主机的流程图 通过上图分析可以知道: 1. 用户使用Dashboard或者CLI 把认证信息通过REST请求发送给keystone进行认证.2. Keystone校验用户 ...

  8. ThreadLocal源码分析-黄金分割数的使用

    前提 最近接触到的一个项目要兼容新老系统,最终采用了ThreadLocal(实际上用的是InheritableThreadLocal)用于在子线程获取父线程中共享的变量.问题是解决了,但是后来发现对T ...

  9. python3调用哈工大ltp

    运行环境ubuntu+python3 安装pyltp sudo pip3 install pyltp 下载ltp_data_v3.4.0模型 http://ltp.ai/ 分句 from pyltp ...

  10. tensorflow feed_dict()

    import tensorflow as tf a=tf.Variable(100) b=tf.Variable(200) c=tf.Variable(300) update1=tf.assign(c ...