lovecoding
/
VIP26


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: #000;
            /* 取消a标签的默认样式 */
            text-decoration: none;
        }
        a:hover {
            color: #f00;
        }
        ul {
            /* 取消无序列表默认样式 */
            list-style: none;
        }
        ul li:hover {
            color: #f00;
            /* 鼠标变小手 */
            cursor: pointer;
        }
        div {
            width: 200px;
            height: 200px;
            background: #00f;
            border: 1px solid #f00;
            /* 取消边框 */
            border: none;
            /* 圆角
                border-radius
                50% 变成圆
                左上
                border-top-left-radius
                右上
                border-top-right-radius
                左下
                border-bottom-left-radius
                右下
                border-bottom-right-radius
            */
            border-bottom-right-radius: 10px;
            /* border-radius: 50%; */
        }
        input {
            /* 取消input框点击默认样式 */
            /* outline: none; */
            /* outline: 2px solid #f00; */
            outline-width:4px;
            outline-style: double;
            outline-color: #ff0;
            /* 
                outline:width style color 轮廓
                复合属性
                outline-width
                outline-style
                outline-color
            */
        }
        /* 
            伪元素 加上content
            ::after 在后面（位置）
            ::before 在前面（位置）
           
            css2的语法 :after :before
            css3的语法 ::after ::before

        */
        p::after{
            content: "今天天气真好";
            color: #f00;
        }
        p::before {
            content: "在前面";
            color: #00f;
        }
    </style>
</head>
<body>
    <div></div>
    <a href="">今天</a>
    <a href="">明天</a>
    <a href="">后天</a>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <input type="text" placeholder="请输入">
    <p>这是一段文字</p>
</body>
</html>