本文主要介绍了如何在HTML中使用`<input>`标签创建搜索框，并设置了不同类型的样式，如文本类型、placeholder属性以及CSS样式，包括边框、内边距、阴影等。
搜索框就是<input>来实现
input有很多个type，有text,checkbox(点击后有✅）
如果想在搜索框没有输入文字的时候已经有提示搜索此，就是<input class="search-box" type="text" placeholder="Search">
其他border格式设置和阴影设置都和前面写的案例中设置方法一样
<!DOCTYPE html>
<html>
<head>
<title> hello, Youtube!</title>
<style>
.thumbnail {
width: 278px;
height: 158px;
object-fit: cover;
object-position: left;
border-width: 2px;
border-color: red;
border-style: solid;
}
.search-box {
font: 24px;
border-radius: 12px;
border: 1px;
border-color: darkgrey;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
margin-left: 8px;
padding-left: 6px;
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<img class="thumbnail" src="">
<input type="text" class="search-box" placeholder="Search in xxx">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
