-
目錄結構
![]()
-
圖片
bd_logo.png
![bd_logo.png]()
code.jpg
![code.jpg]()
favicon.ico
https://www.baidu.com/favicon.ico -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<ul>
<li><a href="#">新聞</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">視頻</a></li>
<li><a href="#">貼吧</a></li>
<li><a href="#">學術</a></li>
<li><a href="#">登錄</a></li>
<li><a href="#">設置</a></li>
<li><a href="#">更多產品</a></li>
</ul>
</header>
<article>
<img src="img/bd_logo.png" height="129" width="270"/>
<br>
<div id="search">
<input id="searchContent">
<input id="searchBtn" type="submit" value="百度一下"/>
</div>
<div id="code">
<img src="img/code.jpg" height="116" width="117"/>
<p class="title">下載百度APP</p>
<p class="sub-title"> 有事搜一搜 沒事看一看</p>
</div>
</article>
<footer></footer>
</body>
</html>
- index.css
* {
text-decoration: none;
margin: 0;
padding: 0;
background-color: white;
box-sizing: border-box;
}
header{
width: 100%;
height: 78px;
}
header ul {
float: right;
margin-top: 22px;
margin-right: 14px;
}
header ul li {
display: inline-block;
}
header li a {
color: #333;
font-weight: 700;
line-height: 24px;
margin-left: 20px;
font-size: 13px;
text-decoration: underline;
}
header li a:hover {
color: #00c;
}
article{
width: 100%;
height: 519px;
text-align: center;
}
article #searchContent{
width: 540px;
height: 36px;
}
article #searchBtn{
display: inline-block;
width: 100px;
height: 36px;
background: #3385ff;
color: white;
border: none;
}
article #search {
font-size: 0;
}
article #code{
margin-top: 71px;
width: 100%;
height: 202px;
}
article #code .title{
font-size: 16px;
color: #333333;
}
article #code .sub-title{
font-size: 14px;
color: #999999;
}
- 效果
![]()
