Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use CSS to imitate Baidu home page. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Baidu, you will know.

* {

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

/ * location * /

Position: absolute

Top: 0

Right: 0

Width: 80px

Height: 500px

}

/ * display when the mouse is over more products * /

.more: hover+.menu {

Display: block

}

.more {

Background-color: # 38f

Color: white

Font-size: 14px

Padding: 5px

}

.content {

Margin-top: 60px

}

.search {

/ * given width combined with left and right margin auto to achieve horizontal center * /

Width: 650px

Margin: 0 auto

/ * Center the inline elements and text within the block horizontally * /

Text-align: center

}

# input {

Width: 460px

Height: 30px

Border: 1px solid gray

Outline: none

}

/ * when focusing * /

# input:focus {

Border: 1px solid # 38f

}

# go {

Color:white

Padding: 7px 18px

Font-size: 14px

Background-color: # 38f

Text-decoration: none

Vertical-align: middle

}

sticky rice

Journalism

Hao123

Map

Video

Tieba

Log in

Set up

More products

test

test

test

test

test

Baidu Search

This is the end of this article on "how to use CSS to imitate Baidu home page". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.