02-CSS基础与进阶-day9_2018-09-12-21-50-58

weixin_30699831

于 2019-06-23 11:17:00 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HiJackykun/p/11072123.html

博客介绍了鼠标相关样式，给出参考代码链接。还提及表单轮廓线取消、防止文本域拖拽等操作，以及word-break、white-space等样式，介绍了css精灵图、滑动门、css3的2d和3d、BFC等内容，并给出相关文件及转载链接。

鼠标相关样式
参考代码或http://www.w3school.com.cn/cssref/pr_class_cursor.asp
表单轮廓线
取消轮廓线 outline: 0;
防止文本域拖拽 resize:none;

word-break

white-space

vertical-align

css精灵图

滑动门

css3
2d
3d

BFC

08鼠标相关样式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       p:nth-child(1) {
              cursor: default;
       }

       p:nth-child(2) {
              cursor: pointer;
       }

       p:nth-child(3) {
              cursor: text;
       }

       p:nth-child(4) {
              cursor: move;
       }

       p:nth-child(5) {
              cursor: help;
       }

       p:nth-child(6) {
              cursor: wait;
       }
    </style>
</head>
<body>
    <div>
        <p>aaaa</p>
        <p>bbbb</p>
        <p>ccccc</p>
        <p>ddddd</p>
        <p>eeeee</p>
        <p>fffff</p>
    </div>
</body>
</html>

09表单轮廓线.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       input {
              /* outline: 4px solid red; */
              /* border: 1px solid yellow; */
              outline: 0;  
       }

       textarea {
              outline: 0;
              resize: none;
       } 
    </style>
</head>
<body>
    <input type="text /">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <p>段落</p>
</body>
</html>