Python全栈之学习CSS(2)
作者：熬夜泡枸杞 发布时间：2022-11-11 13:04:54
标签：Python,全栈,CSS
1. css背景图
1.1 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 背景属性</title>
<style>
.c1
{
/* 具体写法 */
width:600px;
height:600px;
border:solid 1px red;
background-color: yellow;
/* 控制背景图 */
background-image:url("./images/xiao.jpg");
/* 控制是否平铺 repeat-x repeat-y no-repeat repeat(默认)*/
background-repeat:no-repeat;
/* 控制背景图像的位置 ; 参数1 控制左右 参数 控制上下 */
/* background-position: 50％ 50％; */
/* 固定背景图使用 fixed 了解 */
background-attachment: fixed;
}
.c2
{
/* 简写 */
width:600px;
height:600px;
margin:10px 20px;
border:solid 1px red;
/* 图片 是否平铺 [图片位置] */
background: url("./images/xiao.jpg") no-repeat 50％ 50％;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
1.2 背景图片引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片的引入</title>
<style>
/* 鼠标滑过,点亮图片 */
div.c1
{width:60px;height:60px;border:solid 1px gray;background: url("./images/tag.jpg") no-repeat;}
div.c1:hover
{
background: url("./images/tag.jpg") no-repeat;
background-position: -312px -3.5px;
}
.gg
{
width:400px;
height:400px;
border:solid 1px red;
}
/* 一张图片的导入 */
div.c2
{
background: url("./images/xiao.jpg") no-repeat;
/* 参数1:宽 参数2:高 50px 50px / 100％ 100％ */
/* 控制背景图像的尺寸大小 background-size: 100％ 100％ ; */
background-size: 100％ auto;
}
/* 多张图片导入 */
div.c3
{
background:
url("./images/game/map_19.gif") no-repeat 30px 80px,
url("./images/game/map_20.gif") no-repeat 50px 50px,
url("./images/game/map_18.gif") no-repeat 100px 50px,
url("./images/game/map_14.gif") no-repeat 180px 100px,
url("./images/game/map_03.gif");
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
</body>
</html>
2. 相对_绝对_固定
2.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:相对定位 relative</title>
<style>
.gg
{
width:200px;
height:200px;
border:solid 1px red;
}
.c1
{background:violet;}
.c2
{
background:tan;
position:relative;
top:10px;
left:100px;
z-index:2;
}
.c3
{background:blue;}
.c4
{background:green;}
</style>
</head>
<body>
<!--
相对定位: 参考点是他自己本身,相对于原始的位置进行定位;
如果添加了定位:无论是添加(相对,绝对,固定)属性,添加之后会增加额外的其他属性:
z-index 控制层叠关系: 值越大越在上层,值越小越在下层
left
top
right
bottom
z-index
-->
<div class="c1 gg"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
<div class="c4 gg"></div>
</body>
</html>
2.2 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:绝对定位 absolute</title>
<style>
.gg
{width:200px;height:200px;border:solid 1px red;}
.big
{
width:1000px;
height:1000px;
border:solid 1px red;
margin:100px 220px;
}
.c1
{
background:violet;
/* 无效 */
position: relative;
}
.c2
{
background:tan;
position: absolute;
top:0px;
left:0px;
/* bottom:0px;
right:0px; */
/* z-index:-1; */
}
.c3
{background:blue;}
.c4
{background:green;}
</style>
</head>
<body>
<!--
绝对定位:参考点默认参考的是body
效果:脱离文档流,后面的内容自动补位
使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;
(1)把想要的父级元素变成relative
(2)把要定位的元素变成 absolute
-->
<div class="big">
<div class="c1 gg"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
<div class="c4 gg"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:绝对定位 absolute</title>
<style>
.gg
{width:200px;height:200px;border:solid 1px red;}
.big
{
width:1000px;
height:1000px;
border:solid 1px red;
margin:100px 220px;
}
.c1
{
background:violet;
/* 无效 */
position: relative;
}
.c2
{
background:tan;
position: absolute;
top:0px;
left:0px;
/* bottom:0px;
right:0px; */
/* z-index:-1; */
}
.c3
{background:blue;}
.c4
{background:green;}
</style>
</head>
<body>
<!--
绝对定位:参考点默认参考的是body
效果:脱离文档流,后面的内容自动补位
使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;
(1)把想要的父级元素变成relative
(2)把要定位的元素变成 absolute
-->
<div class="big">
<div class="c1 gg"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
<div class="c4 gg"></div>
</div>
</body>
</html>
2.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:固定定位 fixed</title>
<style>
/* *号代表通配选择符,代表所有标签,默认标签中含有默认的间距,要在一开始的时候全部去掉; */
*
{margin:0px;padding:0px;}
body
{height:2000px;}
.c1
{
width:500px;
height: 600px;
border:solid 1px red;
background-color: green;
position: fixed;
left:50％;
margin-left:-250px;
top:50％;
margin-top:-300px;
}
/*
<' transition-property '>： 检索或设置对象中的参与过渡的属性
<' transition-duration '>： 检索或设置对象过渡的持续时间
<' transition-timing-function '>： 检索或设置对象中过渡的动画类型
<' transition-delay '>： 检索或设置对象延迟过渡的时间
*/
img
{
position:fixed;
bottom:20px;
left:-100px;
transition: all 1s ease 0.1s;
}
img:hover
{
left:0px;
background-color: red;
}
</style>
</head>
<body>
<img src="images/xiao.jpg"/>
<div class="c1">我没动</div>
<p>1111222333444</p>
</body>
</html>
3. float浮动
3.1 display转换元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display 转换元素</title>
<style>
div
/* display:inline; 转换成行内元素 */
{display:inline;border:solid 1px red;width:1000px;height:20px;}
span
/* display:block; 转换成块状元素 */
{display:block;width:100px;height:50px;border:solid 1px red;}
a
/* display:inline-block; 转换成行内块状元素 */
{display:inline-block;width:500px;height:30px;border:solid 1px red;}
p
/* display:none 隐藏元素 */
{display:none;}
</style>
</head>
<body>
<!-- 元素的分类:
块状元素 : block
行内元素 : inline
行内块状元素 : inline-block
-->
<div>第一个div</div>
<div>第二个div</div>
<span>我是span1</span>
<span>我是span2</span>
<a href="#">我是链接1</a>
<a href="#">我是链接2</a>
<p>12345</p>
</body>
</html>
3.2 float浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 浮动</title>
<style>
.content
{width:700px;clear:both;}
.content .c1
{background: red;width:100px;height:100px;float:left;}
.content .c2
{background: tan;width:100px;height:100px;float:left;}
.content .c3
{background:blue;width:100px;height:100px;float:left;}
.content .c4
{background:green;width:100px;height:100px;float:left;}
.content2
{width:700px;height:500px;border:solid 1px red;clear:both;}
#a1
{float:left;width:100px;height:100px;border:solid 1px red;}
#a2
{display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}
</style>
</head>
<body>
<!--
# ###块状元素浮动:
float:left 向左浮动 ,元素脱离原始文档流,后面的内容自动补齐;
float:right 向右浮动 ,元素脱离原始文档流,后面的内容自动补齐;
目的: 让块状元素在一排显示
clear:both; 清除两边的浮动
-->
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<!--
# ###行内元素浮动:
如果对行内元素进行浮动:
默认会把行内元素升级成行内块状元素,可以设置宽和高
消除浮动产生的影响:clear:both;
-->
<div class="content2">
<a href="#" id="a1">点击我跳转1</a>
<a href="#" id="a2">点击我跳转2</a>
</div>
</body>
</html>
4. html里面的bug
4.1 float内容塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 浮动</title>
<style>
.content
{width:700px;clear:both;}
.content .c1
{background: red;width:100px;height:100px;float:left;}
.content .c2
{background: tan;width:100px;height:100px;float:left;}
.content .c3
{background:blue;width:100px;height:100px;float:left;}
.content .c4
{background:green;width:100px;height:100px;float:left;}
.content2
{width:700px;height:500px;border:solid 1px red;clear:both;}
#a1
{float:left;width:100px;height:100px;border:solid 1px red;}
#a2
{display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}
</style>
</head>
<body>
<!--
# ###块状元素浮动:
float:left 向左浮动 ,元素脱离原始文档流,后面的内容自动补齐;
float:right 向右浮动 ,元素脱离原始文档流,后面的内容自动补齐;
目的: 让块状元素在一排显示
clear:both; 清除两边的浮动
-->
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<!--
# ###行内元素浮动:
如果对行内元素进行浮动:
默认会把行内元素升级成行内块状元素,可以设置宽和高
消除浮动产生的影响:clear:both;
-->
<div class="content2">
<a href="#" id="a1">点击我跳转1</a>
<a href="#" id="a2">点击我跳转2</a>
</div>
</body>
</html>
4.2 margin-top失效问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin-top失效问题</title>
<style>
*
{margin:0px;padding:0px;}
.box1
{width:100px;height:100px;margin-top:10px;border:solid 1px red;}
.father
{width:300px;height:300px;background: yellow;overflow: hidden;}
.son
{width:150px;height:150px;margin-top:50px;}
</style>
</head>
<body>
<!-- overflow: hidden; overflow auto 如果内容超出边框，会以下拉框的形式显示，不会溢出 -->
<div class="box1">
sdfsf
</div>
<div class="father">
<div class="son">12</div>
</div>
</body>
</html>
4.3 overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test {
overflow: hidden;
width: 200px;
height: 100px;
background: #eee;
}
</style>
</head>
<body>
<!-- overflow:hidden 对超出部分内容进行隐藏 -->
<div class="test">
<p>苏打速度</p>
<p>苏打速度</p>
<p>苏打速度</p>
<p>苏打速度</p>
<p>苏打速度</p>
</div>
</body>
</html>
来源：https://blog.csdn.net/weixin_46818279/article/details/122356030
0
投稿猜你喜欢
本文实例为大家分享了Python实现俄罗斯方块游戏的具体代码，供大家参考，具体内容如下玩法：童年经典，普通模式没啥意思，小时候我们都是玩加速- 在 InnoDB中更加快速的全表扫描 一般来讲,大多数应用查询的时候都会用索引，查找很少的几行数据（主键查找或百行内的
- 顺序表即线性表的顺序存储结构。它是通过一组地址连续的存储单元对线性表中的数据进行存储的，相邻的两个元素在物理位置上也是相邻的。比如，第1个元
- 在开发Web应用时，无一例外地需要访问数据库，以完成对数据的查询、插入、更新、删除等操作。受应用逻辑的影响，有时需要将多条数据库操作指令组成
- 在 Go 语言中切片是使用非常频繁的一种聚合类型，它代表变长的序列，底层引用一个数组对象。一个切片由三个部分构成：指针、长度和容量。指针指向
- 引言在开发过程中，经常需要观察本地文件系统的更改。经过谷歌了几个小时后，到了一个简单的工具来做这件事。该工具就是fsnotify是一个Go跨
- vendorvendor概念最早是由Keith提出，用来存放依赖包。在版本1.5出现。例如gb项目提供了一个名为gsftp的示例项目，它有一
- 本文实例讲述了Python实现的简单hangman游戏。分享给大家供大家参考。具体如下：#!/usr/bin/env pythonimpor
- 本文实例为大家分享了js实现简单图片轮播的具体代码，最终实现效果图代码块<!DOCTYPE html><html>
- 前言：Pandas 中应用 query 函数来进行数据筛选。query 函数的一般用法如下：df.query('expression
- 在JavaScript的世界里，定义函数的方法多种多样，这正是JavaScript灵活性的体现，但是正是这个原因让初学者摸不着头脑，尤其对于
- 1.开发环境 vue+element2.电脑系统 windows 10 专业版3.在开发的过程中,我们总是会使用到 git管理代码!使用方法
- 功能描述：1）使用tkinter设计程序界面；2）调用Windows API函数实现录音机和音乐播放器。参考代码：运行界面：总结以上所述是小
- 1.新建一个django项目，2.前端展示一个按钮<form action="/start/" method=&q
- 简介require-ensure和require-amd的区别：require-amd 说明: 同AMD规范的require函数，使用时传递
- 前言在遇到三维数据时，三维图像能给我们对数据带来更加深入地理解。python的matplotlib库就包含了丰富的三维绘图工具。1.创建三维
- 简介CountMinSketch是一种计数器，用来统计一个元素的计数，它能够以一个非常小的空间统计大量元素的计数，同时保证高的性能及准确性。
- Go语言中rune方法如何使用，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希
- Tuple 元组元组的定义和使用元组的定义：元组是有序的不可变对象集合元组使用小括号包围，各个对象之间使用逗号分隔元组是异构的，可以包含多种
- 在使用Context.ResponseWriter中的Set/WriteHeader/Write这三个方法时，使用顺序必须如下所示，否则会出
