简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 简单的后台布局与元素的样式优先级
Blogger Information
Blog 7
fans 0
comment 0
visits 2285
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
简单的后台布局与元素的样式优先级
阿辉
Original
366 people have browsed it

作业/20230117

一、简单的后台布局

演示图：

代码：

  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.   </head>
  9.   <body>
  10.     <!-- 顶部栏区域 -->
  11.     <header>
  12.       <h1>商城管理系统<small></small></h1>
  13.       <div>
  14.         <em>Administrator（超级管理员）</em>
  15.         <button>注销登录</button>
  16.       </div>
  17.     </header>
  19.     <!-- 主体内容区域 -->
  20.     <tbody>
  21.     <nav>
  22.       <a href="index.html" target="admin">首页</a>
  23.       <a href="menu.html" target="admin">菜单管理</a>
  24.       <a href="commodity.html" target="admin">商品管理</a>
  25.       <a href="order.html" target="admin">订单系统</a>
  26.       <a href="member.html" target="admin">会员系统</a>
  27.       <a href="supplier.html" target="admin">供货商系统</a>
  28.       <a href="addadministrator.html" target="admin">添加管理员</a>
  29.     </nav>
  31.     <!-- 
  32.         iframe内联框架元素 
  33.         src属性=需访问的页面
  34.         frameborder=边框大小
  35.         name与a标签的target连接相同
  36.         width+height=宽+高
  37.       -->
  38.     <iframe src="index.html" frameborder="1" name="admin" width="500" height="450"></iframe>
  39.     </tbody>
  41.   </body>
  42. </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.     <!-- 导入外部样式 -->
  9.     <link rel="stylesheet" href="style.css">
  10. </head>
  11. <!-- 文档样式 -->
  12. <style>
  13.     h1 {
  14.         color: chartreuse;
  15.         font-weight: normal;
  16.         font-size: 18px;
  17.         border-style: solid;
  18.         border-color: violet;
  19.     }
  20. </style>
  22. <body>
  23.     <!-- 标签 行内样式 -->
  24.     <h1 style="color: blue; font-weight: normal;">打工人，打工魂，打工人上人</h1>
  25. </body>
  26. </html>

外部样式css

  1. h1 {
  2.     color: darkorange;
  3.     font-weight: normal;
  4. }

优先级: 行内样式 > 文档样式 > 外部样式

总结

1.本次学习，收获了挺大，后台布局，使用iframe标签可以实现一个简单后台，重点的是，a.target=iframe.name相连，链接就可以跳转到iframe内

2.了解了CSS的样式权重优先级，优先级高的会覆盖上一个的样式。

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！