<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>iframe标签的使用</title> </head> <body> <div style="float: left; margin-right:10px"> <ul> <li><a href="https://www.163.com" target="main">网易</a></li> <li><a href="https://www.sina.com" target="main">新浪</a></li> <li><a href="https://www.baidu.com" target="main">百度</a></li> <li><a href="https://www.jd.com" target="main">京东</a></li> </ul> </div> <iframe src="https://www.taobao.com" frameborder="0" name="main" width="400" height="600" style="float: left"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
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> <link rel="stylesheet" href="style1.css"> <style> p { color: darkorchid } </style> </head> <body> <p>我爱学习 学习使我快乐</p> <p>我爱学习 学习使我快乐</p> <p style="color: darkorange">我爱学习 学习使我快乐</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
css的id, class与标签选择器的使用规则
<!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的id, class与标签选择器的使用规则</title> <style> #aa { color: #f00 } .yy { color: darkturquoise } p { color: goldenrod } </style> </head> <body> <p id="aa" class="yy">阿萨德噶数据库老大哥</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
盒模型的五大要素
<!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> <style> .box1 { background-color: goldenrod; border: 2px saddlebrown solid; width: 300px; height: 500px; } .box2 { background-color: skyblue; margin: 50px 20px; padding: 10px 20px 30px 40px; border: 2px dashed #f00; } </style> </head> <body> <div class="box1"> <div class="box2">php中文网原创视频:《天龙八部》公益php培训系列课程汇总! php中文网《玉女心经》公益***系列课程汇总 令人期待的PHP7.4 正则表达式语法教程(含在线测试工具) 韩天峰:关于PHP程序员技术职业生涯规划 四个优秀php原生开发实战视频教程推荐(必学) PHPConChina 2019 参会感悟</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例