前端之练习2 - 方少0410

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        li{
            width: 20px;
            height: 20px;

            background-color: darkgray;
            padding: 10px 20px;
            margin:5px;
            border-radius: 20%;
            list-style:none;
            float:left;
        }
        li:hover{
            color:goldenrod;
            background-color:blue;
        }

        a{
            width: 70px;
            height: 20px;

            background-color: darkgray;
            padding: 10px 20px;
            margin:5px;
            border-radius: 20%;
            float:left;
        }
        a:hover{
            color:goldenrod;
            background-color:blue;
        }

    </style>
</head>

<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

    <a class="fang">下一页</a>
    <a class="fang">最后一页</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fang{
            width: 500px;
            height: 350px;
            margin:10px;
            float:left;
        }


        .jie{
            width: 500px;
            height: 350px;
            margin:30px;
            float:left;
        }

        .he{
            margin:30px;
        }
        .yi{
            margin:30px;
            border:1px solid;
            text-align:center;

        }
        .a{
            text-indent:15px;
        }
    </style>
</head>
<body>


    <img src="http://static.firefoxchina.cn/img/201708/13_597fdfdc62c300.jpg" alt="jie" >

    <div class="yi">
        <img class="fang" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2611079001,3896435225&fm=117&gp=0.jpg" alt="fang">
        <div class="jie">
            <form action="/index/" method="poet">
                <p class="a">姓名：<input type="text" name="username" value=""></p>
                <p class="a">密码：<input type="password" name="passwd" value=""></p>
                <p>验证码：<input type="text" name="yanzhengma" value=""></p>
                <p class="he"> <input type="radio">记住密码
                    <a  href=" ">忘记密码</a>
                </p>

                <input type="submit" value="登陆">
            </form>
        </div>
    </div>









</body>
</html>

笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        form{
            width:260px;
            height: 300px;
            padding: 20px;
            border:1px solid black;
            margin:100px auto;
        }
        p{
            width:260px;
            height: 40px;
            padding-top: 10px;
        }
        p.last{
            width:200px;
            height: 40px;
            margin-left: 80px;
        }
        p.last input{
            width:15px;
            height: 15px;

        }
        p.last span{
            float: left;
            height: 15px;
            line-height: 15px;
            width:72px;
            font-size: 13px;
            margin-right: 5px;
        }
        p b{
            color:red;
        }
        p input{
            width:150px;
            height: 20px;
            float: left;
            padding-left:10px;
        }
        p input.yzm{
            width:60px;
        }
        p span{
            width:80px;
            height: 40px;
            float: left;
            text-align: right;
        }
        p a.btn{
            display: block;
            width:100px;
            height: 30px;
            line-height: 30px;
            margin-left: 80px;
            background: red;
            font-size: 16px;
            color:#fff;
            font-family: "微软雅黑";
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
    <form action="">
        <p>
            <span>
                <b>*</b>用户名：
            </span>
            <input type="text" name="" id="" />
        </p>
        <p>
            <span>
                <b>*</b>密码： 
            </span>
            <input type="password" name="" id="" />
        </p>
        <p>
            <span>
                <b>*</b>验证码：
            </span>
            <input type="text" name="" id="" class="yzm" />
            <img src="" alt="" />
        </p>
        <p class="last">
            <span>
                
            <label><input type="checkbox" name="" id="" class="chbox" />自动登录</label>
            </span>
            <span><a href="#">忘记密码？</a></span>
        </p>
        <p>
            <a href="#" class="btn">登&nbsp;录</a>
        </p>
    </form>
</body>
</html>

posted on 2017-08-02 17:06 方少0410 阅读(103) 评论(0) 收藏举报

刷新页面返回顶部