1.ifame
iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。 -->
<!-- 语法：<iframe src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe> -->
<!-- frameborder="1/0" 1代表有框架边框 /0代表无框架边框 -->
<!-- 滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动 -->
<!-- <iframe src="引入对应的html文件" frameborder="0"></iframe> -->
<style>
*{
margin: 0;
padding: 0;
}
iframe{
width: 100%;
/* h和你引用的部分 高度一致 */
height: 200px;
}
</style>
</head>
<body>
<iframe src="./iframe.html" frameborder="0" scrolling="no"></iframe>
</body>
</html>
2.
/* 一整屏页面必备条件 */
html,body{
height: 100%;
overflow: hidden;
}
3.元素消失几种方式
<style>
div{
width: 200px;
height: 200px;
background: springgreen;
border:2px solid #000;
}
.box1{
display: none;
/* 元素消失 在文档流不占位置 */
}
.box2{
visibility: hidden;
/* 元素消失 但是在文档流占据位置 */
}
.box3{
background: transparent; /* 文字内容 和 边框都是存在的 */
}
.box4{
/* 透明度 */
opacity: 0;
/* 必须配套使用兼容 */
filter: alpha(opacity=0);
}
.box5{
/* 透明度 IE8以上才识别 */
background: rgba(0, 0, 0, 0); /* 文字内容 和 边框都是存在的 */
}
.box6:hover{
/* 过渡时间 */
transition: 2s;
height: 0;
overflow: hidden;
}
.box7:hover{
/* 过度时间 */
transition: 2s;
/* 缩小为0 */
transform: scale(0);
}
</style>
</head>
<body>
<!-- .box$*6按tab按键 -->
<div class="box1">元素消失1</div>
<div class="box2">元素消失2</div>
<div class="box3">元素消失3</div>
<div class="box4">元素消失4</div>
<div class="box5">元素消失5</div>
<div class="box6">元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6元素消失6</div>
<div class="box7"></div>
</body>
4.走马灯
<style>
*{
margin: 0;
padding: 0;
}
marquee{
background-color: springgreen;
height: 200px;
}
</style>
</head>
<body>
<!-- direction是方向 有 left / right/up/down -->
<!-- behavior="alternate" 来回 -->
<!-- scrollamount="300"滚动速度 值越大 越快 -->
<marquee behavior="" direction="down" scrollamount="300">
我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人我认识两个人
</marquee>
</body>
5.max-height: 200px;最大高度
/* 最小高度 */
min-height: 100px;
6.calc表示大小的
<style>
*{
margin: 0;
padding: 0;
}
div{
height: calc(389px - 23px - 66px);
/* width: 100%-396px; */
/* 可以利用calc(数学表达式)来实现 注意 运算符前后需要有空格 */
width: calc(100% - 396px);
background: springgreen;
}
</style>
</head>
<body>
<!-- calc() 函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则； -->
<div></div>
</body>
8.
.
9.
10.
图片垂直居中
div{
width: 600px;
height: 400px;
background: red;
/* 文字/图片/input框 统称为文本 */
/* 我们有一个css属性 文本水平居中 */
text-align: center;
/* 单行文本垂直居中 设置行高=高度值 */
line-height: 400px;
}
img{
vertical-align: middle;
}
11.
先写html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式表的引入 -->
<link rel="stylesheet" href="../css/jk.css">
</head>
<body>
<!-- 第一大部分 测量高度是606 整个设计图高度是721 606/721=84% -->
<div id="banner">
<img src="../images/banner.jpg" alt="">
</div>
<!-- 导航栏 -->
<div id="nav">
<p>
<a href="javascript:;">首页</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">CN/EN</a>
</p>
</div>
<!-- 尾部 -->
<div id="footer">
<p>
版权所有：浙江王力门业有限公司
<span>技术支持：派桑网络</span>
</p>
</div>
</body>
</html>
再写css
/* 去除页面缝隙 */
*{
margin: 0;
padding: 0;
}
/* 一整屏页面必备条件 */
html,body{
height: 100%;
overflow: hidden;
}
#banner{
width: 100%;
height: 84%;
background: red;
}
/* 我希望我的图片 和父元素一致 */
#banner img{
width: 100%;
height: 100%;
}
/* ------导航栏 */
#nav{
width: 100%;
height: 10.7%;
/* 父相子绝 */
position: relative;
}
#nav p{
/* 设置定位 */
position: absolute;
left: 0;
top: 50%;
/* 块状元素 设置完浮动或者绝对定位或者固定定位之后 宽度由内容撑开 你可以自定义宽度 */
width: 100%;
margin-top: -10px;
text-align: center;
}
#nav a{
text-decoration: none;
color:#323232;
font-size: 12px;
padding:0 20px;
}
/* 尾部 */
#footer{
width: 100%;
height: 5.3%;
font-size: 12px;
color:#9d9d9d;
position: relative;
background: #f0f0f0;
}
#footer p{
position: absolute;
left: 0;
top: 50%;
margin-top: -10px;
width: 100%;
text-align: center;
}
#footer span{
margin-left: 18px;
}
12.三栏布局
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 300px;
height: 500px;
background: springgreen;
float: left;
}
.center{
background: tan;
height: 800px;
/* 设置成BFC */
overflow: hidden;
}
.right{
width: 200px;
height: 500px;
background: tomato;
/* 设置右浮 */
float: right;
}
</style>
</head>
<body>
<!-- 注意！！！三栏的结构 必须是 左右中 -->
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
13.BFC应用之两栏布局
两栏布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 300px;
height: 600px;
background: yellow;
float: left;
}
.right{
/* 注意不设置宽度 */
height: 800px;
background: springgreen;
overflow: hidden;
}
/* bfc区域 与 浮动区域不重叠 */
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
