【css基础作业】
1、实例演示:<iframe>标签的使用
实例
<!DOCTYPE html> <html> <head> <title>iframe标签的使用</title> <meta charset="utf-8"> </head> <body> <ul style="float:left"> <li><a href="https://www.baidu.com/" target="qx">百度</a></li> <li><a href="https://weibo.com/" target="qx">微博</a></li> <li><a href="https://www.taobao.com/" target="qx">淘宝</a></li> <li><a href="https://www.jd.com" target="qx">京东</a></li> <li><a href="https://www.php.cn" target="qx">PHP中文网(拒绝内嵌访问)</a></li> </ul> <iframe src="" name="qx" width="1000px" height="600px" scrolling="no" frameborder="0" style="float:center;"></iframe> </body> </html>
运行实例 »
问题：1、内嵌地址后发现，部分网站拒绝访问。2、重复点击同一选项，会在新页面打开。（target指向不能识别
）
2、实例演示: css样式设置的优先级
样式越接近标签所在优先级越高：标签样式>内部样式>外部样式
实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- css样式文件放置本文件统一目录，内容为：div {color:red;} -->
<style type="text/css">
p {color: green;}
</style>
</head>
<body>
<p style="color:blue;">css样式设置的优先级,应为蓝色</p>
<p>css样式设置的优先级,应为绿色</p>
<div>css样式设置的优先级,应为红色</div>
</body>
</html>运行实例 »
3、实例演示: css的id, class与标签选择器的使用规则
css选择器优先级：id>class>标签
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#id{
color: red;
}
.class{
color: blue;
}
p{
color: yellow;
}
</style>
</head>
<body>
<p id="id" class="class">选择id，样式应该是红色</p>
<p class="class">选择class，样式应该是蓝色</p>
<p >选择标签p，样式应该是黄色</p>
</body>
</html>运行实例 »
4、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
实例
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta charset="utf-8">
<style type="text/css">
span {
width: 800px;
height: 1000px;
border: 2px solid red;
padding:10px 20px 30px 40px;
margin: 40px 30px 20px 10px;
}
</style>
</head>
<body>
<p>盒子模型</p>
<span >
盒子模型五要素
</span>
</body>
</html>运行实例 »