鼠标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. svn和 android adt的 eclipse插件更新地址

    下边这两个插件的更新地址是每次安装android开发环境时都能用到的,为了方便在这里记录一下. android adt: http://dl-ssl.google.com/android/eclips ...

  2. 【javaScript】加减乘除的精确计算

    在js中使用"+"."-"等符号进行运算会出现很大的误差,所以需要自己创建函数进行精确运算. //说明:javascript的加法结果会有误差,在两个浮点数相加 ...

  3. XSS Cheat Sheet

    Basic and advanced exploits for XSS proofs and attacks. Work in progress, bookmark it. Technique Vec ...

  4. 微软的github 上面 有 Docker.DotNet 嗯 作为 菜 只有欣赏的额

    .NET Client for Docker Remote API step one 需要下载的 猛戳 Docker.DotNet

  5. c#数字图像处理（十二）图像的腐蚀与膨胀

    背景知识 腐蚀与膨胀基本原理:就是用一个特定的结构元素来与待处理图像按像素做逻辑操作:可以理解成拿一个带孔的网格板(结构元素矩阵中元素为1的为孔)盖住图像的某一部分,然后按照各种不同的观察方式来确定操 ...

  6. Dynamics CRM 快速获取custom entity

    我们可以使用Command来实现快速获取custom entity的值. 创建cmd  并且在nuget中引用 CRMSDK 复制下面的代码. userName 为登陆CRM的email passwo ...

  7. 手撸一个SpringBoot的Starter，简单易上手

    前言:今天介绍一SpringBoot的Starter,并手写一个自己的Starter,在SpringBoot项目中,有各种的Starter提供给开发者使用,Starter则提供各种API,这样使开发S ...

  8. Spring Boot动态注入删除bean

    Spring Boot动态注入删除bean 概述 因为如果采用配置文件或者注解,我们要加入对象的话,还要重启服务,如果我们想要避免这一情况就得采用动态处理bean,包括:动态注入,动态删除. 动态注入 ...

  9. Object-c的数组常用方法

    Object-c的数组常用方法 #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @a ...

  10. Asp.Net Core 混合全球化与本地化支持

    前言 最近的新型冠状病毒流行让很多人主动在家隔离,希望疫情能快点消退.武汉加油,中国必胜! Asp.Net Core 提供了内置的网站国际化(全球化与本地化)支持,微软还内置了基于 resx 资源字符 ...