简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html与css基础入门：后台管理系统和样式优先级
Blogger Information
Blog 7
fans 0
comment 0
visits 2767
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与css基础入门：后台管理系统和样式优先级
风残念北的博客
Original
468 people have browsed it

1.后台管理系统

1.1知识点

利用iframe标签的name="city"属性与a标签的target="city"属性进行绑定从而实现内联框架效果。

1.2效果展示

PHP中文网

1.3代码演示

  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. </head>
  9. <body>
  10.     <!-- 1.头部区域 -->
  11.     <header>
  12.         <h1>后台管理系统<small>V1.0</small></h1>
  13.         <em>admin</em>
  14.         <button>退出</button>
  15.     </header>
  16.     <!-- 2.侧边区域 -->
  17.     <div>
  18.         <nav>
  19.             <a href="https://j.map.baidu.com/79/M" target="city">博乐市</a>
  20.             <a href="https://j.map.baidu.com/61/g" target="city">北京市</a>
  21.             <a href="https://j.map.baidu.com/25/h" target="city">深圳市</a>
  22.             <a href="https://j.map.baidu.com/45/g" target="city">上海市</a>
  23.         </nav>
  24.     </div>
  25.     <!-- 3.主体区域 -->
  26.     <iframe srcdoc="<p>首页管理</p>" frameborder="0" name="city" width="500" height="300"></iframe>
  27. </body>
  28. </html>

2.样式来源与优先级

2.1知识点

行内样式>文档样式>外部样式>预置样式

2.2效果展示

样式优先级演示

2.3代码演示

  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>样式优先级演示</title>
  8.     <link rel="stylesheet" href="./static/style.css">
  9. </head>
  10. <body>
  11.     <style>
  12.         h1 {
  13.             font-weight: normal;
  14.         }
  15.     </style>
  17.     <h1 style="color:red">PHP中文网</h1>
  18.     <h1>Hello World</h1>
  19. </body>
  20. </html>

2.3.1

style.css代码演示

  1. h1 {
  2.     color:lightblue;
  3. }
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！