标签：line pre position doctype 多少 sass 分层 idt Fix
s2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;bottom: 20px;right: 20px;">返回顶部</div><!--position分层 fixed固定位置分层 bottom: 20;right: 20 指定放在底部距离20像素位置，右边距离20像素位置 即右下角位置-->
<div style="height: 5000px;background-color: #dddddd;">
</div>
</body>
</html>
<!--css 全称层叠样式表-->
S2-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;bottom: 20px;right: 20px;">返回顶部
</div><!--position分层 fixed固定位置分层 bottom: 20;right: 20 指定放在底部距离20像素位置，右边距离20像素位置 即右下角位置-->
<div style="height: 5000px;background-color: #dddddd;"></div>
<script>
function GoTop() {
document.body.scrollTop = 0;
}
</script>
</body>
</html>
<!--css 全称层叠样式表-->
S3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.pg-body{
margin-top: 48px;
background-color: #dddddd;
height: 5000px
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
<!-- top: 0;
right: 0;
left: 0
div被position之后就会变成行内标签性质了，有多少内容显示多少内容，而不会显示整行 所有就要对齐左右-->
<!--width: 100%; header也能占一整行-->
<!--margin-top: 48px;<!–这样就不会被header盖住–>-->
S4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;background-color: green;height: 400px;width: 500px">
<div style="position: absolute;bottom: 30px;right: 30px;">定位</div>
</div>
<div style="height: 5000px;background-color: red;"></div>
</body>
</html>
<!--绝对position:absolute放在相对position：relative 位置-->
<!--position: absolute;bottom: 30px;right: 30px 指定放的位置 离底下30px 离右边30px的位置-->
S6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="display: none;z-index: 10;position: fixed;top:50%;left: 50%;margin-left: -250px;margin-top: -200px;background-color: white;height: 400px;width:500px ;">
<input type="text">
<input type="text">
<input type="text">
</div>
<div style="z-index : 9;position: fixed;background-color: black;
top: 0;right: 0;bottom: 0;left: 0;opacity: 0.5"></div>
<div style="height: 5000px;background-color: green;" >
asasass
</div>
</body>
</html>
<!--opacity: 0.5 0为完全透明，1为遮住 设置透明度-->
<!--z-index 层次优先级，数字越高，越在上面-->
<!--margin-left: -250px 左移250像素-->
<!--margin-top: -200px 减小200像素 即上移200像素-->
<!--position 可以用在span里-->
S7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="byd.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="byd.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="byd.jpg" style="height: 200px;width: 300px">
</div>
</body>
</html>
<!--<div style="height: 400px;width: 300px;overflow: hidden"> 定义div 400px 300px overflow: hidden 超过就隐藏-->
<!---->
<!--overflow: auto 超过就出现滚动条-->
<!--<div style="height: 200px;width: 300px;overflow: auto">-->
<!--<img src="byd.jpg" style="height: 200px;width: 300px"> 显示图片全部-->
<!--<div style="height: 200px;width: 300px;">-->
<!--<img src="byd.jpg"> 不加overflow:auto div就撑不住图片，图片会显示全部像素-->
S8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top:0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 48px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px ;
color: white;
}
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">a</div>
</div>
</body>
</html>
<!--line-height: 48px;上下居中-->
<!--display: inline-block; a标签为行内标签，设置成可修改height width-->
<!--pading:10px 对应：向下-->
<!--padding: 0 10px 对应：上下 左右-->
<!--padding: 0 10px 0 10px 对应：上 右 下 左-->
<!--.pg-header .menu:hover 在pg-header menu下，鼠标放上去就会应用到hover里的属性background-color-->
<!--另一个解释:当鼠标移动到当前标签上时，以下css属性才会生效-->
S9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-image: url(‘timg.gif‘);height: 180px;background-repeat: repeat-x"></div>
</body>
</html>
<!--background-image: url(‘timg.gif‘) 图片重复堆叠-->
<!--background-repeat: repeat-x 横向堆叠(默认)-->
<!--repeat-y 纵向堆叠-->
<!--no-repeat 不重复堆叠-->
S9-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px"></div>
<div style="background-image: url(‘icon_18_118.png‘);height: 20px;width: 20px;background-repeat: no-repeat;border: 1px solid red;background-position-x:0;background-position-y:-140px; "></div>
</body>
</html>
<!--height: 80px div自己没高度撑不起来-->
<!--background-position-x:0;background-position-y:-140px 移动图片的显示位置 默认位置 0 0(图片左上角) x为水平方向 y为垂直方向-->
S10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px"/>
<span style="background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;position: absolute;right: 6px;top: 10px"> </span>
</div>
</body>
</html>
<!--span是行内标签，设置高度宽度没用，必须display:inline-block才有效-->
<!--padding-right: 30px 右边 相对div内边距离30px-->
S11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="user">
<input type="button" onclick="GetData();"value="点击">
<script>
function GetData() {
var i=document.getElementById(‘user‘) ;
alert(i.value);
}
</script>
</body>
</html>
<!--<input type="button" onclick="GetData();"value="点击"> 点这个input的value 就会执行GetData()这个javascript函数-->
标签：line pre position doctype 多少 sass 分层 idt Fix
原文地址：https://www.cnblogs.com/leiwenbin627/p/10686197.html
