pythonweb day06

程序员文章站 2022-03-14 10:08:59

...

1.定位布局

2.定位方式

1.定位布局

属性position
取值
1. static 默认值按照文档流布局
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位
  注意：只有元素的position属性设置为relative / absolute / fixed,才认为元素是‘已经定位的元素’
偏移属性
属性：top / right / bottom / left
作用：配合已定位的元素实现位置移动
取值：像素值
top：以元素的上边界为基准移动元素
right：以元素的右边界为基准移动元素
bottom：以元素的底边界为基准移动元素
left：以元素的左边界为基准移动元素

pythonweb day06

2.定位方式

相对定位
position：relative
元素采用相对定位时，会参照他在文档中原本的位置进行偏移

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin: 0;
		}
		div{
			width: 300px;
			height: 300px;
			background-color: red;
			/*相对定位*/
			position: relative;
			/*偏移属性*/
			top: 50px;
			left: 50px;
		}
		h1{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div></div>
	<h1></h1>
</body>
</html>

绝对定位(重点)
position:absolute;
特点：

绝对定位的元素，会脱离文档流，元素在文档中不占位
绝对定位的元素会参照一个离他最近的并且已经定位的祖先元素进行偏移

如果元素没有已经定位的祖先元素，那么元素会参照body（浏览器窗口左上角）的位置进行偏移

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin:0;
		}
		#box{
			width: 300px;
			height: 300px;
			background-color: red;
			margin-top: 50px;
			margin-left: 50px;
			position: relative;
		}
		.d1{
			width: 150px;
			height: 150px;
			background-color: green;
			position: absolute;
			top: 50px;
			left: 50px;
		}
		h1{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="d1"></div>
	</div>
	<h1>一级标题</h1>
</body>
</html>

注意：

元素一旦绝对定位，就可以设置宽高了
经常使用‘父相子绝’的方式实现页面布局，父元素采用相对定位，子元素采用绝对定位
浮动和绝对定位，都可以实现元素脱流，采用浮动+外边距调整元素位置等价于绝对定位+偏移属性，浮动更常见于外围结构标签，做网页整体布局时使用，绝对定位更常用于内部元素的调整

浮动和相对定位可以共存的，设置的相对定位只是为了辅助内部子元素的定位布局

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin: 0;
		}
		#box{
			height: 150px;
			border: 5px solid red;
			position: relative;
		}
		.d1{
			width: 100px;
			height: 100px;
			background-color: green;
			float: right;
			position: absolute;
			right: 100px;
			bottom: 0;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="d1"></div>
	</div>
</body>
</html>

堆叠次序的调整

已定位的元素堆叠在一起时的排列顺序

语法
属性：z-index
取值：无单位的数值，默认为0，数值越大越靠上

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#d1{
			background-color: red;
		}
		#d2{
			background-color: green;
			top: 40px;
			left: 40px;
		}
		#d3{
			background-color: blue;
			top: 80px;
			left: 80px;
		}
		#d1:hover,#d2:hover,#d3:hover{
			z-index: 100;
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
</body>
</html>

注意

如果元素z-index属性值相同，后来者居上
如果是父子元素都设置z-index，永远是子元素在上，不受z-index影响

z-index属性只能用在已定位的元素上，
position：relative / absolute / fixed

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#d1{
			width: 300px;
			height: 300px;
			position: relative;
			background-color: red;
			z-index: 1000;
		}
		.d2{
			width: 200px;
			height: 200px;
			position: relative;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="d1">
		<div class="d2"></div>
	</div>
</body>
</html>

固定定位

固定定位可以使元素固定在浏览器窗口某个位置，不会随网页内容滚动而滚动
语法：
属性：position
取值：fixed
配合偏移属性实现元素位置的固定

注意：

固定定位的元素永远是参照浏览器窗口进行定位的

固定定位的元素都会变成块元素

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#main{
			height: 1000px;
			background-color: pink;
		}
		#chat{
			width: 300px;
			height: 200px;
			background-color: red;
			position: fixed;
			top: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div id="main"></div>
	<span id="chat"></span>
</body>
</html>

3.显示方式

作用：决定元素以何种方式显示在网页中

属性：display
取值：

none 设置元素隐藏，隐藏之后不占位
block 设置元素显示，或者转换元素类型，将元素转换为块元素
inline 转换为行内元素

inline-block 转换为行内块元素

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#d1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		#d1:hover #d2{
			display: block;
		}
		#d2{
			display: none;
			width: 50px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="d1">
		<div id="d2"></div>
	</div>
	
</body>
</html>

4.显示效果

属性：visibility

取值：

visible 默认值，表示显示

hidden 元素隐藏，仍然在文档中占位

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#d1,#d2{
			width: 200px;
			height: 200px;
		}
		#d1{
			background-color: red;
			visibility: hidden;
		}
		#d2{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>
</html>

----------------------------------------------------

属性：opacity 设置元素透明度

取值：0（透明）~1（不透明）
注意：

元素设置opacity属性，所有内容（背景颜色，文本颜色）都会实现半透明效果
子元素会继承父元素中半透明效果

如果父子元素都设置了opacity,子元素最终的效果是在父元素半透明的基础上再进行半透明
子元素的最终效果 = 父元素opacity * 本身opacity

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#d1{
			width: 300px;
			height: 300px;
			background-color: red;
			color: blue;
			font-size: 40px;
			opacity: 0.5;
		}
		#d1 h1{
			font-weight: normal;
			opacity: .5;
			cursor: crosshair;
		}
		img{
			width: 300px;
			/*vertical-align: top;*/
		}
	</style>
</head>
<body>
	<div id="d1">
		元素设置了透明度
		<h1>子元素</h1>
		<img src="cat.jpg">
	</div>
</body>
</html>

-----------------------------------------------------

设置垂直对齐方式
属性：vertical-align
取值：top / middle / bottom
注意：
可以用在行内元素上，更常见于为行内块元素设置，vertical-align,调整行内块元素左右内容与他的对齐方式
----------------------------------------------------------------------
光标显示
作用：改变鼠标悬停在元素上时的显示外观
属性：cursor
取值：
1. default默认值
2. pointer 显示为小手形状
3. text 显示为 I 普通文本
4. crosshair 显示为 +

5.列表属性

列表本身是块级元素，自带内外边距，带有项目符号
属性
1. 属性：list-style-type
  设置项目符号
  取值：
  1. none（取消项目符号）
  2. disc 实心原点
  3. circle 空心原点
  4. square 实心方块
    ...
2. 设置项目符号为图片
  属性：list-style-image
  取值：url（‘图片路径’）
3. 设置项目符号的位置
  属性：list-style-position
  取值：inside / outsine(默认)
  设置项目符号出现在内容框的外部还是内部
4. 必须掌握
  属性简写
  list-style：none; 常用来取消列表项目符号
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		ul{
			background-color: pink;
			/*list-style: circle;*/
			/*list-style: square;*/
			list-style-image: url('web.ico');
			list-style-position: inside;
		}
	</style>
</head>
<body>
	<ul>
		<li>麻辣烫</li>
		<li>凉皮</li>
		<li>饭</li>
	</ul>
</body>
</html>
```

6.转换属性

主要是用来改变元素在页面中的位置，尺寸，角度

语法
属性：transform
取值：转换函数
注意：多个转换函数之间使用空格隔开

转换原点
转换原点实际上就是元素转换操作的基准点
属性：transform-origin
取值：x y;
表示以元素左上角为原点选取旋转原点的坐标
1. 可以使用像素值
2. 可以使用百分比比
3. 可以使用方位值
  top / center / bottom
  left / center / right
  默认以元素的中心点作为转换的基准点

转换函数

平移变换
1. 改变元素在网页中的位置
2. 属性 transform
  取值：translate(x,y)
  x 表示元素在水平方向上平移的距离
  y 表示元素在垂直方向上平移的距离
  正值表示元素向右 / 下移动
  负值相反
  其他情况：
  1. translateX(value)
    指定元素沿水平方向位移
  2. translateY(value)
    指定元素沿垂直方向位移
  3. translate(value)
    等价于translateX(value)
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			transition: 3s;
		}
		div:hover{
			transform: translate(50px,50px);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
```

缩放变换
改变元素在页面中的大小
属性：transform
取值：scale(value)
value为无单位的数值，表示缩放比例，默认值是1，正常比例显示
value>1 会等比放大
0<value<1 等比缩小
value<0 元素会反转
其他情况

scaleX(v)
横向缩放

scaleY(v)
垂直缩放

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			transition: 3s;
		}
		div:hover{
			/*transform: translate(50px,50px);*/
			transform:scale(-2);

		}
	</style>
</head>
<body>
	<div>转换函数</div>
</body>
</html>

旋转变换
元素旋转一定角度显示
属性：transform
取值：rotate(ndeg) 二维转换
表示元素按照指定的角度进行旋转
正值表示顺时针
负值表示逆时针
---------------------------
3D变化
rotateX(ndeg) 沿x轴旋转
rotateY(ndeg) 沿y轴旋转

注意：

旋转原点会影响转换效果

元素如果涉及旋转操作，会连带坐标轴一起旋转，影响后面的位移操作
translate(x,y) 沿坐标轴进行移动

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			transition: 3s;
		}
		div:hover{
			/*transform: translate(50px,50px);*/
			/*transform:scale(-2);*/
			/*transform: rotate(360deg);*/
			/*transform: translate(50px,50px) rotate(45deg);*/
			transform: rotate(45deg) translate(50px,50px);

		}
	</style>
</head>
<body>
	<div>转换函数</div>
</body>
</html>

示例2

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			transition: 3s;
		}
		#d1{
			background-color: red;
		}
		#d2{
			background-color: green;
			/*指定旋转原点*/
			transform-origin: 0px 0px;
		}
		#d1:hover{
			transform: rotate(45deg);
		}
		#d2:hover{
			transform: rotate(45deg);
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>
</html>

写一个红❤：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#box{
			width: 200px;
			height: 160px;
			/*background-color: pink;*/
			margin: 100px auto;
			position: relative;
		}
		#box:hover{
			transform: scale(1.2);
		}
		.c1,.c2{
			width: 100px;
			height: 160px;
			position: absolute;
			border-radius: 50px 50px 0 0;
			background-color: red;
		}
		.c1{
			top:0;
			left:0;
			
			transform:rotate(45deg);
			transform-origin: right bottom; 
		}
		.c2{
			top:0;
			right: 0;
			transform:rotate(-45deg);
			transform-origin: left bottom;
		}

	</style>
</head>
<body>
	<div id="box">
		<span class="c1"></span>
		<span class="c2"></span>
	</div>
</body>
</html>

pythonweb day06

1.定位布局

2.定位方式

3.显示方式

4.显示效果

5.列表属性

6.转换属性

PythonWeb框架Django搭建过程

pythonWeb框架创建app模块以及虚拟环境管理工具

Java之路---Day06

JDBC day06

PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上

python_0基础开始_day06

Python集训营45天—Day06 (面向对象编程基础)

PythonWeb框架Django搭建过程

【脚本语言系列】关于PythonWeb访问ftplib，你需要知道的事

pythonweb django的学习