怎么使用CSS模仿百度首页

这篇文章将为大家详细讲解有关怎么使用CSS模仿百度首页，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了南川免费建站欢迎大家使用！

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

.header {

text-align: right;

padding-top: 25px;

}

.header a {

color: black;

font-size: 14px;

font-weight: bold;

margin-left: 10px;

margin-right: 10px;

}

.header a:hover {

color: blue;

}

.menu {

list-style:none;

display:none;

background-color: #f4f4f4;

/*定位*/

position: absolute;

top: 0;

right: 0;

width: 80px;

height: 500px;

}

/*鼠标置于更多产品上时显示*/

.more:hover+.menu {

display: block;

}

.more {

background-color: #38f;

color: white;

font-size: 14px;

padding: 5px;

}

.content {

margin-top: 60px;

}

.search {

/*给定宽度结合左右margin auto实现水平居中*/

width: 650px;

margin: 0 auto;

/*让块内部的行内元素和文本水平居中*/

text-align: center;

}

#input {

width: 460px;

height: 30px;

border: 1px solid gray;

outline: none;

}

/*聚焦时*/

#input:focus {

border: 1px solid #38f;

}

#go {

color:white;

padding: 7px 18px;

font-size: 14px;

background-color: #38f;

text-decoration: none;

vertical-align: middle;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<div>

</div>

</body>

</html>

关于“怎么使用CSS模仿百度首页”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享标题：怎么使用CSS模仿百度首页
链接URL：https://www.cdcxhl.com/article10/iecodo.html

成都网站建设公司_创新互联，为您提供用户体验、网站设计公司、营销型网站建设、网站维护、品牌网站建设、企业网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容