表单+简单后台架构+元素样式来源与优先级
16lz
2022-03-21
一、表单
1.登录表单
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>登录表单</title></head><body><divstyle="height: 50px;background-color: rgb(8, 139, 226);text-align: center;color: rgb(233, 233, 233);"><h1>登录表单</h1></div><divstyle="text-align: center;margin: auto;width: auto;height: 850px;padding-top:300pxbackground-color: rgb(241, 241, 241);"><div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><form action=""><label for="name">登录账号：</label><inputtype="text"id="name"name="name"value=""placeholder="请输入账号"autofocusrequired/></div><div><label for="password">登录密码：</label><inputtype="password"id="name"name="name"value=""placeholder="至少8位数"autofocusrequired/></div><div><label for="password">邮箱 ： </label><inputtype="password"id="name"name="name"value=""placeholder="xxxx@xx.com"autofocusrequired/><br /><br /></div><div><button style="height: 40px; width: 100px">登录</button></div></div></form><div style="background-color: rgb(8, 139, 226); height: 50px"></div></body></html>
示例效果展示
2.单选、复选、下拉列表、文本域表单
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>问卷调查</title></head><body><divstyle="height: 50px;background-color: rgb(8, 139, 226);text-align: center;color: rgb(233, 233, 233);"><!-- 头部 --><h1>问卷调查</h1></div><!-- 中间 --><divstyle="text-align: left;margin: auto;width: auto;height: 850px;padding-top:300pxbackground-color: rgb(241, 241, 241);"><div><br /><br /><!-- 中间内容 --><form action=""><div><label for="women" >1. 你的性别 </label><br><!-- name=""属性必须一样 type=radio 这样才为单选 --><input type="radio" name="gender" id="men"/><label for="men">男</label><input type="radio" name="gender" id="women" checked /><label for="women">女</label></div><br><div><label for="rad">2. 你最喜欢的运动（单选）</label><br><input type="radio" name="gender" id=""/><label for="men">爬山</label><input type="radio" name="gender" id="rad" checked/><label for="men">骑自行车</label><input type="radio" name="gender" id=""/><label for="men">游泳</label></div><br><div><label for="rad">3. 你最喜欢吃的水果（多选）</label><br><input type="checkbox" name="gender1" id=""/><label for="men">西瓜</label><input type="checkbox" name="gender2" id="" /><label for="men">菠萝</label><input type="checkbox" name="gender3" id="rad" checked/><label for="men">苹果</label><input type="checkbox" name="gender3" id="rad" checked/><label for="men">梨子</label><div><br><label for="user">4. 你的年龄:</label><select name="" id="user"><option value="1">10-20岁</option><option value="2">20-30岁</option><option value="3" selected >30-40岁</option><option value="4" >40-50岁</option></select></div><div><br><label for="zzz">5. 投诉与建议</label><br><!-- 多行文本域 --><textarea name="" id="zzz" cols="30" rows="10" required></textarea></div></div><br><div></div></div><div><button style="height: 40px; width: 100px">提交</button></div></div></form><!-- 底部 --><div style="background-color: rgb(8, 139, 226); height: 50px"></div></body></html>
示例效果展示
二、后台简单架构
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>后台架构</title></head><body><divstyle="height: 50px;background-color: rgb(8, 139, 226);text-align: center;color: rgb(233, 233, 233);"><!-- 头部 --><h1>后台架构</h1></div><!-- 中间 --><div style="background-color: rgb(241, 241, 240); height: 840px"><!-- <a href="https://www.ifeng.com/" target="content">凤凰网</a><iframe src="" frameborder="1" name="content"></iframe> --><!-- 后台顶部 --><div class="header"><br /><b>后台管理</b> <span>amin</span><a href="">退出</a><hr /><div></div><!-- 左侧导航 --><div><ul class="class"><!-- li*5>a[herf='demo$ target="content"]{菜单项$} --><li><a href="/19期/作业/18day-1.html" target="content">菜单项1</a></li><li><a href="/19期/HTML/2-2链接与列表.html" target="content">菜单项2</a></li><li><a href="/19期/HTML/3-1input表单.HTML" target="content">菜单项3</a></li><li><ahref="/19期/HTML/3-2iframe内联框架标签与多媒体.HTML"target="content">菜单项4</a></li><li><a href="/19期/作业/18day-2.html" target="content">菜单项5</a></li></ul></div></div><!-- 右侧内容区 --><iframesrc=""frameborder="1"name="content"width="1200px"height="600px"></iframe><br /><br /></div><!-- 底部 --><div style="background-color: rgb(8, 139, 226); height: 50px"></div></body></html>
示例效果展示
三、元素样式来源、优先级
1 元素样式来源
- 代理样式/浏览器样式/默认样式
- 自定义样式 ，会覆盖默认样式
注：某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性
并非所有属性都可以继承，例如盒模型的属性就不能继承
总体来说，样式来源就二类
自定义的：装修
2 优先级
- 默认样式：继承自 html
- 自定义样式 1：行内样式 style 属性
- 自定义样式 2：文档样式/内部样式，style 标签
- 自定义样式 3：外部样式，css 文档
如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 所有默认样式清零 --><!-- <style>*{margin: 0;padding: 0;}/* </style> */ --><!-- 来源1：代理样式/浏览器样式/默认样式 --><h1>hello</h1><!-- 来源2：自定义样式 ，会覆盖默认样式--><h1 style="color: brown;">world</h1><!-- 来源3：书写顺序，写在后面的同名属性会覆盖前面的（优先级相同的情况下） --><div><!-- 某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性 --><h1 style="color: aquamarine;">php.cn</h1></div><div><a href="">php中文网</a></div><!-- 并非所有属性都可以继承，例如盒模型的属性就不能继承 --><!-- 总体来说，样式来源就二类1.默认的：毛坯2.自定义的：装修 --></body></html>
更多相关文章
- 表单,后台,元素样式的实例演示
- 登录表单+iframe后台架构+css优先级
- 1. 写一个登录表单,要求有邮箱,密码,登录按钮 2. 写一个简单后台
- HTML登录表单的实现
- 一个简单的登陆表单、后台框架及实例演示元素样式来源和优先级
- form表单提交、使用iframe编写后台简单布局、css样式分类与优先
- 实例演示元素来源与优先级
- 表单、内联框架以及CSS基础学习小结
- Android的TextView/EditText使用CharacterStyle&SpannableString