收藏
批改状态：合格
老师批语：完成的很认真
课程内容：
1 常用标签3
2 CSS简介与导入
3 样式规则与盒模型简介1
4 样式规则与盒模型简介2
课程作业
1. 写一案例,要求用到<a href="" target="">与<iframe>
用<iframe>标签可以制作网站的后台管理系统，使用方便。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一切都是盒子</title> </head> <body> <video src="static/images/demo.mp4" width="500" height="280" controls poster="static/images/bg.jpg" ></video> <ul> <li class="item">1<a href="">最新产品1</a></li> <li class="item">2<a href="">最新产品2</a></li> <li class="item">3<a href="">最新产品3</a></li> <li class="item">4<a href="">最新产品4</a></li> </ul> <!--这样的标题其实也是一个盒子--> <h1>我爱编程</h1> </body> </html>
点击 "运行实例" 按钮查看在线实例
2. 写一个案例, 演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式
内联样式 > 内部样式 > 外部样式
css样式遵循下面的样式覆盖上面样式的原则，就像刷墙一样覆盖。
<!DOCTYPE html>
<html lang="en">
<style>
p {
color: green;
}
</style>
<link rel="stylesheet" href="static/css/style1.css" >
<head>
<meta charset="UTF-8">
<title>CSS简介与引入</title>
</head>
<body>
<p style="font-size: 18px; color: blue;">我是所不能的背着吉他的蝙蝠女侠!</p>
<p>华为Mate20X(5G)获中国首张5G终端电信设备进网许可证</p>
<p>环球社评：蓬佩奥操盘美国外交令世界不安</p>
<p>大丑闻!加拿大政府都向中方承认了,加媒还在"带节奏"</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3. 对于盒模型中的内外边距, 边框的样式设置有什么不同, 写出你的理解
一切皆盒子。盒模型由内容区，内边框区，边框，外边框构成一个盒子。
4. 盒模型的每个要素的排列方式是什么?
盒模型每个要素的排列方式：上-右-下-左
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
