iframe案例来练习与HTML样式基础
iframe案例来练习与HTML样式基础
iframe网站后台
<!DOCTYPE html><htmllang=“en”><head><metacharset=“UTF-8”/><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”/><metaname=“viewport”content=“width=device-width, initial-scale=1.0”/><title>iframe: 后台案例练习</title><style>*{ margin:0; padding:0; box–sizing:bor青狐资源网wcqh.cnder–box;} body { height:100vh; width:100vw; display: grid; grid–template–columns:12em1fr; grid–template–rows:8em1fr;} body header { display: flex; background–color: dodgerblue;/* 设置header容器的宽度，它跨越了2列 */ grid–column–end: span 2; line–height:8em; padding:020px;} body header hgroup { display: flex; color:#fff;}body header hgr青狐资源网wcqh.cnoup h1{ font–size:3em;} body header hgroup h2 { font–size:1em; margin–left:20px;} body header p { margin–left:auto; color:#fff;} body header p button { margin–left:10px; padding:4px; border: none;} body nav { background–color:#eee; border–right:1px solid #333; padding:10px;} body iframe { width:100%; height:100%; border: none;青狐资源网wcqh.cn} body nav ul li { list–style–type: none;} body nav ul li a { display: block; padding:0.5em0; border–bottom:1px solid #555; text–align: center; text–decoration: none;}</style></head><body><!– 顶部商标与状态 –><header><hgroup><h1>LOGO</h1><h2>网站后台管理系统 (1.1v)</hgroup><p><em>admin</em><buttononclick=“log青狐资源网wcqh.cnout()“>退出登录</button></p></header><!– 左侧导航 –><nav><ul><li><ahref=“#”target=“content”>item1</a></li><li><ahref=“#”target=“content”>item2</a></li><li><ahref=“#”target=“content”>item3</a></li><li><ahref=“#”target=“content”>item4</a></li><li><ahref=“#”target=“content”>item5</a></li><li><ahref=“#”target青狐资源网wcqh.cn=“content”>item6</a></li></ul></nav><!– iframe动态内容部分 –><iframesrc=“inc/default.html”name=“content”></iframe><!– JS代码 –><script>function logout(){return confirm(“是否退出?”)? alert(“退出成功”):false;}</script></body></html>效果预览：
元素样式来源
元素样式来两大来源：预置样式、自定义样式
一、预置样式我们可以在浏览器中查看如下：
二、自定义样式同样用h1标题示例加背景色如下：
元素样式优先级
元素样式青狐资源网wcqh.cn写在不同的地方优先级会有所区别：
写在元素自身的style属性里叫做行间样式写在本文档里的style标签里的文档样式写在外部CSS文档里的外部样式它们的优先级为：行间样式 > 文档样式 > 外部样式 > 预置样式 如下图示：
外部样式覆盖了预置样式：外部样式 > 预置样式
文档样式又覆盖了外部样式：文档样式 > 外部样式 > 预置样式
行间样式覆盖了所有样式:行间样式 > 文档样式 > 外部样式 > 预置样式
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容