简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 后台布局与html元素的样式来源与优先级
Blogger Information
Blog 16
fans 0
comment 1
visits 5765
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
后台布局与html元素的样式来源与优先级
P粉890456325
Original
338 people have browsed it

0117作业

作业内容：

1. 用<iframe>写一个简单的后台布局, 注意a.target与iframe.name的配合




  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="static/css/admin.css">
  9. </head>
  10. <body>
  11.     <!-- 顶部 logo 状态 -->
  12.     <header>
  13.         <h1>网站后台管理系统<small>(v1.0)</small></h1>
  14.         <section>
  15.             <em>admin</em>
  16.             <button onclick="logout()">退出</button>
  17.         </section>
  18.     </header>
  19.     <!-- 左侧 链接 操作入口 a:target="content"和 iframe:name="content" 必须一致，才能实现显示在主体页面上-->
  20.     <nav>
  21.         <a href="../0117/demo1.html" target="content">课程表</a>
  22.         <a href="../0117/dome2.html" target="content">用户登录</a>
  23.         <a href="../0117/dome3.html" target="content">用户注册</a>
  25.     </nav>
  26.     <!-- 主体  变化的是主体 src="inc/default.html"和srcdoc="<p style='color:red'>请点击城市名称</p>"区别是链接和代码-->
  27.     <iframe src="inc/default.html" frameborder="0" name="content"></iframe>
  28.     <script>
  29.         function logout() {
  30.           return confirm('是否退出?') ? alert('退出成功') : false
  31.         }
  32.     </script>
  33. </body>
  34. </html>

2. 实例演示html元素的样式来源与优先级(要有图示)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引用外部css样式文件 -->
  9.     <link rel="stylesheet" href="static/css/style.css">
  10. </head>
  11. <body>
  12.       <style>
  13.        /* 指令添加外部css文件 */
  14.         /* @import url('static/css/style.css'); */
  15.         h1{
  16.             color: blueviolet;
  17.         }
  18.         /*
  19.         行内样式高于》文档样式高于》外部样式
  21.         需要自定义元素 选择器 指定样式规则
  23.         文档样式规则如下
  24.         h1选择器 
  25.         样式声明如下
  26.         {
  27.             color: blueviolet;
  28.             font-weight: normal;
  29.         }
  30.         */
  31.    </style>
  33.    <h1 style="color: red;">hello</h1>
  34. </body>
  35. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：很好，继续加油，下次可以添加一些自己的总结
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！