WED.CSS 样式补充及 JavaScript 简介
背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height:400px;
background-color: red;
background-image: url("yq.png");
/*禁止图片 x 轴平铺、重复*/
background-repeat: repeat-x;
/*禁止图片 y 轴平铺、重复*/
background-repeat: repeat-y;
/*禁止图片平铺、重复*/
background-repeat: no-repeat;
/*图片居中*/
background-position: center center;
/*
第一个值代表的是距离左边的大小
第二个值代表的是距离上边的大小
*/
background-position: 50px 100px;
/*一般情况下,先宽度再样式后颜色*/
border: 1px solid red;
/*只要是前缀一样的属性名，都可以简写, 没有顺序要求*/
background: red url("yq.png") center center no-repeat ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
border-width: 3px;
border-color: red;
border-style: solid;
/*边框属性可以只修改其中一边*/
border-left-color: purple;
border-left-style: solid;
border-left-width: 5px;
/*简写:一般情况下,代码顺序为先宽度再样式后颜色*/
border: 3px solid red;
}
div {
width: 400px;
height: 400px;
background: red;
/*border-radius: 20px;*/
/*border-radius: 200px;*/
border-radius: 80%;
/*左下角化圆*/
/*border-bottom-left-radius: 50%;*/
/*右上角化圆*/
/*border-top-right-radius: 50%;*/
}
</style>
</head>
<body>
<!-- <p>洋哥很帅</p>-->
<div></div>
</body>
</html>
display 属性
- 用于控制HTML元素的显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 100px;
background: red;
/*是元素具有块级元素的特点*/
/*display: block;*/
/*隐藏元素,使元素在浏览器中不显示*/
/*display: none;*/
}
#d2 {
width: 100px;
height: 100px;
background: green;
/*是元素同时具有行内元素和块级元素的特点*/
/*display: inline-block;*/
/*display: block;*/
}
</style>
</head>
<body>
<div id="d1" style="visibility: hidden"></div>
<div id="d2"></div>
<!--<span id="d1">span1</span>-->
<!--<span id="d2">span2</span>-->
</body>
</html>
补充
- visibility 属性规定元素是否可见，且即使不可见的元素也会占据页面上的空间，即 visibility 为占位隐藏
- 使用 display 属性来创建不可见元素不占据页面空间，即 display 为非占位隐藏
盒子模型
-
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
-
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
-
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#d1 {
height: 100px;
/*width: 200px;*/
background-color: #f2e8d3;
/*
margin 可以插入四个参数
1.一个值表示所有方向;
2.两个值表示上下、左右;
3.三个值表示上、左右、下;
4.四个值表示上、右、下、左
*/
margin: 10px;
}
#d2 {
height: 50px;
width: 90px;
background-color: #ed6f28;
/*border-radius: 30%;*/
border-width: 4px;
border-style: solid;
border-color: #00b4d8;
/*使块级元素居中,且只能水平居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
/*若通过 padding 值来调整内部盒子的位置，会改变外部盒子的大小*/
/*padding 的使用方法与 margin 相同*/
Margin 值
- 两个标签之间的距离称为 margin 值
1.margin 值不叠加
2.标签之间（外边距）的距离取较大值
3.无顺序要求
浮动
- 使元素脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 100px;
background: red;
/*float: left;*/
float: left;
}
#d2 {
width: 100px;
height: 100px;
background: green;
float: left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
浮动带来的问题 – 父标签塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 3px solid red;
}
#d2 {
width: 100px;
height: 100px;
background: red;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#d4 {
/*height: 100px;*/
/* 清除浮动*/
clear: left;
}
/*固定格式,用来处理父标签塌陷问题*/
/*建议在使用 CSS 时，都加入 clearfix */
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
<!-- <div id="d4"></div>-->
</div>
</body>
</html>
溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 200px;
height: 100px;
border: 3px solid red;
/*内容会被修剪，并且其余内容是不可见的。*/
overflow: hidden;
/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
overflow: scroll;
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
/*
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
*/
头像案例
<!--
定位：
1. 静态
2. 相对定位 relative
相对于原来的位置定位
3. 绝对定位 absolute
相对于父标签定位, 如果没有父标签，相对于body
4. 固定定位 fixed
相对于浏览器窗口
-->
<!--相对定位-->
<!--<div id="d1"></div>-->
<!--绝对定位， 相对的父标签要先定位-->
<!--<div id="d2">-->
<!-- <div id="d3"></div>-->
<!--</div>-->
<!--固定定位-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #eeeeee;
}
div {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid red;
margin: 0 auto;
overflow: hidden;
}
#d1 img {
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="1111.png" alt="">
</div>
</body>
</html>
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 100px;
background: red;
/*定位, 默认是static，不能改变位置*/
/*相对定位*/
position: static;
/*改成relative之后，性质已经发生改变了，有原来的不能改变位置，转为可以改变位置，哪怕你不移动位置，性质也发生了改变*/
position: relative;
/*向左移动100px， 向上移动100个px*/
left: 100px;
top: 100px;
}
#d2 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#d3 {
width: 100px;
height: 200px;
background: green;
position: absolute;
left: 100px;
top: 100px;
}
#d4 {
width: 100px;
height: 100px;
background: blue;
position: fixed;
right: 20px;
bottom: 20px;
/*left: 10%;*/
}
</style>
</head>
<body>
<div style="height: 500px;background: red" id="d5"></div>
<div style="height: 500px;background: green"></div>
<div style="height: 500px;background: orange"></div>
<div id="d4">
<a href="#d5" style="color: white">回到顶部</a>
</div>
</body>
</html>
Z-index
- z-index 的值越大，离用户就越近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #eeeeee;
}
#d2 {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,0.5);
z-index: 9999;
}
#d3 {
width: 200px;
height: 200px;
position: fixed;
left: 50%;
top: 50%;
background: white;
margin-left: -100px;
margin-top: -100px;
z-index: 10000;
}
</style>
</head>
<body>
<div id="d1">我是最里面的内容</div>
<div id="d2"></div>
<div id="d3">
<p>username: <input type="text"></p>
<p>password：<input type="text"></p>
<button>登陆</button>
</div>
</body>
</html>
Opacity
- 透明度，既可以透明颜色，也可以透明字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#d1 {
background: rgba(110,120,130,0.2);
}
#d2 {
color: green;
opacity: 0.1;
}
</style>
</head>
<body>
<div id="d1">div111</div>
<div id="d2">div222</div>
</body>
</html>
JavaScript 简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 这是单行注释
/* ctrl + shift + ? => 多行注释
这是多行注释
这是多行注释
这是多行注释*/
// es5 定义变量
// var user_name = 'ly';
// var userName = 'ly'
//
// // es6 语法
// let name = 'egon'
//
// // 常量 一改全改
// const PI = 3.24
//
// // 动态类型
// var a = 1;
// a = 'str';
// console.log(a)
// var a = 12.34;
// var b = 20;
// // 科学计数法
// var c = 123e5; // 12300000
// var d = 123e-5; // 0.00123
// console.log(typeof a)
// console.log(typeof b)
// var a = parseInt("123") // 返回123
// var b = parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
// var c = parseFloat("123.456") // 返回123.456
// console.log(a)
// console.log(b)
// console.log(c)
// var a = "Hello";
// var b = "world";
// var c = a + b;
// console.log(c); // 得到Helloworld
// var a = 'a'
// var b = 'b'
// console.log(a+b)
// var name = 'ly';
// var age = 18;
//
// // 模板语法
// var str = `my name is ${name}, my age is ${age}`;
// console.log(str)
</script>
</body>
</html>
常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var str = 'helloworld';
// console.log(str.length)
// 返回的是第n个字符
// console.log(str.charAt(1))
// 子序列位置， 一个字符串是否在另外一个字符串中， 如果在，返回第一次在字符串中的位置, 不存在，返回-1
console.log(str.indexOf('world111'))
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
