测开之路三十八:css布局之定位
常用的布局方式:
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布局之定位的更多相关文章
- 测开之路三十六:常用的css选择器
在static下新建一个css,并写入内容 /*标签选择器,label标签的颜色为红色*/label {color: red;} /*.代表类选择器,绿色*/.test {color: green;} ...
- 测开之路三十五:css引入
CSS是一种定义样式结构,如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件.无论哪一种方式,样式单包含将样式应用到指定类型 ...
- 测开之路四十八:Django之重定向与cookie
基础配置与上一篇一致 404错误 定义一个error页面 <!DOCTYPE html><html lang="en"><head> <m ...
- 测开之路七十八:shell之函数和参数
函数 function function_name(){ statement1 Statement2 .... statementn} function_name $var1 ...
- 测开之路三十九:js基础
js的两种使用方式 第一种使用方式:单独写js文件 在static下新建一个js文件并写入内容 alert('这是一个弹窗'); 在html文件里面,用script标签引入 <script sr ...
- 测开之路三十四:html常用标签
网页的结构: HTML:超文本标记语言是迄今为止网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链 ...
- 测开之路三十二:Flask基础之错误与重定向
错误处理,框架默认的错误为:not Found 可以捕获,并自定义 准备一张自定义图片,放在static文件夹下,并在template下创建一个html文件,引用该图片 捕获404状态,返回自定义页面 ...
- 测开之路三十:Flask基础之jinja2模板继承
实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...
- 测开之路二十八:Flask基础之静态资源
Flask默认的存放静态资源的目录名为static 在工程下创建一个文件夹(与脚本同级) 如果想命名为其他名字,则在声明app的时候要初始化,如: 准备一张图片放在static下,返回的内容加上img ...
随机推荐
- javaScript Map
} } } vertices.push(v); adjList.set ...
- UML 类图关系(继承,实现,依赖,关联,聚合,组合)
1.继承(is-a) 指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能.并能够添加它自己的新功能的能力,继承是类与类或者接口与接口之间最常见的关系:在Java中此类 ...
- vue2.0在IE11无法打开的解决办法
npm 安装bebel-polyfill npm install --save-dev babel-polyfill 在webpack.base.conf.js文件中将 module.exports ...
- struts2的action方法匹配以及通配符的使用
1. ActionMethod:Action执行的时候并不一定要执行execute方法,可以在配置文件中配置action的时候用"method"属性来指定执行哪个方法,也可以在ur ...
- 前端 ----- 初探ES6 Promise
前段时间做项目,在调用接口的时候,遇到了异步问题.开始是使用定时器,发现效果并不理想,于是又用了回调,效果还好但是,很明显的影响了代码的整洁性. 于是我想起了在面试的那段时间,背过的面试题里,出现过一 ...
- elasticsearch 基础 —— URI搜索
URI搜索 可以通过提供请求参数使用URI来执行搜索请求.使用此模式执行搜索时,并非所有搜索选项都会暴露.这是一个例子: GET twitter/_search?q=user:kimchy 示例响应: ...
- ob_start()、ob_get_contents() 等使用方法
ob_start()ob_get_contents(); 获取缓冲区内容ob_end_clean():删除内部缓冲区的内容,并且关闭内部缓冲区 ob_end_flush() 发送内部缓冲区的内容到浏览 ...
- 重置zend studio 默认设置的方法[转]
这个方法类似于手机的“恢复出厂设置”的功能,就是将所有的使用记录全部清除,用于解决zend studio使用过程中遇到的各种莫名其妙的问题,可以说是zend studio各种问题的终极解决方法~能够解 ...
- 解决Layui数据表格中checkbox位置不居中
1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 < ...
- smbtar - 直接备份SMB/CIFS共享资源到UNIX磁带设备的shell脚本
总览 smbtar -s server [-p password] [-x service] [-X] [-d directory] [-u user] [-t tape] [-b blocksize ...