登录表单,简单后台架构,元素样式来源与优先级

登录表单

代码

<form action="" method="post">
   <div><label for="name">用户名：</label><input type="text" name="username" id="name" placeholder="请输入用户名" required></div>
   <div><label for="psw">密码：</label><input type="password" name="password" id="psw" placeholder="请输入密码" required></div>
   <div><label for="email">邮箱：</label><input type="email" name="email" id="email" placeholder="请输入邮箱" required></div>
   <div><button>提交</button></div>
</form>

效果图

简单后台架构

代码

<div class="header">
   <h1>管理后台</h1>
   <div>
     <span>xiaoliu</span>
     <a href="">退出</a>
   </div>
</div>
<ul class="nav">
  <li><a href="demo1.html" target="content">菜单项1</a></li>
  <li><a href="demo1.html" target="content">菜单项2</a></li>
  <li><a href="demo1.html" target="content">菜单项3</a></li>
  <li><a href="demo1.html" target="content">菜单项4</a></li>
</ul>
<iframe src="" frameborder="3" name="content"></iframe>

效果图

元素样式来源与优先级

代码

<!-- 来源1: 代理样式/浏览器样式/默认样式 -->
<h2>Hello</h2>
<!-- 来源2: 自定义样式, 会覆盖默认样式 -->
<h2 style="color: red">world</h2>
<!-- 来源3: 书写顺序,写在后面的同名属性会覆盖前面的(优先级相同的情况下) -->
<div>
<!-- 某些属性具有继承特征,例如颜色,字号,字体,子元素会继承父元素的同名属性 -->
<h1 style="color: blue">php.cn</h1>
</div>
<!-- 样式优先级：行内样式,文档样式,外部样式 -->
<!-- 1. 默认样式: 继承自html -->
<!-- 2. 自定义样式1: 行内样式, style属性 -->
<!-- 3. 自定义样式2: 文档样式/内部样式, style标签 -->
<!-- 4. 自定义样式3: 外部样式, css文档 link引入/import-->

效果图