鼠标 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 控制字体的多种变换
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!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; 11 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>
- Windows.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>
来源: http://www.jianshu.com/p/02c2ac6354aa