常用的布局方式：

static：静态定位（默认），什么都不用管，元素会按照默认顺序排列，排不下是会默认换行
relative：相对定位（同一层），相对于某一个元素进行定位
fixed：绝对定位，指定位置
absolute：相对于浏览器的绝对定位和fixed类似

文件关系：

static定位：

css里面写入内容：static定位方式，定位到的显示为红色

.static {
    position: static;
    background-color: red;
}

html里面写入内容：引入css，并加一个标签，设置static属性

<!DOCTYPE html>
<html lang= "en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href= "/static/position.css">
</head>
<body>
    <label class="static">这里是static定位</label>
    <label class="relative">这里是relative定位</label>
    <label class="fixed">这里是fixed定位</label>
    <label class="absolute">这里是absolute定位</label>
</body>
</html>

主脚本里面导入html

访问，由于另外3个标签没有在css里面设置定位方式，所以会默认排序

relative定位

在css里面加入，设置为相对于顶部20个像素偏移，相对于左侧20个像素偏移（相对于元素）

.relative {
position: relative;
    top: 20px;
    left: 20px;
    background-color: green;
}

fixed定位：

在css里面加入，相对于顶部偏移50个像素，相对于左侧偏移50个像素（相对于body的边框）

.fixed {
    position: fixed;
    top: 50px;
    left: 50px;
    background-color: yellow;
}

absolute定位方式：

相对于顶部50个像素偏移，相对于左侧100个像素偏移

实现一个计算器的布局和美化

目录结构

在templates下建一个html，并写入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        .color {
            color:orange;
        }
        input {
            width:50px;
            height:50px;
        }
    </style>
</head>
<body>
    <p id="test">0</p>
    <table>
        <tr>
            <td ><input class="color" type="button" value="("></td>
            <td><input class="color" type="button" value=")"></td>
            <td><input class="color" type="button" value="%"></td>
            <td><input type="button" value="C"></td>
        </tr>
        <tr>
            <td><input type="button" value="7"></td>
            <td><input type="button" value="8"></td>
            <td><input type="button" value="9"></td>
            <td><input class="color" type="button" value="÷"></td>
        </tr>
        <tr>
            <td><input type="button" value="4"></td>
            <td><input type="button" value="5"></td>
            <td><input type="button" value="6"></td>
            <td><input class="color" type="button" value="×"></td>
        </tr>
        <tr>
            <td><input type="button" value="1"></td>
            <td><input type="button" value="2"></td>
            <td><input type="button" value="3"></td>
            <td><input class="color" type="button" value="-"></td>
        </tr>
        <tr>
            <td><input type="button" value="0"></td>
            <td><input class="color" type="button" value="."></td>
            <td><input class="color" type="button" value="＝"></td>
            <td><input class="color" type="button" value="+"></td>
        </tr>
    </table>
</body>
</html>

渲染到路由

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route('/calc')
def calc():
    return render_template('calc.html')

if __name__ == '__main__':
    app.run(
        host='0.0.0.0',
        port=8888,
        debug=True,
    )

访问

至此，计算器的布局完成，但是未实现计算

测开之路三十八：css布局之定位的更多相关文章

  1. 测开之路三十六：常用的css选择器

    在static下新建一个css,并写入内容 /*标签选择器,label标签的颜色为红色*/label {color: red;} /*.代表类选择器,绿色*/.test {color: green;} ...

  2. 测开之路三十五：css引入

    CSS是一种定义样式结构,如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件.无论哪一种方式,样式单包含将样式应用到指定类型 ...

  3. 测开之路四十八：Django之重定向与cookie

    基础配置与上一篇一致 404错误 定义一个error页面 <!DOCTYPE html><html lang="en"><head> <m ...

  4. 测开之路七十八：shell之函数和参数

    函数 function function_name(){    statement1    Statement2    ....    statementn} function_name $var1  ...

  5. 测开之路三十九：js基础

    js的两种使用方式 第一种使用方式:单独写js文件 在static下新建一个js文件并写入内容 alert('这是一个弹窗'); 在html文件里面,用script标签引入 <script sr ...

  6. 测开之路三十四：html常用标签

    网页的结构: HTML:超文本标记语言是迄今为止网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链 ...

  7. 测开之路三十二：Flask基础之错误与重定向

    错误处理,框架默认的错误为:not Found 可以捕获,并自定义 准备一张自定义图片,放在static文件夹下,并在template下创建一个html文件,引用该图片 捕获404状态,返回自定义页面 ...

  8. 测开之路三十：Flask基础之jinja2模板继承

    实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...

  9. 测开之路二十八：Flask基础之静态资源

    Flask默认的存放静态资源的目录名为static 在工程下创建一个文件夹(与脚本同级) 如果想命名为其他名字,则在声明app的时候要初始化,如: 准备一张图片放在static下,返回的内容加上img ...

随机推荐

  1. servlet--三大域

    requset  \ session   servletContext  application

  2. 【报错】The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

    提交表单之后, 报错页面显示: HTTP Status 404 – 未找到 Type Status Report 消息 Not found 描述 The origin server did not f ...

  3. spring-第八篇之容器中的bean的生命周期

    1.容器中的bean的生命周期 spring容器可以管理singleton作用域的bean的生命周期,包括bean何时被创建.何时初始化完成.何时被销毁.客户端代码不能控制该类型bean的销毁.spr ...

  4. 如何优雅的实现DML批量操作

    如何优雅的实现DML批量操作(转载) 昨天处理了一个业务同学的数据需求,简单来说就是对一张大表做一下数据清理,数据量在8千万左右,需要保留近一个月的数据,大概是400万左右. 对于数据的删除处理,尤其 ...

  5. StatusStrip 分类： C# 2015-07-23 11:58 2人阅读 评论(0) 收藏

    通过StatusStrip显示窗体状态栏 同时将状态栏分成三部分 居左边显示相关文字信息 中间空白显示 居右边显示时间信息 1.创建窗体及添加StatusStrip   默认StatusStrip名称 ...

  6. Gradle中的GroupID和ArtifactID指的是什么？

    GroupId和ArtifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找. GroupId一般分为多个段 ...

  7. Android 虚线实现绘制 - DashPathEffect

    前言: 通过view绘制虚实线,采用Android自带API--DashPathEffect.具体使用请参考更多的链接,这里只是讲解. 构造函数 DashPathEffect 的构造函数有两个参数: ...

  8. constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty

    constructor.prototype.isPrototypeOf.instanceof.in .hasOwnProperty等等 constructor:对象构造器.存在于原型对象中?,相当于p ...

  9. R语言中的数据分析函数

    数学类函数 在求有缺失值的子集的最大值时候,需要先用na.re=TRUE去掉缺失值. 求几个特定百分位数 round(x,n) n表示保留的小数点位数 分布类函数 rnorm,密度高的数字,生成概率就 ...

  10. nginx下TP3.2访问页面总是404

    这是我测试onethink用的配置 可以参考一下 server { listen 80; server_name onethink.dev www.onethink.dev; root /vagran ...