前端学习第一阶段：第六章 HTML和CSS3
第六章的主题是HTML和CSS。以下是一些关键概念和示例代码：
HTML基础：
- 学习创建基本的HTML页面结构。
- 使用div、span和p标签来构建页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<div>
这是一个div元素。
</div>
<span>
这是一个span元素。
</span>
<p>
这是一个段落。
</p>
</body>
</html>CSS基础：
- 学习如何使用CSS为HTML元素添加样式。
- 使用class和id选择器来定义样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS示例</title>
<style>
.my-style {
color: blue;
font-size: 20px;
}
#my-id {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="my-style">这是一个蓝色字体的段落。</p>
<p id="my-id">这是一个加粗且红色的文本。</p>
</body>
</html>CSS3特效：
- 学习CSS3提供的特效，比如渐变、边框、阴影等。
/* CSS3 渐变效果 */
.gradient-background {
background: linear-gradient(to right, red, yellow);
}
/* CSS3 边框效果 */
.border-radius {
border: 2px solid black;
border-radius: 5px;
}
/* CSS3 阴影效果 */
.box-shadow {
box-shadow: 5px 5px 10px grey;
}- 实践：创建一个简单的带有CSS样式的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实践示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
nav {
float: left;
width: 20%;
background: #f2f2f2;
padding: 15px;
}
section {
float: right;
width: 80%;
padding: 15px;
}
footer {
clear: both;
text-align: center;
padding: 10px;
background-color: #ddd;
}
</style>
</head>
<body>
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<section>
<h2>主要内容</h2>
<p>这里是主要内容...</p>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
</
评论已关闭