资源
HTML & CSS Full Course - Beginner to Pro (2022) - YouTube
课程
6. The HTML Structure
教你在 VS Code 里安装 Live Server，这样就可以实时写网页时刷新网页：
介绍了 HTML 的正式结构，添加<!DOCTYPE html>、<html>、<head>、<body>等。
使用<link rel="stylesheet" href="XX.css">引用 css。
- 6d
website.html:
<!DOCTYPE html>
<html>
<head>
<title>Model 3</title>
<link rel="stylesheet" href="styles/6d.css">
</head>
<body>
<p class="title">Model 3</p>
<p>
<span class="decription">
Order Online for
</span>
<span class="link">
Touchless Delivery
</span>
</p>
</body>
</html>styles/6d.css:
因为在国内 Google Font 不好使，所以用此法替代：HTML5如何引入外部字体？亲测有效_52Hertz____的博客-CSDN博客_h5引入字体
@font-face {
font-family: "HYFengShangHei_75W";
src:url("/styles/HYFengShangHei_75W.ttf")
}
p {
text-align: center;
font-family: HYFengShangHei_75W;
margin:0;
margin-top: 15px;
}
.title {
font-weight: bold;
font-size: 40px;
}
.decription {
font-size: 25px;
}
.link {
font-size: 25px;
text-decoration: underline;
}
7. Images and Text Boxes
<!DOCTYPE HTML>
<html>
<head>
<title>YouTube.com Clone</title>
<style>
.thumbnail {
width: 300px;
}
.search-bar {
font-size: 20px;
margin-left: 12px;
}
</style>
</head>
<body>
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
<input class="search-bar" type="text" placeholder="Search">
</body>
</html>
- 7a 7b 7c
<!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
._7a {
width: 200px;
border-radius: 30px;
}
._7b {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center;
}
._7c {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center;
border-radius: 80px;
}
</style>
</head>
<body>
<img class="_7a" src="picture.jpg">
<img class="_7b" src="picture.jpg">
<img class="_7c" src="picture.jpg">
</body>
</html>
- 7d 7e
<!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
._7d {
margin:10px;
border-width: 1px;
border-color: #AAA;
padding: 8px 5px;
border-radius: 4px;
}
._7e {
margin: 10px;
width: 60%;
padding: 8px 5px;
border-radius: 13px;
border: none;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<input class="_7d" type="text" placeholder="Search"><br/>
<input class="_7e" type="text" placeholder="Search Google or type a URL">
</body>
</html>
**Challenge Exercise **
- 7f 7g
<!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
.text {
color: #333;
font-size: 12px;
margin: 2px;
}
.input_box {
padding: 5px;
width: 320px;
margin: 2px;
border-radius: 3px;
border-color: #666;
}
.join_button {
margin-top: 10px;
padding: 10px 125px;
color: #FFF;
border: none;
border-radius: 20px;
background-color: rgb(48, 109, 199);
}
</style>
</head>
<body>
<p class="text">Email</p>
<input class="input_box" type="text">
<p class="text">By clicking Agree & join, you agree to the Privacy Policy.</p>
<button class="join_button">Agree & Join</button>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>7</title>
<style>
.profile {
vertical-align: middle;
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 25px;
margin-right: 10px;
}
.text {
vertical-align: middle;
color: #888;
margin-right: 100px;
}
.tweet {
vertical-align: middle;
background-color: rgb(12, 117, 203);
padding: 10px 15px;
font-weight: bold;
border-radius: 20px;
color:#FFF;
border:none;
}
</style>
</head>
<body>
<img class="profile" src="picture.jpg">
<span class="text">What's happening?</span>
<button class="tweet">Tweet</button>
</body>
</html>
8. CSS Display Property
- display property
- block element = takes up the entire line