day53css+js简介

今日内容：
解决浮动带来的影响
溢出属性
定位
验证浮动和定位是否脱离文档流
z-index模态框
透明度opacity
简单博客园首页搭建
JavaScript编程语言开头

今日内容详细：

补充：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 50px;
width: 50px;
border: 3px solid red;
background-image: url("444.png");
background-position: 0 0;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

解决浮动带来的影响：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid black;
}
#d2 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#d3 {
height: 100px;
width: 100px;
background-color: green;
float: left;
}
#d4 {
/*height: 100px;*/
clear: left;
}
.clearfix:after {
content:'';
display: block;
clear: both;
}

</style>

</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>

</div>

</body>
</html>

溢出属性：
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}

代码演练：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
height: 100px;
width: 100px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
overflow:auto;
/*overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条仍然可见，但被禁用。*/
/*overflow: auto 非常相似，但滚动条仅在内容溢出时出现。*/
}
</style>

</head>
<body>
<p>我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!我还在起始点刚刚换上2档准备发车!</p>
</body>
</html>

溢出的实际应用：圆形头像内放头像的处理方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: #4e4e4e;
}
#d1 {
height: 120px;
width: 120px;
border-radius: 50%;
border:5px solid white;
margin: 0 auto;
overflow: hidden;
}
#d1>img {
/*max-width: 100%;*/
width: 100%;
/*占标签100%比例*/
}
</style>

</head>
<body>
<div id="d1">
<img src="111.jpg" alt="">
</div>
</body>
</html>

定位：
静态
所有的标签默认都是静态的static，无法改变位置
相对定位(了解)
相对于标签原来的位置做移动relative
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
ps:浏览器是优先展示文本内容的

代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 { /*d1为相对定义演示*/
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右如果是负数方向则相反*/
top: 50px; /*从上往下如果是负数方向则相反*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动但是你的性质也已经改变了
*/
}
#d2 { /*d2，d3为绝对定位演示*/
height: 100px;
width: 200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4{ /*d4为固定定位演示*/
position: fixed; /*写了fixed之后定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;

border: 3px solid black;
height: 50px;
width: 100px;
background-color: white;
text-align: center;
}

</style>

</head>
<body>

验证浮动和定位是否脱离文档流(原来的位置是否还保留)：
"""
可以改变标签位置的四种方式：
1.浮动
2.相对定位
3.绝对定位
4.固定定位
原来的位置没有了，可以被顶替了，就是脱离文档流
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动（肯定脱离文档流，未做代码验证）
2.绝对定位
3.固定定位

代码验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div style="height: 100px;width: 200px;background-color: aqua"></div>
<div style="height: 100px;width: 200px;background-color: yellowgreen;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: slateblue"></div>
</body>
</html>

z-index模态框：
eg:百度登陆页面其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近

代码演练：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.model {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}

</style>
</head>
<body>
<div>这是最底层的内容</div>
<div class="cover"></div> 
<div class="model"> 
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我</button>
</div>

透明度opacity：
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体

opacity: 0.5;

代码演练：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-color: rgba(0,0,0,0.5);
}
#d2 {
/*background-color: rgb(0,0,0);*/
opacity: 0.5; /*设置字体的不透明度*/
color: slateblue;
}
</style>

</head>
<body>
<p id="d1">111</p>
<p id="d2">2222222</p>
</body>
</html>

Js简介：
1.js也是一门编程语言它也是可以写后端代码的
用js一统天下前后端都可以写
nodejs 支持js代码跑在后端服务器上
然而并不能想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度

ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

JS版本
主要还是用的5.1和6.0

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

# js的注释
"""
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
"""

# 两种引入方式
1.script标签内部直接书写js代码
2.script标签src属性引入外部js代码

# js语法结构
js是以分号作为语句的结束
但是如果你不写分号，问题也不大也能够正常执行但是它就相当于没有结束符

js学习流程
变量
数据类型
流程控制
函数
对象
内置方法/模块

变量
"""
在js中首次定义一个变量名的时候需要用关键字声明
1.关键字var
var name='jason'
2.es6推出的新语法
let name='jason'
如果你的编辑器支持的版本是5.1那么无法使用let
如果是6.0则向下兼容 var let
"""
# var与let的区别
n = 10
for n in range(5):
print(n)
print(n)
# var 5 let 10

"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""

常量
# python中没有真正意义上的常量默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14

猜你喜欢