【HTML+CSS练习】画一个条件查询_条件查询html怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/VirusScanLog/article/details/115183793

这篇博客是关于HTML+CSS的实践练习，详细介绍了如何利用这两种技术来构建一个条件查询的状态栏搜索。文章提供了实现效果的展示，并给出了相应的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS练习，创建条件查询相关数据

使用HTML+CSS，绘制一个条件查询的状态栏搜索
具体效果如下：

注：要是觉得文章写得不错，记得留个赞哦！
HTML代码如下：

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

<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>条件查询</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class='Share' id="app">
        <div class='Share-1'>
            <label>
                <span class='text' name='wuliao-id'>新闻ID：</span>
                <input type="text" class="input">
            </label>

            <label>
                <span class='text' name='wuliao-name'>新闻名称：</span>
                <input type="text" class="input">
            </label>

            <label id='wuliao-type'>
                <span class='text' name='wuliao-name'>新闻类型：</span>
                <select name="category[]" class='select'>
                    <!-- option 获取分组下的列表内容 -->
                    <option value="1" class='text'>网易新闻</option>
                    <option value="2" class='text'>腾讯新闻</option>
                    <option value="3" class='text'>人民日报</option>
                    <option value="4" class='text' selected>新华社</option>
                    <option value="5" class='text'>澎湃新闻</option>
                    <option value="6" class='text'>新浪资讯</option>
                    <option value="7" class='text'>今日一线</option>
                    <option value="8" class='text'>走进科学</option>
                </select>
            </label>

            <label>
                <span class='text' name='sucai-id'>新闻素材：</span>
                <input type="text" class="input">
            </label>

            <label>
                <span class='text' name='sucai-name'>素材ID：</span>
                <input type="text" class="input">
            </label>

            <label for="project-id">
                <span class='text' name='project'>素材名称：</span>
            </label>
            <input type="text" name='project' id='project-id' class="input">

            <button class='button chax' name="select-botton">
                <span>查询</span>
            </button>
            <button class='button' name="reset-botton">
                <span> 重置</span>
            </button>
        </div>
    </div>
</body>

</html>

CSS代码如下：

.Share {
    border: 1px solid #d3dbeb;
    border-radius: 5px;
    position: relative;
    top: 20px;
    bottom: 20px;
    padding: 50px 10px 50px 10px;
    width: var(--Share-width, 1826px);
    height: var(--Share-height, 20px);
    text-align: left;
    margin: 0 auto;
}

/* 创建阴影 */
#app {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
}

.button {
    background-color: #37f;
    color: white;
    text-align: right;
    margin-left: 10px;
    border-radius: 3px;
    outline: none;
    font-size: var(--text-size, 16px);
    width: var(--button-width, 48px);
    height: var(--button-height, 28px);
}

.text {
    padding-left: 10px;
    font-size: var(--text-size, 16px);
}

.select {
    /* padding-left: 5px; */
    border: 1px solid rgb(109, 107, 107);
    width: var(--input-width, 165px);
    height: var(--select-height, 22px);
    padding: 1px 2px;
    border-radius: 3px;
    outline: none;
    position: relative;
    bottom: 0px;
    font-size: var(--text-size, 16px);
}

.chax {
    margin-left: 85px;
}

.input {
    border: 1px solid rgb(109, 107, 107);
    border-radius: 3px;
    outline: none;
    width: var(--input-width, 165px);
    height: var(--input-height, 18px);
}

:root {
    --Share-width: 1826px;
    --Share-height: 20px;
    --input-width: 165px;
    --input-height: 18px;
    --select-height: 22px;
    --text-size: 16px;
    --button-width: 48px;
    --button-height: 28px;
}

/* 设置缩放效果 */
@media (max-width: 1800px) {
    :root {
        --Share-width: 1650px;
        --Share-height: 20px;
        --input-width: 160px;
        --input-height: 15px;
        --select-height: 20px;
        --text-size: 12px;
        --button-width: 40px;
        --button-height: 23px;
    }
}