HTML開発ブログの登録ページデザイン(3)

下部バー

<div id="bottom">
    <div id="bottom-content">
        <div id="content-left">
            <p><img src="img/3.jpg" height="150px"></p>
            <p> 网站位置 | 关于我们 |意见反馈|免责声明</p>
            <p>合作伙伴</p>
        </div>
        <div id="content-right">
            <p>友情链接</p>
            <p>PHP中文网  |  小猪CMS</p>
            <p>公司网址：php.cn</p>
        </div>
    </div>
</div>

下部のdiv.idセレクターを作成します

スタイルを変更します

#bottom{
    width:100%;
    background-color:#323333;
    height:300px;
    margin-top:70px;
}
#bottom-content{
    width:1000px;
    overflow:hidden;
    margin:0 auto;
    color:white;
    height:280px;
}
#content-left{
    width:460px;
    float:left;
    height:280px;
}
#bottom-content p{
    margin-top:10px;
}
#content-right{
    width:460px;
    float:right;
    height:280px;
    text-align: center;
    margin-top: 40px;
}

下部バーを2つのdivに分割し、1つは左フローティング用、もう1つは右フローティング用で、分離できるようにします両方の列を操作します。

りー

学び続ける

新しいファイル

<!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;} #bottom{ width:100%; background-color:#323333; height:300px; margin-top:70px; } #bottom-content{ width:1000px; overflow:hidden; margin:0 auto; color:white; height:280px; } #content-left{ width:460px; float:left; height:280px; } #bottom-content p{ margin-top:10px; } #content-right{ width:460px; float:right; height:280px; text-align: center; margin-top: 150px; } </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> <div id="bottom"> <div id="bottom-content"> <div id="content-left"> <p><img src="https://img.php.cn/upload/course/000/000/004/581701b3557ed481.jpg" height="150px"></p> <p> 网站位置 | 关于我们 |意见反馈|免责声明</p> <p>合作伙伴</p> </div> <div id="content-right"> <p>友情链接</p> <p>PHP中文网 | 小猪CMS</p> <p>公司网址：php.cn</p> </div> </div> </div> </body> </html>

提出するリセットコード

自動運転