Anchor-x/WebDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

baidu页面

Browse Source
This commit is contained in:
myh 2023-10-07 15:27:12 +08:00
parent 63c8de96af
commit 1ade1949eb
4 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/baidu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

18
package-lock.json generated
View File

@ -439,9 +439,9 @@
"dev": true "dev": true
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.30", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==", "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -467,9 +467,9 @@
} }
}, },
"node_modules/rollup": { "node_modules/rollup": {
"version": "3.29.3", "version": "3.29.4",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.3.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
"integrity": "sha512-T7du6Hum8jOkSWetjRgbwpM6Sy0nECYrYRSmZjayFcOddtKJWU4d17AC3HNUk7HRuqy4p+G7aEZclSHytqUmEg==", "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
"dev": true, "dev": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
@ -492,9 +492,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.9", "version": "4.4.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",

36
src/html/baidu.html Normal file
View 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
View 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;
}