最近我学习了HTML，就尝试仿制了一下百度页面的代码，以便加深对标签和CSS样式的理解。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>百度一下，你就知道</title>
<style>
/* 设置背景色和居中 */
body {
background-color: #F5F5F5;
text-align: center;
}
/* 设置logo图片大小 */
#logo img {
width: 270px;
height: 129px;
margin-top: 110px;
}
/* 设置搜索栏样式 */
#search-form {
width: 540px;
margin: 32px auto 0;
background-color: #fff;
border: 1px solid #7c7c7c;
Box-shadow: 0 3px 3px rgba(0,0.1);
border-radius: 20px;
overflow: hidden;
display: inline-block;
}
/* 输入框和按钮样式 */
#search-form .search-input {
display: inline-block;
width: 400px;
height: 42px;
border: none;
font-size: 18px;
font-weight: bold;
padding: 0 16px;
}
#search-form .search-button {
display: inline-block;
width: 100px;
height: 42px;
border: none;
background-color: #3385ff;
color: #fff;
font-size: 18px;
font-weight: bold;
}
/* 设置百度一下按钮鼠标悬停样式 */
#search-form .search-button:hover {
background-color: #005fc0;
}
</style>
</head>
<body>
<!-- 百度一下 logo -->
<div id="logo">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
<!-- 搜索框 -->
<form id="search-form">
<input type="text" class="search-input" placeholder="百度一下，你就知道">
<input type="submit" value="百度一下" class="search-button">
</form>
</body>
</html>
通过语言的学习，我掌握了HTML的基本操作，如标签、样式、布局等。通过模仿百度页面，我不仅夯实了知识，还提升了自己的代码能力。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
