相关文档

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>

一些技巧

  1. 在将页面分区的时候可以通过设置border background 属性来确认大小
  2. 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的更多相关文章

  1. 第2章 微信小程序的基础组件学习

    小程序也可以用div+css进行排版. flex-direction排列方向,可以控制内部的成员的顺序,比如从左到右.从右到左.上下,纵向和横向. flex-wrap可以控制换行是如何去换行的,控制它 ...

  2. Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子

    原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...

  3. Flex移动应用程序开发的技巧和窍门(五)

    范例文件 flex-mobile-development-tips-tricks-pt5.zip This is Part 5 of a multipart series of articles th ...

  4. Tips and Examples Using FNDLOAD (DOC ID 735338.1)

    In this Document Goal Solution Some Tips About FNDLOAD Some sample examples Diagnostics & Utilit ...

  5. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  6. display:box和display:flex属性介绍

    1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面 ...

  7. OpenCASCADE Expression Interpreter by Flex & Bison

    OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...

  8. Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips （转）

    忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...

  9. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

随机推荐

  1. toFixed()与银行家舍入

    toFixed()与银行家舍入 一直在用toFixed()方法做浮点数的舍入取值,如果只是客户端展示数据是没有多大问题的,但是如果涉及到和后端互交,数据的精度可能会导致接口对接失败,当然了,涉及安全性 ...

  2. Java语言学习day27--8月02日

    今日内容介绍1.Eclipse常用快捷键操作2.Eclipse文档注释导出帮助文档3.Eclipse项目的jar包导出与使用jar包4.不同修饰符混合使用细节5.辨析何时定义变量为成员变量6.类.抽象 ...

  3. selenium模块跳过用户名密码验证码输入，加载浏览器标签和cookie，进行翻页爬虫多页动态加载的数据（js)

    能解决登陆一次后,之后不需要二次登陆的动态加载数据,网页保存的cookie和标签,加入到selenium自动化测试浏览器中 1 from selenium import webdriver 2 imp ...

  4. 6.2 计划任务crond

    创建.编辑计划任务的命令为crontab -e,查看当前计划任务的命令为crontab -l,删除某条计划任务的命令为crontab -r. 参数 作用 -e 编辑计划任务 -u 指定用户名称 -l ...

  5. 登录口爆破之ldap的md5加密、验证码认证

    ldap的md5加密配合autoDecoder插件.captcha-killer-modified插件 autoDecoder例 需要传入的数据包为: {"username":&q ...

  6. MKL库奇异值分解(LAPACKE_dgesvd)

    对任意一个\(m\times n\)的实矩阵,总可以按照SVD算法对其进行分解.即: \[A = U\Sigma V^T \] 其中\(U.V\)分别为\(m\times m.n\times n\)的 ...

  7. jquery 动态 给select赋值

    <div class="right_left"> <select id="supply"> <option>请选择供应商&l ...

  8. 注解，lombok

    使用注解开发 UserMapper public interface UserMapper { @Select("select * from db4.user") List< ...

  9. 溢出属性，定位，z-index，JS

    溢出属性 1.visible(默认值):使溢出内容展示 2.hidden:隐藏溢出内容且不出现滚动条 3.scroll:隐藏溢出容器的内容,溢出的内容可以通过滚动呈现 4.auto:与scroll没啥 ...

  10. flask配置文件、路由设置、模板语法、请求与响应、session使用、闪现功能(flash)

    今日内容概要 flask 配置文件 flask 路由系统 flask模板语法 请求与相应 session 闪现(flash翻译过来的) 内容详细 1.flask 配置文件 # django ---&g ...