當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【HTML+CSS练习】画一个条件查询

發布時間：2025/3/21 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML+CSS练习】画一个条件查询小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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 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;} }

總結

以上是生活随笔為你收集整理的【HTML+CSS练习】画一个条件查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【python练习】支付宝自动偷取能量
下一篇：【面试练习题】使用“暴力”的方法将字符串