溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用CSS模仿百度首頁(yè)

發(fā)布時(shí)間：2022-03-02 14:48:04 來(lái)源：億速云 閱讀：119 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)怎么使用CSS模仿百度首頁(yè)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>百度一下,你就知道</title>

<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;

}

/*鼠標(biāo)置于更多產(chǎn)品上時(shí)顯示*/

.more:hover+.menu {

display: block;

}

.more {

background-color: #38f;

color: white;

font-size: 14px;

padding: 5px;

}

.content {

margin-top: 60px;

}

.search {

/*給定寬度 結(jié)合左右margin auto實(shí)現(xiàn)水平居中*/

width: 650px;

margin: 0 auto;

/*讓塊內(nèi)部的行內(nèi)元素和文本水平居中*/

text-align: center;

}

#input {

width: 460px;

height: 30px;

border: 1px solid gray;

outline: none;

}

/*聚焦時(shí)*/

#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>

<!-- 頂部導(dǎo)航 -->

<div>

<a href="">糯米</a>

<a href="">新聞</a>

<a href="">hao123</a>

<a href="">地圖</a>

<a href="">視頻</a>

<a href="">貼吧</a>

<a href="">登錄</a>

<a href="">設(shè)置</a>

<span>更多產(chǎn)品</span>

<ul>

<li><a href="">測(cè)試</a></li>

<li><a href="">測(cè)試</a></li>

<li><a href="">測(cè)試</a></li>

<li><a href="">測(cè)試</a></li>

<li><a href="">測(cè)試</a></li>

</ul>

</div>

<!-- 中間內(nèi)容 -->

<div>

<div>

<img src="https://cache.yisu.com/upload/information/20220117/488/40263.jpg" width="240" alt="">

<!-- 搜索框 -->

<div>

<input id="input" type="text"><a id="go" href="">百度一下</a>

</div>

</div>

</div>

<!-- 底部區(qū)域 -->

<div></div>

</body>

</html>

關(guān)于“怎么使用CSS模仿百度首頁(yè)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手