本周我学习了轮播图和网页弹出层的做法,还有一些零零散散的小东西,下面我就详细说说
轮播图
轮播图这里我只是做一个静态的样式,因为让他真正动起来这件事涉及到js,所以这里我就不会了.
没有办法作者就是菜狗.
- 轮播图一般用一个div.banner(表示轮播图的)表示
- 一般来说轮播图都是当链接使用,所以div下面要放几个a元素来包裹图片
- banner的大小高度是一定的,宽度就是图片单张宽度乘以图片数量,然后图片要水平排列,这里给a元素来一个浮动即可.记得每张图片大小要设置成轮播图窗口的宽高.
- 接着让js改变轮播图定位的数值就可以了,这部分涉及js我也不会就很尴尬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.banner{
width: 520px;
height: 1200px;
position: relative;
left: 50%;
}
.banner .imgs{
width: 520px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="banner">
<a href="" class="imgs"><img src="" alt=""></a>
<a href="" class="imgs"><img src="" alt=""></a>
<a href="" class="imgs"><img src="" alt=""></a>
</div>
</body>
</html>
这个的图就不放了,没有效果咱们也看不出来
弹出层
- 在网页上下滑动时要求弹出层的位置不能改变,相关元素需要使用绝对定位
- 弹出层首先需要一个蒙层,div.moadl表示.做成灰色半透明(rgba(红,绿,蓝,50%))绝对定位大小100%即可
- 然后建一个比较小的框,里面随便写点东西当成弹出的功能小窗口也使用固定定位,(这里也可以用相对定位,上一级元素就是一个固定定位元素).
- 建一个元素,其中就简单的先写上x(图标还没学到)
然后移动它到弹出窗口的右上角,设置border-radius: 50%;即可
.moadl{
display: none;
background-color: #B3B3B3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
}
.moadl
.main{
display: none;
background-color: #FFFFFF;
z-index: 11;
width: 200px;
height: 200px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}.moadl
.close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
iframe元素
在网页上显示另一个网页的元素
- src属性不解释
- scrolling:yes no auto 滚动条
- 宽高,就这三个比较重要的东西
4. flash嵌入
- object元素
初始有data和type属性,data用来引导打开文件的路径,type用来说明打开文件的类型(搜索mime可以查询类型对应的编码) - embed元素
一般写在object内部,如果浏览器可以识别object的话,embed会因为不能嵌套在object内部被自动忽略.如果不能识别它会寻找object的子元素,其中有embed就可以识别,这样的嵌套就做到了兼容
1385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
