【web】css初识

已于 2024-04-25 16:59:53 修改
阅读量405 收藏 11
点赞数 10
文章标签： css 前端
于 2023-12-18 12:39:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_65583879/article/details/135059891
版权

1.Sina注册页

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sina注册页</title>
    <link rel="stylesheet" href="./css/sina.css">
</head>

<body>
    <form action="#" method="post">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td colspan="2">
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="td7"></td>
                            <td class="td5">手机注册</td>
                            <td class="td7"></td>
                            <td class="td6">邮箱注册</td>
                            <td class="td8"></td>
                        </tr>
                    </table>
                </td>

            </tr>
            <tr>
                <td>
                    <p class="p1"></p>
                    <p>
                    <div class="div2"></div>
                    <label for="tel">
                        <div class="div1">*</div>手机号码：
                    </label>
                    <input type="text" name="tel" id="tel" style="text-align: center;">
                    </p>
                    <p>
                        使用微博帐号直接<a href="#">登录</a>
                    </p>
                    <p>
                    <div class="div2"></div>
                    <label for="tel">
                        <div class="div1">*</div>设置密码：
                    </label>
                    <input type="password" name="tel" id="tel">
                    </p>
                    <p>
                    <div class="div2"></div>
                    <label for="tel">
                        <div class="div1">*</div>兴趣标签：
                    </label>
                    <div class="div1">
                        <input type="checkbox" name="hobby" value="新闻">新闻
                        <input type="checkbox" name="hobby" value="娱乐">娱乐
                        <input type="checkbox" name="hobby" value="文化">文化
                        <input type="checkbox" name="hobby" value="体育">体育
                        <input type="checkbox" name="hobby" value="IT">IT
                        <br>
                        <input type="checkbox" name="hobby" value="财经">财经
                        <input type="checkbox" name="hobby" value="时尚">时尚
                        <input type="checkbox" name="hobby" value="汽车">汽车
                        <input type="checkbox" name="hobby" value="房产">房产
                        <input type="checkbox" name="hobby" value="生活">生活
                    </div>

                    </p>
                    <p>
                    <div class="div3"></div>
                    <label for="tel">
                        <div class="div1">*</div>上发短信手机：
                    </label>
                    <input type="submit" value="我要使用注册手机发送短信">
                    </p>
                    <p></p>
                    <p>
                        <a href="#">《新浪网络服务使用协议》</a>
                    </p>
                    <p>
                        <a href="#">《新浪个人信息保护政策》</a>
                    </p>
                    <p class="p2">

                    </p>
                </td>
                <td class="td1">
                    <div class="div5"></div>
                    <div class="div8">已有账号,<a href="#">直接登录 >></a></div>
                    <div class="div4"><div class="div6"></div></div>
                </td>
            </tr>
            <tr>

            </tr>
            <tr>
                <td colspan="2" class="td2">
                    <ol>
                        <li><a href="#">新浪简介</a></li>
                        <li><a href="#">About Sina</a></li>
                        <li><a href="#">广告服务</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">招聘信息</a></li>
                        <li><a href="#">网站律师</a></li>
                        <li><a href="#">SINA English</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">产品答疑</a></li>
                    </ol>

                    <ol>
                        <li>客户服务电话 400-052-006 欢迎批评指正</li>
                    </ol>

                    <ol>
                        <li>
                            Copyright @ 1996 - 2020 SIMA Corporation,All Rights Reserved 新浪公司
                            <a href="#"> 版权所有</a>
                        </li>
                    </ol>
                </td>
            </tr>
        </table>
    </form>

</body>

</html>

sina.css

ol li{
    list-style: none;
    display: inline-block;
}
a{
    color: rgb(0, 153, 255);
    text-decoration: none;
}
.td2{
    border-top: 1px solid #888888;
}
.div1{
    display: inline-block;
}
.div2{
    display: inline-block;
    width: 95px;
}
.div3{
    display: inline-block;
    width: 60px;
}
p{
    text-align: center;
}
.td1{
    margin-top: 10px;
}
.div4{
    height: 600px;
}
.td5{
    text-align: center;
    width: 80px;
    height: 20px;
    border-top: 1px solid #888888;
    border-left: 1px solid #888888;
    border-right: 1px solid #888888;
}
.td6{
    text-align: center;
    width: 80px;
    height: 40px;
    border: 1px solid #888888;
}
.td7{
    width: 40px;
    height: 40px;
    border-bottom: 1px solid #888888;
}
.td8{
    width: 500px;
    height: 40px;
    border-bottom: 1px solid #888888;
}
.p1{
    height: 30px;
}
.p2{
    height: 30px;
}
.div5{
    border-left: 1px solid #888888;
    height: 35px;
}
.div6{
    height: 550px;
    border-left: 1px solid #888888;
}
.div8{
    text-align: right;
    display: inline-block;
    border-left: 1px solid #888888;

}

运行结果

2.菜单栏

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/菜单.css">
</head>

<body>
    <div>
        <nav>
            <ul class="menu">
                <li class="li2"></li>
                <li class="li3"><a href="#">首页</a></li>
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">直播</a></li>
                <li class="li2"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">圈子</a></li>
                <li class="li2"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">课程</a></li>
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">营销</a></li>
                <li class="li2"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">交易</a></li>
                <li class="li2"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">用户</a></li>
                <li class="li2"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">数据</a></li>
                <li class="li2"></li>
                <li class="li2"></li>
                <li class="li3"><a href="#">SCRM</a></li>
                <li class="li1"></li>
                <li class="li1"></li>
            </ul>
        </nav>
    </div>
</body>

</html>

菜单.css

ol,li {
    list-style: none;
}

ul.menu {
    background-color: #1B2534;
    height: 60px;

}

.li1 {
    background-color: #1B2534;
    width: 10px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
    margin-top: 10px;
    border-right: 1px solid white;
}
.li2 {
    background-color: #1B2534;
    width: 10px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
    margin-top: 10px;
}

ul>.li3 {
    background-color: #1B2534;
    width: 80px;
    height: 36px;
    float: left;
    text-align: center;
    line-height: 36px;
    margin-top: 12px;
}

ul>li:last-child {
    border: none;
}

ul.menu>li>a {
    color: white;
    font-size: 18px;
    text-decoration: none;
}

ul.menu>.li3:hover {
    background-color: #999;
}

运行结果

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值