用CSS加HTML製作簡單的百度首頁
阿新 • • 發佈：2018-12-23
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度一下，你就知道</title>
<style>
html,
ul,
li,
input
{
padding: 0px;
margin: 0px;
font: 14px arial, "microsoft yahei";
list-style-type: none;
}
#menu
{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#menu>li
{
margin: 0.5rem;
border: 1px solid white;
}
.boldNavLink
{
font: bold 13px arial, 'sim sun';
color: #444;
}
.boldNavLink:hover
{
color:rgb(51,133,255);
}
.navLink
{
font: 13px arial, 'sim sun';
color: #444;
}
.navLink:hover
{
color: rgb(51,133,255);
}
#moreLink
{
background-color: rgb(51,133,255);
color: white;
font: 13px arial, 'sim sun';
text-align: center;
width: 75px;
position: relative;
}
#moreLink:hover
{
background-color: #f9f9f9;
border: 1px solid #e7e7e7;
/*border-bottom:0px;*/
color: #444;
}
#moreLink:hover ul
{
display: flex;
flex-direction: column;
}
#more
{
display: none;
padding-top:1rem;
position: absolute;
left: -1px;
background-color: #f9f9f9;
border: 1px solid #e7e7e7;
}
#more>li
{
text-align:center;
height:60px;
border-top: 1px solid #e7e7e7;
padding: 5px 0px;
}
#inputBox
{
text-align: center;
width: 50rem;
height: 12rem;
position: absolute;
left: 50%;
top: 20%;
margin-left: -25rem;
margin-top: -6rem;
}
input
{
outline: none;
font-size: 1rem;
line-height: 2.5rem;
display: inline-block;
vertical-align: middle;
}
#keywords
{
height: 2.5rem;
width: 40rem;
font-size: 16px;
border: 1px solid #b8b7b7;
border-right:0px ;
}
#keywords:focus
{
border: 1px solid rgb(51,133,255);
border-right: 0px;
}
input[type="button"]
{
border: 0px;
padding: 0px 20px;
background-color: rgb(51,133,255);
color: white;
height: 2.7rem;
font: 16px 'sim sun';
}
</style>
</head>
<body>
<div style="min-width: 1000px;">
<ul id="menu">
<li>
<a href="#" class="boldNavLink">新聞</a>
</li>
<li>
<a href="#" class="boldNavLink">hao123</a>
</li>
<li>
<a href="#" class="boldNavLink">地圖</a>
</li>
<li>
<a href="#" class="boldNavLink">視訊</a>
</li>
<li>
<a href="#" class="boldNavLink">貼吧</a>
</li>
<li>
<a href="#" class="boldNavLink">學術</a>
</li>
<li>
<a href="#" class="navLink">登入</a>
</li>
<li>
<a href="#" class="navLink">設定</a>
</li>
<li id="moreLink">更多產品
<ul id="more">
<li>
<img src="img/nuomi.jpg" alt="">
<div>糯米</div>
</li>
<li>
<img src="img/yinyue.jpg" alt="">
<div>音樂</div>
</li>
<li>
<img src="img/tupian.jpg" alt="">
<div>圖片</div>
</li>
<li>
<img src="img/zhidao.jpg" alt="">
<div>知道</div>
</li>
<li>
<img src="img/wenku.jpg" alt="">
<div>文庫</div>
</li>
<li>
<img src="img/fengyunbang.jpg" alt="">
<div>風雲榜</div>
</li>
<li style="height:auto;">
<a href="#" class="navLink">全部產品>></a>
</li>
</ul>
</li>
</ul>
<div id="inputBox">
<img src="img/bdLogo.png" width="270" alt="" srcset="">
<input type="text" name="keywords" id="keywords"><input type="button" value="百度一下">
</div>
<div style="text-align:center;margin-top:25rem;">
<img src="img/qcode.png" alt="" srcset="">
</div>
</div>
</body>
</html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度一下，你就知道</title>
<style>
html,
ul,
li,
input
{
padding: 0px;
margin: 0px;
font: 14px arial, "microsoft yahei";
list-style-type: none;
}
#menu
{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#menu>li
{
margin: 0.5rem;
border: 1px solid white;
}
.boldNavLink
{
font: bold 13px arial, 'sim sun';
color: #444;
}
.boldNavLink:hover
{
color:rgb(51,133,255);
}
.navLink
{
font: 13px arial, 'sim sun';
color: #444;
}
.navLink:hover
{
color: rgb(51,133,255);
}
#moreLink
{
background-color: rgb(51,133,255);
color: white;
font: 13px arial, 'sim sun';
text-align: center;
width: 75px;
position: relative;
}
#moreLink:hover
{
background-color: #f9f9f9;
border: 1px solid #e7e7e7;
/*border-bottom:0px;*/
color: #444;
}
#moreLink:hover ul
{
display: flex;
flex-direction: column;
}
#more
{
display: none;
padding-top:1rem;
position: absolute;
left: -1px;
background-color: #f9f9f9;
border: 1px solid #e7e7e7;
}
#more>li
{
text-align:center;
height:60px;
border-top: 1px solid #e7e7e7;
padding: 5px 0px;
}
#inputBox
{
text-align: center;
width: 50rem;
height: 12rem;
position: absolute;
left: 50%;
top: 20%;
margin-left: -25rem;
margin-top: -6rem;
}
input
{
outline: none;
font-size: 1rem;
line-height: 2.5rem;
display: inline-block;
vertical-align: middle;
}
#keywords
{
height: 2.5rem;
width: 40rem;
font-size: 16px;
border: 1px solid #b8b7b7;
border-right:0px ;
}
#keywords:focus
{
border: 1px solid rgb(51,133,255);
border-right: 0px;
}
input[type="button"]
{
border: 0px;
padding: 0px 20px;
background-color: rgb(51,133,255);
color: white;
height: 2.7rem;
font: 16px 'sim sun';
}
</style>
</head>
<body>
<div style="min-width: 1000px;">
<ul id="menu">
<li>
<a href="#" class="boldNavLink">新聞</a>
</li>
<li>
<a href="#" class="boldNavLink">hao123</a>
</li>
<li>
<a href="#" class="boldNavLink">地圖</a>
</li>
<li>
<a href="#" class="boldNavLink">視訊</a>
</li>
<li>
<a href="#" class="boldNavLink">貼吧</a>
</li>
<li>
<a href="#" class="boldNavLink">學術</a>
</li>
<li>
<a href="#" class="navLink">登入</a>
</li>
<li>
<a href="#" class="navLink">設定</a>
</li>
<li id="moreLink">更多產品
<ul id="more">
<li>
<img src="img/nuomi.jpg" alt="">
<div>糯米</div>
</li>
<li>
<img src="img/yinyue.jpg" alt="">
<div>音樂</div>
</li>
<li>
<img src="img/tupian.jpg" alt="">
<div>圖片</div>
</li>
<li>
<img src="img/zhidao.jpg" alt="">
<div>知道</div>
</li>
<li>
<img src="img/wenku.jpg" alt="">
<div>文庫</div>
</li>
<li>
<img src="img/fengyunbang.jpg" alt="">
<div>風雲榜</div>
</li>
<li style="height:auto;">
<a href="#" class="navLink">全部產品>></a>
</li>
</ul>
</li>
</ul>
<div id="inputBox">
<img src="img/bdLogo.png" width="270" alt="" srcset="">
<input type="text" name="keywords" id="keywords"><input type="button" value="百度一下">
</div>
<div style="text-align:center;margin-top:25rem;">
<img src="img/qcode.png" alt="" srcset="">
</div>
</div>
</body>
</html>