baidu页面
This commit is contained in:
parent
63c8de96af
commit
1ade1949eb
BIN
img/baidu.png
Normal file
BIN
img/baidu.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.3 KiB |
18
package-lock.json
generated
18
package-lock.json
generated
@ -439,9 +439,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.30",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
|
||||
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -467,9 +467,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.29.3",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.3.tgz",
|
||||
"integrity": "sha512-T7du6Hum8jOkSWetjRgbwpM6Sy0nECYrYRSmZjayFcOddtKJWU4d17AC3HNUk7HRuqy4p+G7aEZclSHytqUmEg==",
|
||||
"version": "3.29.4",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
|
||||
"integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
@ -492,9 +492,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.4.9",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
|
||||
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
|
||||
"version": "4.4.11",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
|
||||
"integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
|
36
src/html/baidu.html
Normal file
36
src/html/baidu.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BaiDu</title>
|
||||
<link href="../scss/style_baidu.scss" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<ul id="top-list">
|
||||
<li><a>新闻</a></li>
|
||||
<li><a>新闻</a></li>
|
||||
<li><a>新闻</a></li>
|
||||
<li><a>新闻</a></li>
|
||||
<li><a>新闻</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<img src="../../img/baidu.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="logo"></div>
|
||||
<form id="search-form">
|
||||
<label>
|
||||
<input type="text" class="search-box" placeholder="请输入搜索关键字">
|
||||
</label>
|
||||
<input type="submit" class="search-button" value="搜索">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
41
src/scss/style_baidu.scss
Normal file
41
src/scss/style_baidu.scss
Normal file
@ -0,0 +1,41 @@
|
||||
/* styles.css */
|
||||
|
||||
/* 设置页面背景色 */
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 设置页面内容区域的宽度和居中 */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 设置百度Logo的样式 */
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 45px;
|
||||
background-image: url("../../img/baidu.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 设置搜索框的样式 */
|
||||
.search-box {
|
||||
width: 400px;
|
||||
height: 40px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 设置搜索按钮的样式 */
|
||||
.search-button {
|
||||
background-color: #3385ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
Loading…
Reference in New Issue
Block a user