CSS简介与盒模型 7月3日作业
一、iframe框架的基本应用
<a href="https://www.baidu.com" target="dcp">百度搜索</a>
<iframe srcdoc="此页面为空" name="dcp" frameborder="0"></iframe>
1. src=""，将网页地址里的内容加载到iframe指定位置
2. srcdoc=""，在框架内输出写好html内容，如：srcdoc="<h1>Hello world!<h1>"
3. name="",将name中的命名与a链接里的target属性绑定，当点击a链接时，将链接内容输出到iframe框架内部
4. width="" 宽，height=""高， frameborder=""边框
二、css样式
内联样式：style=""
内部样式：<style></style>
外部样式：<link rel="stylesheet" href="./style.css">
css优先级
内部样式>内联样式>外联样式
css选择器：
1. id选择器>class选择器>tag标签选择器
实例
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<!-- 网页编码 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>大兔子作业</title>
<!-- 内部css -->
<style>
body {padding: 0; margin: 0;}
.top {wdith: 100%; max-width: 800px; margin: 0 auto;}
.top-head {width: 100%; text-align: center; height: 40px; line-height: 40px; margin: 20px 0;}
.top-head a {width: auto; padding: 0 20px; margin: 0 20px; background-color: #0094ff; color: #fff; font-size: 16px; display: inline-block; text-decoration: none; line-height: 40px;}
.top-con {width: 100%; height: auto; border: 3px solid #0094ff;}
.top-con iframe {width: 100%; height: 500px;}
</style>
<!-- 外部css -->
<!-- <link rel="stylesheet" href="./style.css"> -->
<style>
.bottom {background-color: #4cff00; margin: 20px auto; width: 300px; height: 300px; overflow: hidden;}
.bottom-con {padding: 20px; border: 20px solid #0094ff; margin: 10px; background-color: #ff0000; border-radius: 50%; width: 200px; height: 200px;}
</style>
</head>
<body>
<h1 style="font-size: 24px; text-align: center">CSS简介与盒模型 7月3日作业</h1>
<!-- a标签 -->
<div class="top">
<div class="top-head">
<a href="https://www.baidu.com" target="dcp">百度搜索</a>
<a href="https://blog.datuzi.top" target="dcp">大兔子博客</a>
</div>
<div class="top-con">
<iframe srcdoc="此页面为空" name="dcp" frameborder="0"></iframe>
</div>
</div>
<!-- 内联css -->
<div style="width: 100%; max-width: 800px; margin: 0 auto; margin: 20px auto; position: relative;">
<img src="https://blog.datuzi.top/template/datuzi/img/bg.jpg" alt="背景图" style="width: 100%; height: auto" />
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" alt="大兔子" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; margin: auto; width: 100px; height: 100px; border-radius: 50%;" />
</div>
<!-- 内外边距 -->
<div class="bottom">
<div class="bottom-con"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
