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

Compare commits

base: rou:69a4ae31788378e12b56d2fc9a96ddc4e62019b2
Branches Tags
rou:main
..
compare: rou:81004b437ceb8a68efa13b46530933c0bdf7570b
Branches Tags
rou:main

2 Commits
69a4ae3178 ... 81004b437c

Author SHA1 Message Date
rou
81004b437c Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example 2026-03-13 23:56:45 +08:00
rou
295fe875a3 update 2026-03-13 23:55:18 +08:00
3 changed files with 59 additions and 13 deletions
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;
border-bottom: 1px solid #cbd5e1;
font-weight: 700;
width: 100%;
}
.content {

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

@@ -7,8 +7,10 @@
<style>
body{
background-color: rgb(248, 252, 255);
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
a{
@@ -24,7 +26,23 @@
}
.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>
</head>

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

@@ -1,14 +1,41 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>居中专题</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<style>
body {
background-color: rgb(255, 248, 238);
margin: 0;
}
.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>
</body>
</html>