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

UPDATE

Browse Source
This commit is contained in:
rou
2026-03-12 22:56:33 +08:00
parent 4495ae0e28
commit 710852d8d0
9 changed files with 425 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
02-css-layout/02-box-model-card/starter.html
View File

@@ -4,7 +4,59 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒模型卡片</title> <title>盒模型卡片</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(226, 239, 251);
display: flex;
justify-content: center;
}
.course-card{
background-color: white;
border-radius: 20px;
margin-top: 50px;
width: 400px;
height: 300px;
}
.tag{
background-color: rgba(85, 128, 177, 0.223);
border-radius: 20px;
margin-top: 30px;
margin-left: 30px;
padding-top: 5px;
padding-left: 8px;
padding-bottom: 5px;
padding-right: 5px;
width: 90px;
color: blue;
}
h1{
margin-left: 30px;
}
p{
margin-left: 30px;
}
.actions{
background-color: blue;
width: 90px;
height: 35px;
margin-left: 30px;
padding-top: 13px;
border-radius: 10px;
}
a{
color: white;
text-decoration: none;
padding-left: 13px;
}
</style>
</head> </head>
<body> <body>
<article class="course-card"> <article class="course-card">

35
02-css-layout/03-flex-layout/starter.html
View File

@@ -4,7 +4,40 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex 布局</title> <title>Flex 布局</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(244, 247, 251);
}
.panel{
display: flex;
justify-content: space-around;
align-content: center;
padding: 40px;
gap: 20px;
}
.item{
flex:1;
background-color: white;
border: 1px solid rgba(102, 95, 95, 0.11);
border-radius: 20px;
padding: 20px 10px 15px 20px;
margin-top: 250px;
}
a{
text-decoration: none;
color: green;
font-weight: 600;
margin-bottom: 20px;
}
p{
margin-bottom: 30px;
}
</style>
</head> </head>
<body> <body>
<section class="panel"> <section class="panel">

50
02-css-layout/04-position-badge/starter.html
View File

@@ -4,7 +4,55 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位与徽标</title> <title>定位与徽标</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(247, 240, 230);
display: flex;
justify-content: center;
}
.card{
border: 1px solid rgba(254, 184, 114, 0.469);
border-radius: 15px;
background-color: white;
width: 400px;
height: 230px;
box-shadow: 10px 10px 15px rgba(252, 219, 186, 0.469);
margin-top: 150px;
position: relative;
}
.badge{
background-color: rgb(253, 133, 21);
color: white;
padding: 5px 8px 5px 10px;
border-radius: 20px;
width: 40px;
position: absolute;
right: 20px;
top: -10px;
}
h1{
margin-left: 20px;
margin-top: 50px;
}
p{
margin-left: 20px;
margin-bottom: 50px;
}
a{
text-decoration: none;
color: rgb(165, 75, 42);
font-weight: 800;
margin-bottom: 5px;
margin-left: 20px;
padding-bottom: 5px;
}
</style>
</head> </head>
<body> <body>
<article class="card"> <article class="card">

164
02-css-layout/05-final-page/starter.html
View File

@@ -4,7 +4,167 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端学习路线页</title> <title>前端学习路线页</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(236, 244, 250);
display: flex;
justify-content: center;
}
.page{
margin-top: 30px;
margin-left: 10px;
margin-right: 10px;
padding-left: 5%;
padding-right: 5%;
}
.site-header{
background-color: rgb(252, 253, 255);
border: 1px solid rgb(215, 231, 254);
border-radius: 20px;
display: flex;
justify-content: space-between;
padding: 20px;
}
a{
text-decoration: none;
color: blue;
font-weight: 800;
margin-right: 10px;
}
.nav{
margin-top: 32px;
display: flex;
justify-content: space-around;
}
main{
margin-top: 30px;
}
.hero{
background-color: rgb(35, 89, 224);
border-radius: 20px;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 10px;
display: flex;
justify-content: space-between;
}
.eyebrow{
color: aliceblue;
margin-top: 13px;
}
h2{
color: white;
font-size: 35px;
font-weight: 800;
margin-top: -5px;
padding-top: 0px;
padding-left: 15px;
}
.eye-p{
color: white;
margin-top: -10px;
padding-top: 0px;
margin-bottom: 20px;
margin-left: 15px;
}
.hero-link{
background-color: white;
padding: 10px 15px 10px 15px;
border-radius: 10px;
height: 23px;
width: 75px;
margin-top: 65px;
margin-right: 30px;
text-align: center;
}
.tracks{
display: flex;
justify-content: space-between;
margin-top: 25px;
gap: 30px;
padding-bottom: 20px;
}
.track-card{
background-color: rgb(252, 253, 255);
border: 1px solid rgb(215, 231, 254);
border-radius: 20px;
flex: 1;
}
h3{
margin-left: 20px;
margin-top: 40px;
}
p{
color: black;
margin-left: 20px;
padding-top: 15px;
margin-right: 20px;
}
.contact{
background-color: rgb(252, 253, 255);
border: 1px solid rgb(215, 231, 254);
border-radius: 20px;
margin-top: 25px;
}
label{
width: 100%;
}
form{
padding-left: 20px;
padding-right: 20px;
}
#name{
border-radius: 10px;
width: 95%;
border: 1px solid rgb(215, 231, 254);
padding: 15px;
margin-top: 10px;
font-size: 18px;
margin-bottom: 10px;
}
#goal{
width: 95%;
border: 1px solid rgb(215, 231, 254);
border-radius: 10px;
padding: 10px;
margin-top: 10px;
font-size: 18px;
}
button{
background-color: rgb(11, 98, 11);
border-radius: 10px;
color: white;
margin-top: 10px;
margin-left: 20px;
width: 140px;
height: 50px;
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
}
</style>
</head> </head>
<body> <body>
<div class="page"> <div class="page">
@@ -22,7 +182,7 @@
<div> <div>
<p class="eyebrow">第 2 阶段</p> <p class="eyebrow">第 2 阶段</p>
<h2>CSS 布局与视觉</h2> <h2>CSS 布局与视觉</h2>
<p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p> <p class="eye-p">目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
</div> </div>
<a class="hero-link" href="#tracks">开始练习</a> <a class="hero-link" href="#tracks">开始练习</a>
</section> </section>

36
02-css-layout/06-display-and-flow/starter.html
View File

@@ -4,7 +4,41 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display 与文档流</title> <title>Display 与文档流</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(247, 251, 253);
display: flex;
justify-content: center;
}
.wrap{
padding: 40px 0px ;
margin-left: 0px;
width: min(800px, calc(100% - 40px));
}
.tag{
background-color: rgb(210, 231, 251);
border-radius: 20px;
width: 120px;
height: 80px;
padding: 8px 15px 8px 15px;
margin-left: 0px;
}
.hide-me{
visibility: hidden;
}
.box{
border: 1px solid rgb(202, 212, 222);
width: 100%;
padding: 15px;
margin-left: 0px;
margin-top: 23px;
background-color: white;
}
</style>
</head> </head>
<body> <body>
<section class="wrap"> <section class="wrap">

20
02-css-layout/07-selectors-and-pseudo-classes/starter.html
View File

@@ -4,7 +4,23 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组合选择器与伪类</title> <title>组合选择器与伪类</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
padding: 30px 30px;
}
a{
text-decoration: none;
color: rgb(87, 81, 81);
font-weight: 700;
margin-right: 20px;
}
.li{
color: rgb(167, 113, 13);
font-weight: 700;
}
</style>
</head> </head>
<body> <body>
<nav class="menu"> <nav class="menu">
@@ -16,7 +32,7 @@
<section class="list"> <section class="list">
<p>学习建议</p> <p>学习建议</p>
<ul> <ul>
<li>先学结构</li> <li class="li">先学结构</li>
<li>再学布局</li> <li>再学布局</li>
<li>最后学交互</li> <li>最后学交互</li>
</ul> </ul>

26
02-css-layout/08-overflow-and-sizing/starter.html
View File

@@ -4,7 +4,31 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overflow 与尺寸</title> <title>Overflow 与尺寸</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(241, 247, 250);
display: flex;
justify-content: center;
padding-top: 40px;
}
.panel{
border: 1px solid rgb(207, 216, 227);
border-radius: 20px;
background-color: white;
width: 300px;
height: 170px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
overflow-y: auto;
}
p{
height: 150px;
letter-spacing: 1px;
}
</style>
</head> </head>
<body> <body>
<div class="panel"> <div class="panel">

27
02-css-layout/09-grid-layout/starter.html
View File

@@ -4,7 +4,32 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid 布局</title> <title>Grid 布局</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: aliceblue;
display: flex;
justify-content: center;
}
.grid{
display: grid;
grid-template-columns: repeat(2,1fr);
column-gap: 10px;
row-gap: 20px;
padding-top: 150px;
}
.cell{
background-color: white;
border: 1px solid rgb(208, 228, 252);
border-radius: 20px;
text-align: center;
width: 300px;
padding-top: 25px;
padding-bottom: 25px;
font-weight: 700;
}
</style>
</head> </head>
<body> <body>
<section class="grid"> <section class="grid">

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

@@ -4,7 +4,29 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fixed 与 Sticky</title> <title>Fixed 与 Sticky</title>
<link rel="stylesheet" href="./starter.css" /> <style>
body{
background-color: rgb(248, 252, 255);
display: flex;
justify-content: center;
}
a{
text-decoration: none;
color: white;
background-color: rgb(5, 94, 5);
border-radius: 20px;
padding: 10px 20px;
position: fixed;
right: 20px;
bottom: 20px;
font-size: 18px;
}
.page{
wi
}
</style>
</head> </head>
<body> <body>
<a class="help" href="#">帮助</a> <a class="help" href="#">帮助</a>