WEB——新浪网

最新推荐文章于 2024-08-22 17:38:39 发布
半ོ糖ོ
最新推荐文章于 2024-08-22 17:38:39 发布
阅读量408
点赞数 5
文章标签：前端
本文链接：https://blog.csdn.net/2301_78549931/article/details/135105700
版权
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪网</title>
</head>
<style>
    body {
        position: relative;
        
        width: 100%;
        height: 100%;
    }
    .top-left > img{
        height: 80px;
        
        opacity: .9;
        /* border: 1px saddlebrown solid; */
    }
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .top{
        display: flex;
        align-items: center;
        position: relative;
        font-size: larger;
        background-color: #359eff;
    }
    .top-right{
        display: flex;
        position: absolute;
        right: 100px;
        align-items: center;
    }
    .text{
        border: 1px solid black;
        height: 20px;
    }
    .tbody{
        border-bottom: 2px solid #555555;
        border-top: 10px solid darkorange;
        height: 600px;
        align-items: center;
        padding: 20px;
        display: flex;
    }
    .tbody-left, .tbody-right{
        width: 50%;
        padding: 20px;
    }
    .tbody-left{
        border-right: 1px solid black;
    }
    .input>div{
        margin-bottom: 20px;
        padding: 10px;
    }
    .checkbox{
        display: inline-block;
    }
    .submit{
        display: inline-block;
        background-color: #cccccc;
    }
    i{
        color: red;
    }
    a{
        text-decoration: none;
        color: #359eff;
    }
    .text-1 {
        display: inline-block;
        margin-top: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
    }
    .main_tab a {
        display: inline-block;
        padding: 5px 10px;
        margin-right: 10px;
        text-decoration: none;
        color: #333;
    }
</style>
<body>
<div class="top">
    <div class="top-left">
        <img src="新浪.png" alt="">
    </div>
    <div class="top-right">
        新浪首页
        <div class="text"></div>
         帮助
    </div>
</div>
<div>
    <div class="text-1">
        <a href="http://" class="current" id="phone-register">手机注册</a> <a href="http://" id="mail-register" class="current">邮箱注册</a>
    </div>
</div>
<div class="tbody">
    <div class="tbody-left">
        <div>
            <div>
                <div class="input">
                    <div>
                        <i>*</i>手机号码：
                        <input class="num" type="text" name="phone">
                    </div>
                    <div class="attachment">使用微博账号直接<a href="http://">登录</a></div>
                    <div class="tit">
                        <i>*</i>设置密码：
                        <input class="num" type="password" name="password">
                    </div>
                    <div class="list">
                        <i>*</i>兴趣标签：
                        <label class="checkbox"><input type="checkbox" name="interest" value="新闻">新闻</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="娱乐">娱乐</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="文化">文化</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="体育">体育</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="IT">IT</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="财经">财经</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="时尚">时尚</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="汽车">汽车</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="房产">房产</label>
                        <label class="checkbox"><input type="checkbox" name="interest" value="生活">生活</label>
                    </div>
                    <div class="num">
                        <i>*</i>上发短信手机：
                        <div class="submit">
                            <a href="https://"><span>我要使用注册手机发送短信</span></a>
                        </div>
                    </div>
                    <div class="agree">
                        <p><a href="https://">《新浪网络服务使用协议》</a></p>
                        <p><a href="https://">《新浪个人信息保护政策》</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div>
 
        </div>
    </div>
    <div class="tbody-right">
       已有账号，<a href="http://">直接登录 >></a>
    </div>
</div>
<div>
    <p><a href="http://">新浪简介</a> <a href="http://">About</a> <a href="http://">Sina</a> <a href="http://">广告服务</a> <a href="http://">联系我们</a> <a href="http://">招聘信息</a> <a href="http://">网站律师</a> <a href="http://">SINA English</a> <a href="http://">注册</a> <a href="http://">产品答疑</a></p>
    <p>客户服务电话 400-052-0066 欢迎批评指正</p>
    <p>Copyright © 1996 - 2023 SINA Corporation, All Rights Reserved 新浪公司 <a href="">版权所有</a></p>
</div>
</body>
</html>