HTML：简记

RaptorWE

已于 2023-08-23 14:00:05 修改

阅读量152

点赞数

分类专栏： HTML 文章标签：前端

于 2022-07-29 14:13:20 首次发布

本文链接：https://blog.csdn.net/Ben_boba/article/details/126054667

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

预览：

样式 class='c1' -> .c1{ } id='div1' -> #div{ }

<div class="c1">

    <hr width="980px" color="#3EBBE5" size="1px">

    <div id="div1" >
        <!-- 无序列表：ul  有序列表：ol -->
        <ul id="ww">
            <li>(评论员观察)</li>
            <li>把满意作为检验标准</li>
            <li>不能光靠**</li>
            <li>“放水养鱼”</li>
            <li>一把手”</li>
            <li>我们就是</li>
        </ul>
    </div>

    <div id="div2">
        <font color="2CBB2C"><b>用户登录</b></font><br>
        用户名：<input type="text" placeholder="昵称/email"><br>
        密&ensp;码&ensp;:<input type="password"><br>
        <input type="checkbox">记住用户名&ensp;
        <a href="#" id="mima"><font size="3px">忘记密码？</font></a><br>
        &ensp;&ensp;&ensp;&ensp;&ensp;<input type="button" value="确认登录" id="denglu">
    </div>

</div>


<style>

    .c1::after{        // after 在……之后
        /* 清除浮动 */
        clear: both;
        /* :after特有content属性 */
        content: '';
        /* 相当于所有div跑到一行去了 需要让他单独显示 */
        display: block;
    }

    #div1{
        width: 500px;
        height: 200px;
        /* 向左浮动 */
        float: left;
    }

    #ww{
        color:aqua;    // 字体颜色 aqua浅绿
    }

    #div2{
         width: 500px;
         height: 200px;
         /* 向右浮动 */
         float: right;
     }

</style>

--------------------------------------------------------------------------------------------------------------------------

预览：

<div id="div3">
    <a href="#" id="qq">要闻</a>
    <a href="#">时评</a>
    <a href="#">公益</a>
    <a href="#">财经</a>
    <a href="#">教育</a>
    <a href="#">消费</a>
    <a href="#">汽车</a>
    <a href="#">消费</a>
</div>

<style>

    #div3{
        width: 1000px;
        height: 80px;
        background-color:red;
    }

    #qq{
        color:yellow;
    }

    a{
        /* 去除超链接字体下划线 */
        text-decoration: none;
        color: aliceblue;
        font-size: 25px;
        line-height: 80px;        // 字体上下间距
        width: 100px;
        /* 间距 */
        display: inline-block;    //字体左右间距
    }

</style>

超链接 <a href=""></a>

        #aa{
            font-size:4px;
            line-height: 30px;    // 列表上下行间距
        }
        #bb{
            text-align: center;    // 整体居中
        }

-----------------------------------------------------------------------------------------------------------------------

预览：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body align="center">
    <form>
        <!-- 文本框 -->
        公司名称:<input type="text"><br>
        公司网站:<input tepe="text"><br>

        <!-- 密码框 -->
        登录密码:<input type="password"><br>

        <!-- 单选框 单选按钮 name=任意相同数值 -->
        性别:<input type="radio" name="1">男
            <input type="radio" name="1">女<br>

        <!-- 多选框 -->
        申请产品:<input type="checkbox">实木
                <input type="checkbox">沙发
                <input type="checkbox">办公<br>

        <!-- 文件域：上传文件 -->
        联系人证件:<input type="file"><br>
        <!-- select下拉框 -->
        密码查询问题:
        <select>
            <!-- option下拉内容 -->
            <option>请选择查询问题</option>
            <option>身份证</option>
            <option>居住证</option>
        </select><br>

        <!-- 文本域 -->
        备注:<textarea></textarea><br>

        <!-- 提交 按钮 -->
        <input type="submit" value="提交">
        <!-- 普通 按钮 -->
        <input type="button" value="普通按钮">
        <!-- 重置 按钮 -->
        <input type="reset" value="重置按钮">
    </form>
</body>
</html>