HTML\Flex tips
相关文档
HTML：https://www.w3school.com.cn/html/index.asp
bootstrap-css: https://v3.bootcss.com/css/#forms
HTML总体介绍
<!DOCTYPE html>
<html>
<head>
<!-- 编码 -->
<meta charset="UTF-8">
<!-- 引入相关的css和js-->
<link href="" rel="stylesheet">
<script src="" ></script>
<!-- 标题 -->
<title>Tile</title>
</head>
<!-- 页面主体 -->
<body>
<!-- 利用div将功能分区 -->
<div>
</div>
</body>
<script>
// 可将特有的js写在这，但一般在另一个文件，在head中引用
</script>
<style>
/* 页面样式、和js相同 */
</style>
</html>
一些技巧
- 在将页面分区的时候可以通过设置
borderbackground属性来确认大小 - width和height可以用百分之多少去规范大小
常用布局: Flex布局
flex 布局又称之为 弹性布局,使用了 display: flex 属性的标签，我们称之为 容器，它的所有子元素自动成为容器成员，我们称之为 项目 。
示例代码如下:
<nav class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</nav>
<style>
.box{
display: flex;
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
div{
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>
结果如下:
容器常用属性
flex-direction // 控制主轴方向
justify-content // 设置主轴方向对齐方式
align-items // 控制侧轴方向对齐方式
align-content // 当侧轴内容多行时，设置侧轴对齐方式
flex-wrap // 控制项目是否允许换行
flex-flow // 是flex-direction 和 flex-wrap 的简写
HTML\Flex tips的更多相关文章
- 第2章 微信小程序的基础组件学习
小程序也可以用div+css进行排版. flex-direction排列方向,可以控制内部的成员的顺序,比如从左到右.从右到左.上下,纵向和横向. flex-wrap可以控制换行是如何去换行的,控制它 ...
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...
- Flex移动应用程序开发的技巧和窍门(五)
范例文件 flex-mobile-development-tips-tricks-pt5.zip This is Part 5 of a multipart series of articles th ...
- Tips and Examples Using FNDLOAD (DOC ID 735338.1)
In this Document Goal Solution Some Tips About FNDLOAD Some sample examples Diagnostics & Utilit ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- display:box和display:flex属性介绍
1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面 ...
- OpenCASCADE Expression Interpreter by Flex & Bison
OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...
- Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips （转）
忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
随机推荐
- Java语言学习day29--8月04日
今日内容介绍1.Object2.String3.StringBuilder ###01API概念 * A:API(Application Programming Interface) * 应用程序编程 ...
- Java第十四周作业
2.设计2个类,要求如下:(知识点:类的继承 方法的覆 盖) [必做题] 2.1 定义一个汽车类Vehicle, 2.1.1 属性包括:汽车品牌brand(String类型).颜色clr (Strin ...
- Java数组-2022年4月17日
目录 数组 数组Array 数组的常见异常 数组的遍历 数组的扩容 数组类型的返回值 可变长数组 排序算法 二维数组 测试代码 数组 数组Array ArrayList概念:一个连续的空间,存储多个相 ...
- Java中时间类中的Data类与Time类
小简博客 - 小简的技术栈,专注Java及其他计算机技术.互联网技术教程 (ideaopen.cn) Data类 Data类中常用方法 boolean after(Date date) 若当调用此方法 ...
- 一个实战让你搞懂Dockerfile
摘要 在认识Dockerfile的基础功能之后,即一个用基础镜像来构建新镜像的文本文件,就需要在实际工作中使用其灵活便利的操作来提升我们的工作效率了,这里演示在Tomcat里运行一个程序的过程,以此来 ...
- 论文解读（GROC）《Towards Robust Graph Contrastive Learning》
论文信息 论文标题:Towards Robust Graph Contrastive Learning论文作者:Nikola Jovanović, Zhao Meng, Lukas Faber, Ro ...
- docker容器的持久化存储:Volume
独立于docker容器的持久化存储: 法(1):自动将服务器文件夹挂载到容器内部文件夹/usr/share/nginx/html,这样只修改服务器文件夹下的内容即可对应修改容器内部文件夹的内容 将服务 ...
- 车辆跟随滑模控制的python实现
上一篇文章一个汽车跟踪问题的滑模控制实例,已经从理论上证明了可以使用滑模变结构控制策略来解决汽车跟踪问题. 下面分别采用指数趋近律.等速趋近律.准滑模控制的方法完成车辆跟随问题的仿真 import m ...
- SHCTF web题
第一题:直接查看robots.txt,得到flag 第二题:他的题的意思通过get方式一个字符一个字符去猜如果对的话他下面的小方格就会亮起,用python写个脚本就过了 第三题:也是猜flag 解题方 ...
- 手脱FSG（2.0）
1.查壳 2.x32dbg脱壳 在第二个xchg处使用ESP定律脱壳: 由于FSG壳特性,在跳转后位置向上查找,找到js\jne\jmp,jmp就是OEP位置: 在此处使用工具进行脱壳: 完成! 3. ...