网站首页 > 技术文章 正文
1、W3C标准
万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南。 http://www.w3school.com.cn/
规范是一种态度
2、页面布局
2.1 布局元素
position定位:
- absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
- static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- inherit 规定应该从父元素继承 position 属性的值。
display属性:
- none 此元素不会被显示。
- block 此元素将显示为块级元素,此元素前后会带有换行符。
- inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
- inline-block 行内块元素。(CSS2.1 新增的值)
- list-item 此元素会作为列表显示。
- table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
- inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
- table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
- inherit 规定应该从父元素继承 display 属性的值。
float浮动:
- left 元素向左浮动。
- right 元素向右浮动。
- none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
- inherit 规定应该从父元素继承 float 属性的值。
就像写作一样,文档流从上到下、从左到右排列元素。float 浮动(清除浮动下置div 属性clear:both)和绝对定位(position:absolute或position: fixed)会脱离文档流。不占用文档空间。
如下图,
通常情况下横向排列用float,相对元素固定位置用position:relative和position: absolute;悬浮于窗口图标用position:fixed。这样就愉快的完成页面的布局啦
2.2 元素的盒模型
盒模型油里到外分为 元素的width 和height区 、
padding(内边距)区域,padding:上 右 下 左
border (边界), border:1px solid #ccc;
margin(外边距)区域,margin:上 右 下 左
布局元素结合margin and padding,就能够布出间距适中的页面咯
3、浏览器页面调试
作为一名后端开发,曾有幸和一位前端妹纸合作,观其调试工作,后凡涉及前端领域皆自处而为,所学即所用,呜呼哀哉
调试一般选用google浏览器,适用于开发者的浏览器
F12出现DevTools
页面元素选择
通过元素选择来快捷查看元素的基本属性,可以事半功倍哟
有想要学习前端或者转行前端的朋友可以私信小编“学习”,前端开发全套教学资料,大神带你学前端
- 上一篇: 前端网页web开发大神总结的HTML标签-表单元素
- 下一篇: 正则表达式,这篇看完就够了
猜你喜欢
- 2025-05-23 浅谈3种css技巧——两端对齐
- 2025-05-23 JSONP安全攻防技术
- 2025-05-23 html5学得好不好,看掌握多少标签
- 2025-05-23 Chrome 调试时行号错乱
- 2025-05-23 本文帮你在Unix上玩转C语言
- 2025-05-23 Go 中的安全编码 - 输入验证
- 2025-05-23 31个必备的python字符串方法,建议收藏
- 2024-09-22 正则表达式,这篇看完就够了
- 2024-09-22 前端网页web开发大神总结的HTML标签-表单元素
- 2024-09-22 Shell脚本学习笔记
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 601℃几个Oracle空值处理函数 oracle处理null值的函数
- 593℃Oracle分析函数之Lag和Lead()使用
- 581℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 578℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 573℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 566℃【数据统计分析】详解Oracle分组函数之CUBE
- 552℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 547℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)