收藏
批改状态：合格
老师批语：是的 ,越具体的,级别越高
一、实例演示，先贴基本代码
HTML部分所有前端代码可以叠加嵌套，一段代码包含了很多知识点。为了节约时间提高效率，我这里将多个案例全部写进一个代码里面，css样式直接写在html文档里面，一个个的演示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
/* .container {
background-color: cyan;
}
#main {
background-color: pink;
} */
.container,
.iframe-label {
height: 750px;
width: 1000px;
}
.main-left {
float: left;
width: 19.5%;
height: 100%;
margin-top: 1px;
border-bottom: 1px solid #000;
}
.main-right {
float: left;
width: 79.5%;
height: 100%;
}
.main-right-top,
.main-right-bottom {
height: 50%;
border-top: 0;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
#list {
list-style: none;
}
.item>a {
text-decoration: none;
}
</style>
<body>
<div class="container">
<!-- <div class="container" id="main" style="background: yellow"> -->
<!-- iframe标签的使用 -->
<div class="iframe-label">
<!-- 左边部分 -->
<div class="main-left">
<ul id='list'>
<li class="item">
<a href="http://www.baidu.com" target="baidu">
<h3>点击浏览百度</h3>
</a>
</li>
<li class="item">
<a href="http://www.163.com" target="neteasy">
<h3>点击浏览网易</h3>
</a>
</li>
<li class="item">
<a href="http://www.163.com" target="baidu">
<h3>百度换成网易</h3>
</a>
</li>
</ul>
</div>
<!-- 右边部分 -->
<div class="main-right">
<!-- 右上部 -->
<div class="main-right-top">
<iframe src="http://www.baidu.com" name="baidu" frameborder="0" width="100%" height="100%"></iframe>
</div>
<!-- 右下部 -->
<div class="main-right-bottom">
<iframe srcdoc="<h1>网易的位置</h1>" name="neteasy" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
可以点击实例运行一下看看效果！
下面在这块代码的基础下一个个地演示
二、css样式优先级
1、以代码中container这个块元素为操作对象。
1）、在标签中加入背景为黄色的属性值<div class="container" style="background: yellow">
2）、添加内部引入标签给container设置背景色<style>.container{background:cyan}</style>
3）、引入样式表<link rel="stylesheet" href="style.css">，在style.css中写入.container{background:pink}
当以上三种类型同时存在时，效果如下：
背景为黄色，说明在标签中加属性值的方式优先级最高。
现在删除<div class="container" style="background: yellow">中的style属性，效果如下：
此时背景色变为青色，说明style标签引入样式优先级大于外部引入css样式。
最后，我们删除style标签样式块，运行结果为：
没错，就是粉色。
由此我们可以得出css属性优先级为：内部属性>style标签引入>外部引入。
三、 css的id, class与标签选择器的使用规则
标签选择器有两种，一种为id，一种为class。
id只是选择单个元素，class可选择多个同类元素
下面以代码中的<ul></ul>中的<li>元素演示
1）所有li元素均有个class属性为class="item"
2）给第二个li元素添加id属性 id="link"
在样式表中加入.item a{color:red}和#link a{color:blue}
下面看效果：
三个列表均拥有颜色属性值，但是第二个为蓝色，其他为红色
其实这和我们刚才给第二个li添加id选择器有关，我们给id为link元素下的a元素一个蓝色颜色值，而id选择器的优先级高于class选择器的优先级，故他要特殊点。
下面我们去掉选择器id="link"，看效果：
红了！！！！
四、演示盒模型的五大要素
盒模型五大要素：width、height、background、margin、padding
除了背景background，所有东西都在这个chrome调试图上，实例已全部用上以上要素。
五、总结
iframe标签的作用是将一个外部链接或者文件直接在html页面中打开而不需要跳转新标签或者当前标签打开，这个功能大量用于后台控制面板，iframe标签一个重要属性为name，在链接上将目标指向iframe的name后，即可在iframe内打开链接，还有一个scrolling属性控制滚动条，也很重要。
css样式的优先级，一切遵从小范围优先大范围的原则，id优先于class，内部style属性优先于style标签优先于外部引入css。在id、class命名时尽量遵守简单、语义化命名，这样代码多了不容易出错，id选择器用得很少了，但是又是不可缺少了，在实际项目中能用class就用class吧，没害处。
边框、边距是html排版的灵魂，通过边距的适当使用可使页面整洁清爽不会糊成一团，注意内边距padding的使用一定得当，没有外部约束的话，padding会将整个元素撑大，影响排版，一般情况下，大的框架结构排列方面多使用外边距margin，细节上的调整如文字段落与边框间加点空隙就使用padding，这样排出来才美观一点。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
