作业一:iframe标签的运用
独立静态运用
实例
<!DOCTYPE html> <html lang="en"> <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>内联标签</title> </head> <body> <h3>内联标签iframe</h3> <iframe src="https://www.qq.com" frameborder="10" width="1200" height="300"></iframe> <p>如果不定义宽高,iframe标签默认宽380,高190</p> <b>有些网站本身设定了防内联,比如php中文网,就会出现对应的错误提示。</b> <code>frameborder=0,没有边框,只有滚动框;frameborder=1,有边框,也有滚动框;这个属性是个布尔值;</code> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2。iframe与a标签的静态结合运用
实例
<!DOCTYPE html> <html lang="en"> <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>内联标签的拓展应用</title> </head> <body> <h4>a标签和iframe标签的结合运用——静态版A</h4> <a href="https://www.qq.com" target="main">腾讯</a> <a href="https://www.163.com" target="main">网易</a> <iframe frameborder="0" name="main" width="600" height="200" src="https://www.163.com"></iframe> <h4>导航栏中a与iframe标签的运用</h4> <style> a { text-decoration: none; } li { display: inline-block; border: 1px solid red; margin-top: 5px; margin-left: 10px; padding: 5px 20px; } ul { width: 90%; height: 120px; border: 1px solid black; } </style> <ul style="list-style-type: none;"> <h5>内部UL容器</h5> <li> <a href="https://www.qq.com" target="main">qq</a> </li> <li> <a href="https://www.163.com" target="main">163</a> </li> <li> <a href="https://www.qq.com" target="main">qq</a> </li> <li> <a href="https://www.163.com" target="main">163</a> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.iframe与a标签的JS动态结合运用——待续
作业未完,请勿批改!
作业二:CSS样式、选择器与盒模型
实例
<!DOCTYPE html> <html lang="en"> <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>盒模型及css选择器</title> </head> <body> <style> h4 { border: 1px solid blue; padding: 10px 20px; } .dd-juli { color: crimson; } .dd-weizi { color: indigo; } #dd-quanzhong { font-size: 10px !important; color: black; } #dd-last { color: indigo; } .dd-quan-a { color: blueviolet; } dd { color: crimson; } dd:last-child { color: green; } ul { width: 300px; height: 80%; border: 2px solid cornflowerblue; padding: 30px 50px; margin: 20px auto; margin-top: 30px; } </style> <h4>盒模型及CSS选择器——所见即盒子</h4> <ul> <h5>CSS样式设置优先级:</h5> <li> <dl>距离远近</dl> <dd class="dd-juli" style="color:darkblue;">1: 比如同一个元素的样式设置,距离该元素最近的样式有效,距离远的会被覆盖。</dd> <dd class="dd-juli">2: 这里另外的对比示例</dd> </li> <li> <dl>位置前后</dl> <dd class="dd-weizi">1: 位置后的样式覆盖位置前的样式;</dd> </li> <li> <dl>页面内外</dl> <dd>当前页面的样式覆盖加载的样式</dd> </li> <li> <dl>权重大小</dl> <dd id="dd-quanzhong" class="dd-quan-a" style="font-size: 20px;color:limegreen;">!important最重</dd> <dd class="dd-quan-a">其次是——元素内样式</dd> <dd>再其次是——ID选择器</dd> <dd>再其次是——CLASS选择器</dd> <dd class="dd-quan-a" id="dd-last">最后是元素选择器</dd> </li> </ul> <style> .dd-weizi { color: darkseagreen; } </style> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例