想在html网页中制作一个搜索条,与csdn的搜索条样式一致,要写什么代码
时间: 2024-04-08 10:35:05 浏览: 15
要在HTML网页中制作一个与CSDN搜索条样式一致的搜索条,你可以使用以下代码:
HTML代码:
```html
<form class="csdn-search-form">
<input type="text" placeholder="请输入关键词" class="csdn-search-input">
<button type="submit" class="csdn-search-button"><i class="fa fa-search"></i></button>
</form>
```
CSS代码:
```css
.csdn-search-form {
display: flex;
}
.csdn-search-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
flex: 1;
}
.csdn-search-button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
margin-left: 5px;
}
```
这段代码会创建一个包含输入框和搜索按钮的搜索条,输入框和按钮的样式与CSDN搜索条一致。你可以将这段代码插入到你的HTML文件中相应的位置,然后根据需要进行进一步的样式调整。
相关问题
网页设计与制作代码csdn
网页设计与制作代码csdn是一个非常重要的工具和平台,它为网页设计师和开发人员提供了许多有用的资源和教程。在这个平台上,我们可以找到许多关于网页设计和制作的代码示例、技巧和最佳实践。从HTML、CSS到JavaScript和各种框架,csdn上有大量的资料可供学习和参考。
对于初学者来说,csdn是一个宝贵的资源,可以帮助他们入门网页设计和制作。网页设计与制作需要掌握一些基本的技术,如HTML和CSS,而csdn提供了很多关于这些技术的教程和范例代码,可以帮助初学者理解和学习。
对于有经验的网页设计师和开发人员来说,csdn也是一个很好的资源,可以帮助他们解决项目中的问题和挑战。在csdn上,我们可以找到关于响应式设计、交互设计、性能优化等方面的教程和文章。这些资源可以帮助设计师和开发人员提高他们的技能,并获得更好的用户体验。
另外,csdn还为网页设计师和开发人员提供了一个分享和交流的平台。在这个平台上,我们可以发布自己的作品和教程,与其他设计师和开发人员分享经验和交流意见。通过与其他人的互动,我们可以不断提高自己的水平和技能。
综上所述,网页设计与制作代码csdn是一个非常有价值的平台,它为网页设计师和开发人员提供了丰富的资源和教程。通过csdn,我们可以学习和掌握网页设计与制作的基本技术,解决项目中的问题,并与其他人进行分享和交流。它是一个不可或缺的工具,可以帮助我们在网页设计和制作领域取得更好的成果。
我需要一个用HTML5加css3加js制作一个关于杭州的美食的网页代码
好的,以下是一个示例的HTML5、CSS3和JavaScript代码,用于制作一个关于杭州美食的网页。你可以根据需要进行修改和扩展。
HTML5代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>杭州美食</title>
<style>
/* CSS3代码 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
}
header {
background: #ff6600;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
font-size: 36px;
margin: 0;
padding: 0;
}
nav {
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
font-size: 18px;
}
nav a:hover {
color: #ff6600;
}
section {
margin: 20px;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
section h2 {
font-size: 24px;
margin: 0;
padding: 0;
}
section p {
font-size: 18px;
margin: 10px 0;
padding: 0;
}
section img {
max-width: 100%;
height: auto;
margin: 10px 0;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
footer {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>杭州美食</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">西湖醋鱼</a>
<a href="#">东坡肉</a>
<a href="#">叫化鸡</a>
<a href="#">龙井虾仁</a>
</nav>
<section>
<h2>西湖醋鱼</h2>
<img src="https://img-blog.csdn.net/201808171707204?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2c2NzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80" alt="西湖醋鱼">
<p>杭州西湖醋鱼是杭州传统的名菜之一,以西湖草鱼为主料,搭配醋、糖、姜、葱、蒜等多种配料制作而成。其味道酸甜可口、肉质鲜嫩,是杭州餐桌上的一道美味佳肴。</p>
</section>
<section>
<h2>东坡肉</h2>
<img src="https://img-blog.csdn.net/201808171707204?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2c2NzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80" alt="东坡肉">
<p>杭州东坡肉是中国传统的名菜之一,以猪肉为主料,搭配葱、姜、料酒、糖、酱油等多种调料制作而成。其味道鲜美、香糯可口,是杭州餐桌上的一道美味佳肴。</p>
</section>
<section>
<h2>叫化鸡</h2>
<img src="https://img-blog.csdn.net/201808171707204?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2c2NzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80" alt="叫化鸡">
<p>杭州叫化鸡是杭州传统的名菜之一,以鸡肉为主料,搭配葱、姜、花椒、盐等多种调料制作而成。其味道鲜美、肉质鲜嫩,是杭州餐桌上的一道美味佳肴。</p>
</section>
<section>
<h2>龙井虾仁</h2>
<img src="https://img-blog.csdn.net/201808171707204?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2c2NzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80" alt="龙井虾仁">
<p>杭州龙井虾仁是杭州传统的名菜之一,以虾仁为主料,搭配龙井茶叶、姜、蒜等多种调料制作而成。其味道清香、鲜美可口,是杭州餐桌上的一道美味佳肴。</p>
</section>
<footer>
<p>联系邮箱:xxxx@xxx.com</p>
</footer>
</body>
</html>
```
JavaScript代码:
```javascript
// JavaScript代码
// 暂无交互效果,可根据需要添加
```
以上代码可以帮助你快速搭建一个简单的杭州美食网页,你可以在此基础上继续完善和扩展。