lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!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>
        ul {
            /* 取消列表默认样式 */
            list-style: none;
        }
        a {
            /* 取消a标签默认样式
                none 取消
                underline 下划线
                line-through 删除线
                overline 上划线
            */
            text-decoration: none;
        }
        ul li {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 10px;
            /* 文本在已知宽高的盒子内居中 */
            text-align: center;
            line-height: 100px;
        }
        ul li a {
            color: yellow;
        }
        /* 划过 :hover */
        ul li:hover {
            background: #00f;
        }
        ul li:hover a {
            color: #fff;
            font-size: 30px;
            font-weight: bold;
        }
        #box {
            width: 100px;
            height: 100px;
            background: red;
            /* 将元素转成行内元素 */
            display: inline;
        }
        #box1 {
            width: 100px;
            height: 100px;
            background: yellow;
            /* 将元素转成行内块元素 */
            display: inline-block;
        }
        span {
            /* 将元素转成块元素 */
            display: block;
        }
        #content {
            width: 300px;
            height: 300px;
            background: aqua;
            /* 圆角 */
            /* border-radius: 50px; */
            /* 左下 */
            border-bottom-left-radius: 20px;
            border-top-left-radius: 10px;
            border-bottom-right-radius: 30px;
            border-top-right-radius: 50px;
        }
        input {
            border: 2px solid #f00;
            border: none;
            /* 轮廓 */
            outline: none;
            outline: 3px solid #00f;
        }
    </style>
</head>
<body>
    <div>
        <input type="text">
        <div id="content"></div>
        <span>333</span><span>44</span>
        <div id="box">111</div>
        <div id="box1">222</div>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">我的</a></li>
            <li><a href="">购物车</a></li>
            <li><a href="">登录</a></li>
        </ul>
    </div>
</body>
</html>