rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example

Browse Source
This commit is contained in:
charlie
2026-03-19 10:06:17 +08:00
parent f3bdaa4e88 81004b437c
commit 7be97e7ea7
3 changed files with 59 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
02-css-layout/10-fixed-and-sticky/answer.css
View File

@@ -27,6 +27,7 @@ body {
background: #ffffff; background: #ffffff;
border-bottom: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1;
font-weight: 700; font-weight: 700;
width: 100%;
} }
.content { .content {

20
02-css-layout/10-fixed-and-sticky/starter.html
View File

@@ -7,8 +7,10 @@
<style> <style>
body{ body{
background-color: rgb(248, 252, 255); background-color: rgb(248, 252, 255);
margin: 0px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
} }
a{ a{
@@ -24,7 +26,23 @@
} }
.page{ .page{
wi width: min(700px,calc(100% - 40px));
margin: 0 auto;
}
.topbar{
padding: 15px;
background-color: white;
position: fixed;
top: 0px;
font-weight: 700;
font-size: 17px;
width: min(700px,calc(100% - 40px));
}
.content{
height: 1100px;
margin-top: 60px;
} }
</style> </style>
</head> </head>

51
02-css-layout/11-centering-lab/starter.html
View File

@@ -1,14 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<meta charset="UTF-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="UTF-8" />
<title>居中专题</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./starter.css" /> <title>居中专题</title>
</head> <style>
<body> body {
<div class="stage"> background-color: rgb(255, 248, 238);
<div class="box">把我放到中间</div> margin: 0;
</div> }
</body>
</html> .stage {
background-color: white;
border: 1px solid rgba(255, 156, 7, 0.25);
border-radius: 20px;
padding: 15px 20px;
box-shadow: 0 0 10px rgb(243, 218, 172);
width: 150px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<div class="stage">
<div class="box">把我放到中间</div>
</div>
</body>
</html>