python_way day14 CSS，莫泰对话框
python_way day14 CSS
层叠样式表
一、CSS作用域：
二、css标签选择器
三、css样式
四、莫泰对话框：
一、css作用域：
基本用法：style="样式"
<body>
<div style="background-color: crimson; color: aqua;">这是css效果</div>
</body>
图示：
css应用范围： 1、当前标签，2、当前页面，3、所有文件
上面就是放在了div标签中，但是这样不可重用
当前页面使用
也可以写在head中，这样就可以被这个文件中的任意一个标签使用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #head中de style标签就是定义css样式的
div{ #指定想要使用的标签名
background-color: crimson;
color: aqua;
}
</style>
</head>
<body>
<div >这是css1效果 ,重用的效果</div> #这里div标签都被适用了
<div >这是css2效果 ,重用的效果</div>
<div >这是css3效果 ,重用的效果</div>
</body>
</html>
图示：
所有文件使用
link 就是引入文件
common.css
div{
background-color: crimson;
color: aqua;
}
图示：
效果也是一样的
优先：标签内>头部>文件
二、css选择器
1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div { #找到所有的div
background-color: crimson;
color: blue;
} </style>
</head>
<body>
<div>这是css1效果 ,重用的效果</div> #只要是div全部生效
<div>这是css2效果 ,重用的效果</div>
<div>这是css3效果 ,重用的效果</div>
</body>
</html>
2、id选择器
id唯一，不能重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {
background-color: crimson;
color: blue;
}
#i1 { #只找id = i1的
font-size: 56px;
}
</style>
</head>
<body>
<div>这是css1效果 ,重用的效果</div>
<div>这是css2效果 ,重用的效果</div>
<div id="i1">这是css3效果 ,重用的效果</div>
</body>
</html>
3、class选择器
class可以重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {
background-color: crimson;
color: blue;
}
#i1 {
font-size: 56px;
}
.c1{
background-color: blue;
color: azure;
}
</style>
</head>
<body>
<div>这是标签选择器</div>
<div class="c1">这是class选取器</div>
<div id="i1">这是id选择器</div>
</body>
</html>
图示：
4、层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
.c1{
background-color: blue;
color: azure;
}
span div p .c1{
background-color: chartreuse;
color: black;
}
</style>
</head>
<body>
<div class="c1">我是class选择器</div>
<span>
<div>
<p>
<a class="c1">我也是c1，使用层级选择器更精准，而且不影响上面的c1
<br/> 但是由于class的优先级要高于标签，所以这里需要指定class=c1
<br/> 如果指定了a标签不好使，会被之前定义的class选择器抢先
</a>
</p>
</div>
</span>
</body>
</html>
图示：
从选择器里再进行挑选：
5、组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
span div p .c1,h1{ #用逗号 , 隔开，可以选择多个标签，这就是组合选择器
background-color: chartreuse;
color: black;
}
</style>
</head>
<body>
<span>
<div>
<p>
<a class="c1">我是c1，使用层级选择器更精准
</a>
</p>
<h1>我是h1标签,组合选择器也把我穿上衣服了！</h1>
</div>
</span>
</body>
</html>
三、css样式
color：字体颜色
backgroup-color： 北京颜色
backgroup-img: 引用图片
backgroup-repeat： 图片是否重复
backgroup-position: 图片坐标
border:边框
cursor：让鼠标变成个小手
display：隐藏标签
font-size ：字体大小
height： 50px 高度
width: 100% or 500px 宽度
float: left 往左飘
边距：
margin：外边距
padding：内边距
flost：漂浮
position： 位置
relative
absolute 固定窗口的一个位置，但是滚动窗口还是会一定
fixed 固定，相对浏览器的窗口，想让他固定在哪里都可以。
opacity:透明度 1不透明，0透明
z-index:标签显示的层级，越大越靠前
第二种写法
background-color: rgba(0,0,0,.6); 前面3个数是颜色，后面的 .6是透明度
1、颜色
第一种：
backgroup-color：颜色可以写英文： chartreuse
第二种：
也可以写成rgb颜色 #ddd
第三种：
2：宽度
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: fuchsia;
/*color: black;*/
width: 500px; #父亲500像素
}
.c1{
width: 20%; #一个儿子占像素的20%
background-color: chartreuse;
}
.c2{
width: 80%; #一个儿子占500像素的80%
background-color: blue;
}
</style>
</head>
<body>
<div> #父亲
<div class="c1">这是20</div> #儿子
<div class="c2">这是80</div>
</div>
</body>
</html>
图示：
两个儿子因为是div块级标签，所以就一人占一行。我们想要的效果是看他们分享父亲div的500像素
所以就用上了
float：left
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: fuchsia;
/*color: black;*/
width: 500px;
}
.c1{
width: 20%;
background-color: chartreuse;
float: left;
}
.c2{
width: 80%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div>
<div class="c1">这是20</div>
<div class="c2">这是80</div>
</div>
</body>
</html>
小知识点：
如果在div中的div使用了float，最外层的div没有定义高度，切最外层的div有边框，目的是想让内层的两个float的div将外层的边框撑起来。如果不做特殊的设置是不成的。
如图
但是不加特殊设置事实则是事与愿违：
<div style="border: solid 1px red">
<div style="height: 20px;width: 20%;background-color: blue;float:left ">f</div>
<div style="height: 20px;width: 70%; background-color: aqua; float: left">f</div>
<div style="clear: both;"></div> <!-- 就是个人设置可以撑起最外侧的边框 -->
</div>
实际上使用了float是标签飘起来在最上层，这样的话就脱离出来了整个页面。使用clear：both则是将脱离的标签拽回来
3、background-image: 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('s1.jpg');
}
</style>
</head>
<body>
<dev class="c3"></dev>
</body>
</html>
这样没有效果，因为相当于前面有一堵墙，我没有开洞，图片一直在墙后面
下面我们就要开洞了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('4.gif');
height: 100px; #开洞的高度
width: 500px; #开洞的宽度
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>
图示：
问题来了！怎么图片成平铺效果了！
如果不想重复
4、backgroup-repeat: no-repeat; 不重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('4.gif');
height: 100px;
width: 500px;
background-repeat: no-repeat; #这样就是不让他重复
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>
图示：
5、backgroup-position : 调整图片位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('2.jpg');
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-position: 0 0; #这就是现实图片的左上角
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>
如果我们想调整图片的位置，只要调整postition的位置就可以了
6、background系列的命令可以写到一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c4{
background: url("2.jpg") -263px -51px no-repeat; #这里把所有关于background的参数都写到了一起。
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="c4"></div>
</body>
</html>
图示
7、border
solid 实线
dotted 大虚线
dashed 小虚线
<style>
#i1{
border: solid saddlebrown ; #边框 实线 颜色
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="i1"> <---------- 这里
<div class="c4"></div>
</div>
图示：
边框的范围：
左边边框：border-left
右边框：border-right
下边框：border-bottom
上边框：border-top 等等还有改变颜色，边框宽度都可以改变。
图示：
8、display：none 隐藏，并且不占位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
display: none;
}
</style>
</head>
<body>
<div id="i1">
<div class="c4"></div>
</div>
</body>
</html>
图示 ： 图片没了并且位置也没了
display：block
将行内标签变为块级标签
display：inline
将块级标签变为行内标签
desplay：inline-block
内联标签，自己有多高多款就占多少，高度宽度不生效
如果想把内联标签设置高宽，哪我们就要用这个参数了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
display: inline-block; #如果不写这个下面的高度宽度是不生效的，不生效中间的c4图片就不能显示出来
height: 100px;
width: 100px;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<span id="i1">
<div class="c4"></div>
</span>
</body>
</html>
图示：现在加上了 display: inline-block,就可以显示出来了。
9、visibility:hidden 隐藏，但是位置保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="i1">
<div class="c4"></div>
</div>
</body>
</html>
图示： 图片没了但是为之保留
10、cursor 让鼠标放到图边上变成小手等图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c5{
cursor: pointer; #小手
}
.c6{
cursor: wait; #等待
}
.c7{
cursor: cell; #十字
}
</style>
</head>
<body>
<ul>
<li class="c5">首页</li>
<li class="c6">产品</li>
<li class="c7">销售</li>
</ul>
</body>
</html>
11、边距
- margin：外边距，本身不增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 70px;
border: solid red;
}
.c2{
height: 30px;
background-color: aquamarine;
margin-top: 20px; #给里面的颜色上面加上一个外边距
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
图示：
- padding:内边距，本身增加
图示：没有加padding时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
border: solid red;
}
.c2{
height: 30px;
background-color: aquamarine;
margin-top: 20px;
}
.c3{
height: 30px;
background-color: cornflowerblue;
padding-bottom: 10px; #这里加上了下内边距
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>
图示效果：
12、flost 漂浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px; #宽度是500px
background-color: cadetblue;
}
.c2{
background-color: aquamarine;
width: 30%; #第一个儿子的宽度是c1的30%
}
.c3{
background-color: cornflowerblue;
width: 70%; #第二个儿子宽度是c1的70
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
</div>
</body>
</html>
图示：
但是我们想要的是两个儿子都在父亲里面，这时就需要使用flost了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
border: solid red;
}
.c2{
background-color: aquamarine;
width: 30%;
float: left; #让老大飘起来
}
.c3{
background-color: cornflowerblue;
width: 50%; #这里我们让老二小一些，看一下效果，但是如果儿子相加超过了100%，那么就会撑破了，就漂不起来了。
float: left; #让老二飘起来
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
</div>
</body>
</html>
图示：
但是问题来了，我们把父亲的高度给删了，按说父亲的红色外框应该是被两个儿子撑起来的。这会却没有。那我们怎么办？
style="clear: both"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
border: solid red;
}
.c2{
background-color: aquamarine;
width: 30%;
float: left; #孩子用上float
}
.c3{
background-color: cornflowerblue;
width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
<div style="clear: both"></div> #在父亲里面加上这句话
</div>
</body>
</html>
图示：
float: right 就是靠右边飘
13、position
- fixed： 根据整个阅览器的窗口定位，拉动窗口位置不会变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 1000px;
background-color: cadetblue;
}
.c2{
position: fixed; /*默认是在c1 div的外面*/
}
.c3{
background-color: cornflowerblue;
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
图示：
调整
<title>Title</title>
<style>
.c1{
height: 1000px;
background-color: cadetblue;
}
.c2{
position: fixed; /*默认是在c1div的外面*/
right: 200px; # 我让c2的字体靠右
bottom: 0; # 并且在最底部
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
图示：
- absolute 放在浏览器的一个位置，滚动会跟着移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 2000px;
background-color: cadetblue; #只是这里做了修改
}
.c2{
position: absolute;
right: 200px;
bottom: 0;
}
.c3{
background-color: cornflowerblue;
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
图示：位置还是在窗口的最底部，但是滑动窗口却会跟着窗口动。
- relative 单独写没有什么效果，要和absolute 结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 500px;
width: 500px;
background-color: cadetblue;
position: relative; #最终找到了这里
}
.c2{
position: absolute; #对应的c2会一层一层的网上找，知道找到relative这个标签定位
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1"> #因为relative在v1中，所以c2是根据c1定位
<div style="background-color: blue;height: 100px"> #就算上层还有一个div，c2的absolute不会根据这个定位
<div class="c2">返回顶部</div>
</div>
</div>
</body>
</html>
图示：
div边框圆角效果
<style type="text/css">
.a {
background-color: #c7dec6;
border: 1px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height:200px;
width:500px;
padding:20px;
}
</style>
</head>
<body>
<p class="a">
在HTML中如何把块的边框做成圆角
</p>
</body>
</html>
莫泰对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>莫泰对话框</title>
<style>
.c1 {
width: %;
height: 1000px;
}
.dl { /*登录按钮的位置永远会在模态框的右下角*/
width: 45px;
height: 20px;
background-color: antiquewhite;
position: absolute;
right: 600px;
top: 300px;
}
.model { /*莫泰框的class*/
width: 300px;
height: 200px;
background-color: coral;
top: 300px;
left: 600px;
position: absolute;
margin-top: -100px;
margin-left: -150px;
z-index: ;
}
.hide{ /*设置隐藏的class*/
display: none;
}
.myinpyt {
margin-left: 82px;
margin-top: 20px;
}
.but{
position: absolute;
right: 30px;
bottom:20px;
}
.zj{ /*中间遮罩层*/
background-color: black;
top: ;
left: ;
bottom: ;
right: ;
z-index: ;
position: fixed; /*只要想调整标签的位置就需要postition这个参数*/
opacity: 0.4;
}
</style>
</head> <body>
<div class="c1">
<button class="dl">登录</button>
<div class="zj">
</div>
<div class="model">
<div class="myinpyt">
<p>
<input name="user" placeholder="用户名">
</p>
<p>
<input name="password" placeholder="密码">
</p>
<button class="but">退出</button>
</div>
</div>
</div>
</body>
</html>
莫泰对话框
python_way day14 CSS，莫泰对话框的更多相关文章
- python_way day14 CSS
python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 一.css作用域: 基本用法:style="样式" <body ...
- 以莫泰的形式进行页面转换（传值用block）
1.在第一个页面进入第二个页面可以使用莫泰的方式 在第一个页面包含第二个页面的头文件#import "FirstViewController.h"#import "Vie ...
- python_way day14 HTML
python_way day 14 HTML 一,标签 二.特殊字符 三,css <!DOCTYPE html> <html lang="en"> < ...
- 用css画出对话框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi
- Day14:CSS垂直居中
verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...
- Html,css构建一个对话框,练习201911281028
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS实现微信对话框
- python16_day13【css、js】
一.部局 1.pg-header(title) .pg-header{ height: 48px; background-color: cadetblue; line-height: 48px; mi ...
- python_way day16 DOM
Python_way day16 1.Dom (找到html中的标签) 一.DOM 1.查找元素 直接查找 document.getElementById 根据ID获取一个标签 --->这里是 ...
随机推荐
- Redis入门很简单之三【常见参数配置】
Redis入门很简单之三[常见参数配置] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存中间件memcached Redis的一下常见设置都是通过对redis.conf ...
- EFK搜集MySQL慢日志
前提已经安装好EFK 1.在MySQL节点安装td-agent http://packages.treasuredata.com.s3.amazonaws.com/3/redhat/7/x86_64/ ...
- java并发编程笔记（三）——线程安全性
java并发编程笔记(三)--线程安全性 线程安全性: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协同,这个类都能表现 ...
- 90、Tensorflow实现分布式学习，多台电脑，多个GPU 异步试学习
''' Created on 2017年5月28日 @author: weizhen ''' import time import tensorflow as tf from tensorflow.e ...
- Cocos2d之运行Test项目
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 打开Test项目 路径为 C:\Dev\cocos2d-x-3.8.1\build 2.设定cpp-tests为启动项(当cpp ...
- 新浪sina邮箱客户端配置
接收协议:IMAP 接收邮箱服务器地址:imap.sina.com 端口:993 加密方法:TLS 发送协议:SMTP 发送服务器:smtp.sina.com 端口:465 加密方法:TLS
- Data structure alignment by binary operation
在寫C的過程中,我們會很自然地以為,我連續宣告一堆大小不一的char array. 經過Complier之後這些char array未必是連續擺放.至於為什麼就要談到我們今天的主角了alignment ...
- 【DRP】採用dom4j完毕XML文件导入数据库
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lantingxv_jing/article/details/37762523 xml文件在如 ...
- 【Spring】每个程序员都使用Spring（四）——Aop+自定义注解做日志拦截
一.前言 上一篇博客向大家介绍了Aop的概念,对切面=切点+通知 .连接点.织入.目标对象.代理(jdk动态代理和CGLIB代理)有所了解了.理论很强,实用就在这篇博客介绍. 这篇博客中,小编向大家介 ...
- bash命令根据历史记录补全
用zsh比较方便的一个功能是在找之前用过的命令时可以先输入一部分命令作为过滤条件, 比如,想找 docker run 开头的历史命令,只需要键入 docker run 然后按 ↑ 进行选择. 但是在用 ...