Written by CC -- 2024-12-23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="accessibility">
<title>HTML/CSS Quiz</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp" id="logo">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href=#student-info>INFO</a></li>
<li><a href=#html-questions>HTML</a></li>
<li><a href=#css-questions>CSS</a></li>
</ul>
</nav>
</header>
<main>
<form action="https://freecodecamp.org/practice-project/accessibility-quiz" method="post">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input id="student-name" type="text" name="name"/>
</div>
<div class="info">
<label for="student-email" >Email:</label>
<input id="student-email" type="email" name="email"/>
</div>
<div class="info">
<label for="birth-date" >Date of Birth:</label>
<input id="birth-date" type="date" name="birth"/>
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML Questions</h2>
<div class="question-block">
<h3 ><span class="sr-only">Question</span>1</h3>
<fieldset class="question">
<legend>The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" value="True" name="q1-answer"/>True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" value="False" name="q1-answer"/>False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3> <span class="sr-only">Question</span>2</h3>
<fieldset class="question">
<legend></legend>
<ul>
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" value="True" name="q2-answer"/>True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" value="False" name="q2-answer"/>False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS Questions</h2>
<div class="formrow">
<div class="question-block">
<label for="selector">Can the CSS margin property accept negative values?</label>
</div>
<div class="answer">
<select name="selector" id="selector" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="otherquestions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea rows="5" cols="24" name="otherquestions" id="otherquestions"></textarea>
</div>
</div>
</section>
<button type="submit">Send</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a>
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
#logo {
width: max(10rem, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
header {
/* 设置header的样式 */
width: 100%; /* 设置宽度为100% */
height: 50px; /* 设置高度为50像素 */
background-color: #1b1b32; /* 设置背景颜色为深蓝色 */
display: flex; /* 使用flex布局 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 水平方向两端对齐 */
position: fixed; /* 设置为固定定位 */
top: 0px; /* 设置顶部边缘与视窗顶部对齐 */
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
font-family: Verdana sans-serif;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
h2 {
border-bottom: 4px solid #dfdfe2;
font-family: Verdana sans-serif;
margin-top: 0px;
padding-top: 60px;
}
h3 {
margin-top: 5px;
padding-left: 15px;
font-size: 1.375rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
h3::before {
content: "Question #"
}
nav > ul > li > a {
color: #dfdfe2;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
section {
width: 80%;
margin-top: 0px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
max-width: 600px;
}
.info {
padding-top: 1px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 1px;
}
.formrow {
margin-top: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
}
.info label, .info input{
display: inline-block;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
text-align: right;
}
.queston-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
.question {
border: none;
padding-bottom: 0px;
}
.answers-list {
list-style: none;
padding: 0 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 1.438rem;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer, footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 1px 1px;
}
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior :smooth;
}
}
css的内容过于细枝末节及因地制宜，需要通过不断的各类情况项目来掌握；从实用层面来讲借助于AI编程工具，一些基础的信息不需要再强化记忆，在架构层级掌握设计原理即可；
掌握工具例如键盘快捷键、ARIA属性及最佳设计实践