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属性.它对于那些特殊布局非常不方便 ...
随机推荐
- go - 内存分配机制详解
一般程序的内存分配,从高位到低位依次为 全局静态区:用于存储全局变量.静态变量等:这部分内存在程序编译时已经分配好,由操作系统管理,速度快,不易出错. 栈:函数中的基础类型的局部变量:由程序进行系统调 ...
- vue学习day02
vue 指令 1. 内容渲染指令 v-text 指令的缺点:会覆盖元素内部原有的内容! {{ }} 插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容! v-html 指令的作用: ...
- Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- PDCA循环——快速提升软件质量的必备工具
近年来,软件项目的规模及其复杂性正在以空前的速度增长,互联网用户市场庞大,互联网公司和相应的软件产品层出不穷.快速响应需求变化往往是互联网行业的常态,软件产品的快速开发迭代对于公司迅速占领市场.抢占商 ...
- 短信登录与注册接口、前端所有方式登录注册页面、redis数据库介绍与安装
今日内容概要 短信登陆接口 短信注册接口 登陆注册前端 redis介绍和安装 内容详细 1.短信登陆接口 在视图类 user/views.py中修改并添加: from .serializer impo ...
- python数据可视化-matplotlib入门(5)-饼图和堆叠图
饼图常用于统计学模块,画饼图用到的方法为:pie( ) 一.pie()函数用来绘制饼图 pie(x, explode=None, labels=None, colors=None, autopct=N ...
- 《Streaming Systems》第一章: Streaming 101
数据的价值在其产生之后,将随着时间的流逝逐渐降低.因此,为了获得最大化的数据价值,尽可能实时.快速地处理新产生的数据就显得尤为重要.实时数据处理将在越来越多的场景中体现出更大的价值所在 -- 实时即未 ...
- Intel CPU平台和架构介绍
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 服务器主板上数据传输流依次为CPU .内存.硬盘和网卡, ...
- 公司为什么要使用OKR，目的是什么？
原创不易,求分享.求一键三连 站在公司角度,会有一些诉求: 想知道每个人在干什么,干得怎么样: 想知道如何把更多的人卷起来: 人是不想被管束的,无论是想"度量我"还是想卷我,都是我 ...
- SSO 方案演进
背景介绍 随着业务与技术的发展,现今比以往任何时候都更需要单点登录 SSO 身份验证. 现在几乎每个网站都需要某种形式的身份验证才能访问其功能和内容. 随着网站和服务数量的增加,集中登录系统已成为一种 ...