鼠标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. 安装anaconda python时只能安装到默认文件夹&& 安装提示文件夹以存在问题

    这个问题困扰了两次,网上说可以,我就是不行,查了半天没找到解决方法, 后来装在C盘里, 之后在百度知道(ID:幸福999快乐)发现解决办法后来才发现问题. 在安装的时候,要安装的目标文件夹不需要先在安 ...

  2. Java Web面试题整理(思维导图)

    1,动态网站技术有哪些? 2,一般的Web架构是指BS 还是CS,BS架构是什么咚咚? 3,Web应用程序的流程,即把一个URL串输入地址栏后发生写什么? 4,说一说Servlet生命周期? 5,在W ...

  3. 团队项目-Beta冲刺（第一周）

    团队项目-Beta冲刺(第一周) 一. 作业描述 这个作业属于哪个课程 这个作业要求在哪里 团队名称 CTRL-IKun 这个作业的目标 合理安排时间完成接下来的任务,剩余任务预估,分配任务(开发,测 ...

  4. Deep server from scratch

    Deep server from scratch 1.install Ubuntu16.04 via flash2.wired Network by Ruijie3.install google4.S ...

  5. HDU Queuing(递推+矩阵快速幂）

    Queuing Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. Redis入门，Jedis和常用命令

    一.Redis简介 1．关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据     库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...

  7. 多线程之CountDownLatch的用法及原理笔记

    前言-CountDownLatch是什么? CountDownLatch是具有synchronized机制的一个工具,目的是让一个或者多个线程等待,直到其他线程的一系列操作完成. CountDownL ...

  8. Java异常 | Error:java: Compilation failed: internal java compiler error

    背景 今天网上下载了一个项目,编辑运行报如下异常: Error:java: Compilation failed: internal java compiler error 经过往经验,读项目的编译环 ...

  9. python 利用selenium爬取百度文库的word文章

    今天学习如何使用selenium库来爬取百度文库里面的收费的word文档 from selenium import webdriver from selenium.webdriver.common.k ...

  10. Scala 学习（8）之「trait (2) 」

    trait调用链 Scala 中支持让类继承多个 trait 后,依次调用多个 trait 中的同一个方法,只要让多个 trait 的同一个方法中,在最后都执行super.方法即可 类中调用多个 tr ...