设计搜索框——前端练习题

面相进程，面相对象

已于 2022-09-04 15:32:08 修改

阅读量163

点赞数 2

分类专栏：前端练习题前端基础知识思路共享文章标签：前端 html css3 css

于 2022-09-04 15:31:13 首次发布

本文链接：https://blog.csdn.net/weixin_57575133/article/details/126689487

版权

思路共享同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端基础知识

10 篇文章 0 订阅

订阅专栏

前端练习题

6 篇文章 0 订阅

订阅专栏

题目

描述

您需要在 index.html 和 style.css 文件中实现如下功能，并可以在右侧区域查看代码渲染的结果。

在类名为 searchbox 的盒子中添加一个文本输入元素和一个按钮，当文本输入元素输入为空时，该输入元素显示的内容为 What do you want to know?，按钮中的文本内容为 search
.searchbox 是一个宽 300px，高 35px 的盒子，该盒子中会采用flex 布局（弹性布局），为该盒子设置一条宽 3px 颜色为 steelblue 的实线边框
文本输入元素宽 70%，去除它的边框和轮廓
按钮元素宽 30%，去除它的边框，该按钮背景颜色为 steelblue，文字颜色为 white，当光标经过按钮时，光标变成点击样式

html部分：

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>Search Box</title>
</head>

<body>
<div class="searchbox">
    <input type='text' placeholder="What do you want to know?">
    <button type="button">search</button>
</div>
</body>

</html>

css部分：

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.searchbox{
    display: flex;
    width: 300px;
    height: 35px;
    border-style: solid;
    border-width: 3px;
    border-color: steelblue;
}
input{
    width: 70%;
    border: none;
    outline: none;
}

button{
    width: 30%;
    background-color: steelblue;
    color: white;
    border: none;
    cursor: pointer;
}

弹性布局不会的可跳转flex 布局（弹性布局）

向大家推荐一个练习弹性布局的游戏：Flexbox Froggy - A game for learning CSS flexbox（弹跳青蛙）