web_tests
/
表单css样式.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            background-color: darkgray;
            border: none;
            border-bottom: solid 2px black;
        }
        span{
            margin-left: 20px;
        }
        #lct{
            color: blue;
            border: solid blue 1px;
            background-color: darkgray;
        }
        #self{
            background-color: darkgray;
            border: solid blue 1px;
            margin-left: 20px;
        }
        .btn{
            margin-left: 20px;
            border: solid blue 1px;
            color: blue;
        }
        #main_body{
            background-image: url("bg.jpg");
            background-position: center;
        }
    </style>
    <script>
        function sub(){
            alert("提交成功");
        }
    </script>
</head>

<body>
    <div id="main_body">
        <div style="margin-top: 40px; border: 1px solid black;">
            <span style="color: red; font-weight:bold; font-size: 20px; position:relative;top:13px; left: 30px;z-index: 999; padding-left: 10px; padding-right: 10px; background-color: #b4bcbf;">用户注册</span>
            <div style="border: solid 2px gray;line-height:3; position: relative;  margin-left: 20px; margin-right: 20px;">
                <div style="margin-top: 22px;">
                    <span>用户名：</span>
                    <input type="text">
                </div>
                <div>
                    <span>密&nbsp&nbsp&nbsp&nbsp码：</span>
                    <input type="password">
                </div>
                <div>
                    <span>性&nbsp&nbsp&nbsp&nbsp别：</span>
                    <input type="radio" name="sex" value="nan">男
                    <input type="radio" name="sex" value="nv">女
                </div>

                <span>所在地：</span>
                <select name="location" id="lct">
                    <option value="yichang">宜昌</option>
                    <option value="chengdu">成都</option>
                </select>
                <div>
                    <p style="margin-left: 20px;">个性签名</p>
                    <textarea cols="100" rows="5" id="self"></textarea><br>
                </div>
                <input type="button" value="注册" onclick="sub()" class="btn">
                <input type="reset" class="btn">
            </div>
            <div style="margin-left: 20px; margin-right: 20px;">
                <p>（一）设置列表项标志：list-style-type</p>
                <ul style="list-style-type:circle">
                    <li>苹果</li>
                    <li>橘子</li>
                    <li>香蕉</li>
                </ul>
                <p>（二）设置自定义图标为列表的列表项标签：list-style-image</p>
                <ul style="list-style-image: url(sq.jpg);">
                    <li>苹果</li>
                    <li>橘子</li>
                    <li>香蕉</li>
                </ul>
                <p>（三）设置列表项位置：list-style-position</p>
                <p>(1)inside</p>
                <ul style="list-style-position:inside">
                    <li>苹果</li>
                    <li>橘子</li>
                    <li>香蕉</li>
                </ul>
                <p>(2)outside</p>
                <ul style="list-style-position:outside">
                    <li>苹果</li>
                    <li>橘子</li>
                    <li>香蕉</li>
                </ul>
                <p>（四）将以上三个列表样式属性和为一个属性：list-style</p>
                <ul style="list-style:url(sq.jpg) outside; color: aliceblue;">
                    <li>苹果</li>
                    <li>橘子</li>
                    <li>香蕉</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>