用html和css做搜狗网页代码

发表于前端技术学习版块 html,css

在学习web开发初步的html和css知识后，尝试着用这些知识写搜狗网页的代码是一种很有趣的实践。以下是这个过程中的一些要点： <!

在学习web开发初步的html和css知识后，尝试着用这些知识写搜狗网页的代码是一种很有趣的实践。以下是这个过程中的一些要点：

<!--html代码-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜狗搜索</title>
</head>
<body>
<div class="search-box">
<img src="https://www.sogou.com/images/logo/new/sogou.png" alt="搜狗logo">
<form action="" method="get">
<input type="text" name="keyword" placeholder="请输入搜索内容">
<button type="submit">搜 索</button>
</form>
</div>
<div class="nav">
<ul>
<li><a href="#">网页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">问答</a></li>
</ul>
<a href="#" class="more"><span>更多>></span></a>
</div>
</body>
</html>

/*css代码*/
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.search-box {
width: 100%;
height: 70px;
background-color: #2d2d2d;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
}
.search-box img {
height: 32px;
}
.search-box form {
display: flex;
align-items: center;
}
.search-box input[type="text"] {
border: none;
background-color: #202020;
color: white;
font-size: 16px;
height: 30px;
width: 400px;
padding: 0 10px;
margin-right: 10px;
}
.search-box button[type="submit"] {
border: none;
background-color: #e64340;
color: white;
font-size: 14px;
font-weight: bold;
height: 32px;
padding: 0 20px;
cursor: pointer;
}
.nav {
height: 40px;
background-color: #ededed;
display: flex;
align-items: center;
}
.nav ul {
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
padding: 0;
}
.nav li {
margin-right: 10px;
}
.nav a {
display: inline-block;
color: #555;
padding: 0 12px;
height: 40px;
line-height: 40px;
}
.nav a:hover {
background-color: #ccc;
color: white;
}
.nav .more {
margin-left: auto;
color: #555;
text-decoration: none;
}
.nav .more span {
display: inline-block;
transform: rotate(90deg);
margin: 0 5px;
}

在这些代码中，html部分使用了一些常见元素如div、form、input等，以及一些常用属性如class、type、name等。css部分涵盖了一些基本的样式设定和布局排版，如背景色、字体、盒模型、伪类等。总体来说，通过这些代码的练习，我们可以更深入地理解html和css的基本概念和用法，也能够理解更复杂的网页实现方式。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。