鼠标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. for in 和 for i 十月 javascript 第一弹 记录

    for in 里面的 i 不仅有 数字还有这些鬼

  2. MATLAB2017 下载及安装教程

    全文借鉴于软件安装管家 链接: https://pan.baidu.com/s/1-X1Hg35bDG1G1AX4MnHxnA 提取码: ri88 复制这段内容后打开百度网盘手机App,操作更方便哦 ...

  3. python，for循环的使用案例集

    1.循环执行某一系列操作.将该操作定义为一个def,然后使用for去循环执行该操作 思路,先把操作定义为一个函数,在for循环执行这个函数 比如下面案例,把微信好友列表内的好友,循环的方式依次调整到第 ...

  4. zookeeper3.4.6安装

    1.关闭防火墙 service iptables stop chkconfig iptables off 2.编辑hosts文件: vi /etc/hosts 192.168.99.6 JacK6 1 ...

  5. liberty | 在IDEA整合Springboot与IBM liberty

    在IDEA整合Springboot与IBM liberty 简介 Liberty 是一款全新的轻量级应用服务器,它将用户的良好开发体验作为最主要的出发点.其主要特点和内容包括: 高模块化--该功能允许 ...

  6. CUDA学习（三）之使用GPU进行两个数组相加

    传入两个数组,在GPU中将两个数组对应索引位置相加 #include "cuda_runtime.h" #include "device_launch_parameter ...

  7. 深入JVM类加载器机制，值得你收藏

    先来一道题,试试水平 public static void main(String[] args) { ClassLoader c1 = ClassloaderStudy.class.getClass ...

  8. git看这一篇就够用了

    前言 本文是参考廖雪峰老师的Git资料再加上我自己对Git的理解,记录我的Git学习历程. Git是什么 官方话:Git是一个免费的开源分布式版本控制系统,旨在快速高效地处理从小型到大型项目的所有事务 ...

  9. 三、Linux系统中的文件类型和文件扩展名

    .sock文件也是一类特殊的文件,这类文件通常用在网络之间进行数据连接,如:我们可以启动一个程序来监听客户端的要求,客户端可以通过套接字来进行通信: linux中的文件类型 文件类型介绍 Linux系 ...

  10. tensorflow variable scope 变量命名空间和变量共享

    import tensorflow as tf def f(): var = tf.Variable(initial_value=tf.random_normal(shape=[2])) return ...