相关文档

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. go sync.map源码解析

    go中的map是并发不安全的,同时多个协程读取不会出现问题,但是多个协程 同时读写就会出现 fatal error:concurrent map read and map write的错误.通用的解决 ...

  2. android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面

    android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面 首先写添加到数据库 在DBOpenHelper中添加创建记账表的语句 //创建记账表 sql = "c ...

  3. partTwo自动出题程序

    需求介绍 一家软件公司程序员二柱的小孩上了小学二年级,老师让家长每天出30道四则运算题目给小学生做. 二柱立马就想到写一个小程序来做这件事. 这个事情可以用很多语言或者工具来实现: Excel, C/ ...

  4. PyTorch环境配置

    PyTorch环境配置 本文档用于记录PyTorch环境配置过程中的要点. PyTorch环境配置 安装Miniconda 安装PyTorch 配置远程开发工具 基于CUDA的张量 导入警告问题 参考 ...

  5. C#接入SMTP邮件服务

    我的个人博客 引入SMTP服务包 //引入邮件服务包using System.Net.Mail;using System.Net; 这两个引用用于C#接入邮件的SMTP服务 控件页面 定时器 为了给用 ...

  6. C#/VB.NET 获取Excel中图片所在的行、列坐标位置

    本文以C#和vb.net代码示例展示如何来获取Excel工作表中图片的坐标位置.这里的坐标位置是指图片左上角顶点所在的单元格行和列位置,横坐标即顶点所在的第几列.纵坐标即顶点所在的第几行.下面是获取图 ...

  7. Djang内置分页和自定义分页

    内置分页 views from django.core.paginator import Paginator,Page,PageNotAnInteger def DJs_pages(request): ...

  8. 聊聊如何在华为云IoT平台进行产品开发

    摘要:华为云物联网平台承载着南北向数据互通的功能职责. 本文分享自华为云社区<如何基于华为云IoT物联网平台进行产品开发>,作者: Super.雯 . 华为云物联网平台承载着南北向数据互通 ...

  9. Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    错误描述 在DBeaver执行DDL语句时报错:SQL 错误 [1293] [HY000]: Incorrect table definition; there can be only one TIM ...

  10. burp通过条件竞争上传文件

    一·何为条件竞争 现代框架更能抵御此类攻击.他们通常不会将文件直接上传到文件系统上的预期目的地.相反,他们采取了预防措施,例如首先上传到临时的沙盒目录并随机命名以避免覆盖现有文件.然后,他们对这个临时 ...