HTML 개발 블로그 등록 페이지 디자인 (2)

등록 콘텐츠 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
    <style>
        @charset "utf-8";
        body{
            background-color: #F0F0F0;
        }
        *{
            border: 0px;
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }
        #top{
            width: 100%;
            height: 90px;
            background-color: white;
            border-bottom: 1px solid #bbbbbb;
        }
        #menu{
            width: 1000px;
            overflow: hidden;
            margin: 0 auto;
        }
        #menu img{
            height: 90px;
        }
        #menu ul{
            list-style-type: none;
        }
        #menu ul li{
            float: left;
            height: 90px;
            line-height: 90px;
            margin-right: 50px;
        }
        #menu ul li a{
            color: black;text-decoration: none;
            display: inline-block;
        }
        #menu ul li a:hover{color: #FFD700;text-decoration: none}
    </style>
</head>
<body>
<div id="top">
    <div id="menu">
        <ul>
            <li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li>
            <li><a href="index.html"> 首页</a></li>
            <li><a href="list.html">科技资讯</a></li>
            <li><a href="list.html">心情随笔</a></li>
            <li><a href="list.html">资源收藏</a></li>
            <li><a href="list.html">图文图片</a></li>
            <li><a href="list.html">留言板</a></li>
            <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li>
        </ul>
    </div>
</div>
<div id="box">
    <p class="p_line">注册账号已有账号直接登陆</p>
    <p style="margin-top: 40px"><input type="text" class="txtBox" placeholder="请输入账号"></p>
    <p><input type="password" class="txtBox" placeholder="请输入密码"></p>
    <p><input class="btn" type="submit" value="提交注册"></p>
</div>
</body>
</html>

스타일을 수정하세요

#box{
    width: 900px;
    height: 370px;
    background-color: white;
    margin: 0 auto;
    margin-top: 50px;
    padding: 50px;
}
#box p{
    text-align: center;
}
.p_line{
    border-bottom: 1px solid #bbbbbb;
    height: 40px;
    line-height: 50px;
}
.txtBox{
    border: 1px solid #bbbbbb;
    width: 350px;
    margin-top: 30px;
    height: 50px;
    padding-left: 10px;
    border-radius: 5px;
}
.btn {
    width: 365px;
    height: 50px;;
    color: white;
    background-color: #DD0000;
    margin-top: 25px;
}

상자 요소의 경우 너비와 높이를 제한하고 색상을 변경하고 디스플레이를 중앙에 배치하고 거리를 조정하고 p 태그를 사용하여 중앙에 배치합니다. 텍스트, 입력박스를 차례대로 스타일을 아름답게 하고, 테두리를 추가하고, 색상 높이를 조정하면 완성된 효과는 다음과 같습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册页面</title> <style> @charset "utf-8"; body{ background-color: #F0F0F0; } *{ border: 0px; padding: 0px; margin: 0px; font-size: 14px; } #top{ width: 100%; height: 90px; background-color: white; border-bottom: 1px solid #bbbbbb; } #menu{ width: 1000px; overflow: hidden; margin: 0 auto; } #menu img{ height: 90px; } #menu ul{ list-style-type: none; } #menu ul li{ float: left; height: 90px; line-height: 90px; margin-right: 50px; } #menu ul li a{ color: black;text-decoration: none; display: inline-block; } #menu ul li a:hover{color: #FFD700;text-decoration: none} #box{ width: 900px; height: 370px; background-color: white; margin: 0 auto; margin-top: 50px; padding: 50px; } #box p{ text-align: center; } .p_line{ border-bottom: 1px solid #bbbbbb; height: 40px; line-height: 50px; } .txtBox{ border: 1px solid #bbbbbb; width: 350px; margin-top: 30px; height: 50px; padding-left: 10px; border-radius: 5px; } .btn { width: 365px; height: 50px;; color: white; background-color: #DD0000; margin-top: 25px; } </style> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=https://img.php.cn/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href="index.html"> 首页</a></li> <li><a href="list.html">科技资讯</a></li> <li><a href="list.html">心情随笔</a></li> <li><a href="list.html">资源收藏</a></li> <li><a href="list.html">图文图片</a></li> <li><a href="list.html">留言板</a></li> <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li> </ul> </div> </div> <div id="box"> <p class="p_line">注册账号<span style="padding-left: 730px">已有账号直接登陆</span></p> <p style="margin-top: 40px"><input type="text" class="txtBox" placeholder="请输入账号"></p> <p><input type="password" class="txtBox" placeholder="请输入密码"></p> <p><input class="btn" type="submit" value="提交注册"></p> </div> </body> </html>

제출하다 코드 재설정

자동운전