H5学习笔记11 用css 背景和轮播图同步 css一整屏轮播 css横向轮播 css 三级菜单制作 表单新属性 盒子阴影 h5新增表单 音视频的引入
用css背景和轮播同步
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 #banner{
7 width: 100%;
8 /* 由版心撑开 */
9 animation: bgLunbo 4s linear infinite;
10 }
11 /* 创建背景轮播 */
12 @keyframes bgLunbo {
13 0%{background: #f00;}
14 33.33%{background: lightcoral;}
15 66.67%{background: blue;}
16 100%{background: #333;}
17 }
18 .bannerCon{
19 width: 794px;
20 /* h轮播图大小 */
21 height: 476px;
22 position: relative;
23 margin:0 auto;
24 overflow: hidden;
25 }
26 .lunbo{
27 /* w794*4 包裹四张轮播图大小 */
28 background-color: #f00;;
29 width: 3176px;
30 height: 476px;
31 position: absolute;
32 left:0;
33 top:0;
34 animation: imgLunbo 4s steps(4) infinite;
35 }
36 /* 解决banner图片3px问题 */
37 .lunbo img{
38 vertical-align: top;
39 border:0;
40 /* 让图片在lunbo横向展现排列 */
41 float: left;
42 }
43 /* 创建轮播动画 */
44 @keyframes imgLunbo {
45 0%{left:0;}
46 100%{left:-3176px;}
47 }
48 </style>
49 </head>
50 <body>
51 <div id="banner"><!-- 外围+版心 -->
52 <div class="bannerCon">
53 <div class="lunbo">
54 <img src="../images/1.png" alt="">
55 <img src="../images/2.png" alt="">
56 <img src="../images/3.png" alt="">
57 <img src="../images/4.png" alt="">
58 </div>
59 </div>
60 </div>
61 </body>
表单新增属性
1 <style>
2 /* 更改input框中placeholder文字样式 */
3 input::-webkit-input-placeholder{
4 color:cyan;
5 }
6 </style>
7 </head>
8 <body>
9 <!-- novalidate取消验证！！！！ -->
10 <form action="" novalidate>
11 <input type="text" placeholder="虚焦提示信息">
12
13 <!-- 正则验证 -->
14 <input type="text" pattern="[a-z]{5}" title="请输入5个小写字母">
15 <!-- min最小值 max 最大值 step间隔 -->
16 <input type="number" min="20" max="40" step="5">
17
18 <!-- multiple: 可写多个值 逗号隔开即可 -->
19 <input type="url" multiple>
20
21 <!-- 自动聚焦autofocus -->
22 <input type="text" autofocus>
23
24 <!-- 只读 就是你更改不了框中的内容 只能看 不能动 -->
25 <input type="text" readonly>
26
27 <!-- 必填项 required-->
28 <input type="text" required>
29
30 <!-- 历史记录自动补全autocomplete -->
31 <input type="text" list="demo" autocomplete="on">
32 <datalist id="demo">
33 <option value="张三丰"></option>
34 <option value="张无忌"></option>
35 <option value="张翠山"></option>
36 <option value="张二丰"></option>
37 <option value="张宇"></option>
38 </datalist>
39
40 <input type="submit">
41 </form>
42 </body>
盒子阴影
1 <style>
2 div{
3 width: 300px;
4 height: 400px;
5 background: red;
6 margin:100px auto;
7 /* 盒子阴影 */
8 /* box-shadow:阴影水平距离 阴影垂直距离 阴影模糊程度 阴影面积 阴影颜色; */
9 box-shadow: 0px 0px 20px 50px yellow;
10 /* box-shadow: 0px 0px 20px 50px yellow inset; inset代表阴影向内侧发散 */
11 }
12 </style>
13 </head>
14 <body>
15 <div></div>
16 </body>
css横向轮播
<style>
*{
margin:0;
padding:0;
}
body{
overflow-x: hidden;
}
#banner{
/* 一张图的宽高 */
width: 1440px;
height: 550px;
background: cyan;
margin:0 auto;
position: relative;
}
/* 解决banner图片3px问题 */
#banner img{
display: block;
border:0;
/* 让图片在lunbo里面横向展现 */
float: left;
}
.lunbo{
/* w 1440*4 包裹四张轮播图的大小 */
width: 5760px;
/* h一张图片的高度 */
height: 520px;
/* 轮播图的包裹框永远需要定位 */
position: absolute;
left:0;
top:0;
/* 添加动画 */
animation: wrapper 4s steps(4) infinite;
}
/* 创建动画 谁动 lunbo 动什么？ left */
/* 关键帧 @keyframes */
@keyframes wrapper {
0%{left:0;}
100%{left:-5760px}
}
</style>
</head>
<body>
<div id="banner">
<div class="lunbo">
<img src="../images/0.jpg" alt="">
<img src="../images/1.jpg" alt="">
<img src="../images/2.jpg" alt="">
<img src="../images/4.jpg" alt="">
</div>
</div>
</body>
css实现呼吸放大特效
1 <style>
2 .small{
3 width: 200px;
4 height: 300px;
5 background: tomato;
6 float: left;
7 margin:5px 30px;
8 /* 过渡时间 */
9 transition: 1s;
10 }
11 /* 鼠标滑过有盒阴影 */
12 .small:hover{
13 box-shadow: 0px 0px 20px 5px #000;
14 /* 变换 位移 */
15 transform: translateY(-5px);
16 }
17 </style>
18 </head>
19 <body>
20 <div class="small"></div>
21 <div class="small"></div>
22 <div class="small"></div>
23 <div class="small"></div>
24 <div class="small"></div>
25 <div class="small"></div>
26 <div class="small"></div>
27 <div class="small"></div>
28 <div class="small"></div>
29 <div class="small"></div>
30 <div class="small"></div>
31 <div class="small"></div>
32 <div class="small"></div>
33 <div class="small"></div>
34 <div class="small"></div>
35 <div class="small"></div>
36 <div class="small"></div>
37 <div class="small"></div>
38 <div class="small"></div>
39 <div class="small"></div>
40 <div class="small"></div>
41 <div class="small"></div>
42 <div class="small"></div>
43 <div class="small"></div>
44 </body>
css 三级菜单制作
<style>
*{
margin:0;
padding:0;
}
#banner img{
display: block;
border:0;
width: 100%;
height: 520px;
}
#banner{
position: relative;
height: 520px;
}
.lunbo{
width: 100%;
position: absolute;
left:0;
top:0;
height: 520px;
}
nav{
width: 1000px;
height: 60px;
background: cyan;
margin:0 auto;
line-height: 60px;
}
section{
float: left;
padding:0 45px;
border-right: 2px solid #f00;
position: relative;
}
.erji{
width: 100%;
list-style: none;
background: pink;
/* 二级永远定位 */
position: absolute;
left:0;
top:60px;
/* 定位层叠设置大一点 否则banner的轮播会盖住你 */
z-index: 2;
text-align: center;
/* 行高继承父元素的60px 我现在想要设置50 */
line-height: 50px;
/* 二级默认也不出现 */
display: none;
}
/* 啥时候二级出来啊 */
/* 鼠标滑过上方nav里面的section 二级出现 注意 二级是section的子元素哦 */
section:hover .erji{
display: block;
}
.erji>li{
border-bottom: 2px solid #f00;
}
.sanji{
/* 注意！！！我当下根据的不是父元素来定位 是有绝对定位属性的爷爷ul来定位的 */
width: 900px;
height: 520px;
background: yellow;
position: absolute;
left:154px;
top:0;
display: none;
}
/* 啥时候三级出来 滑过erji里面的li*/
.erji li:hover .sanji{
display: block;
}
</style>
</head>
<body>
<nav>
<section>全部商品
<ul class="erji">
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
<li>
衣服/鞋袜
<div class="sanji"></div>
</li>
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
<li>衣服/鞋袜</li>
</ul>
</section>
<section>子页</section>
<section>登录注册</section>
<section>列表页</section>
<section>详情</section>
<section>购物车</section>
</nav>
<div id="banner">
<div class="lunbo">
<img src="../images/2.png" alt="">
</div>
</div>
</body>
css一整屏轮播
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 #banner{
7 height: 520px;/* 一张图大小 */
8 width: 100%;/* 一整屏 */
9 overflow: hidden;
10 position: relative;
11 }
12 #banner img{
13 /* 解决图片3px问题 */
14 display: block;
15 border:0;
16 /* 想让图片横向展现在lunbo里面 */
17 float: left;
18 /* 设置宽度 */
19 width: 25%;
20 height: 520px;
21 }
22 .lunbo{
23 width: 400%;
24 height: 520px;
25 position: absolute;
26 left:0;
27 top:0;
28 animation: wrapper 4s steps(4) infinite;
29 }
30 /* 创建动画 */
31 @keyframes wrapper{
32 0%{left:0;}
33 100%{left:-400%;}
34 }
35 </style>
36 </head>
37 <body>
38 <div id="banner">
39 <div class="lunbo">
40 <img src="../images/0.jpg" alt="">
41 <img src="../images/1.jpg" alt="">
42 <img src="../images/2.jpg" alt="">
43 <img src="../images/4.jpg" alt="">
44 </div>
45 </div>
46 </body>
音视频的引入
1 <body>
2 <!-- 音频的引入 利用资源管理器source来引入不同格式的音视频 来兼容各大浏览器-->
3 <audio autoplay controls loop muted>
4 <source src="../video/a.mp3" type="audio/mpeg">
5 <source src="../video/c.mp4" type="audio/mpeg">
6 <source src="../video/movie.ogg" type="audio/ogg">
7 <source src="../video/movie.webm" type="audio/webm">
8 </audio>
9
10 <!-- 视频的引入 利用资源管理器source来引入不同格式的音视频 来兼容各大浏览器-->
11 <video autoplay controls loop="2" muted>
12 <source src="../video/c.mp4" type="video/mp4">
13 <source src="../video/movie.ogg" type="video/ogg">
14 <source src="../video/movie.webm" type="video/webm">
15 </video>
16
17 autoplay自动播放 controls控制条 loop循环播放 muted静音
18 </body>
H5新增表单
1 <body>
2 <form action="">
3 <!-- 1、数字框 number-->
4 <!-- min最小值
5 max最大值
6 step间隔 -->
7 <input type="number">
8 <input type="number" min="10" max="20" step="5">
9
10 <!-- 2、范围框 range-->
11 <!-- step间隔 -->
12 <input type="range">
13 <input type="range" step="10">
14
15 <!-- 3、邮件框email -->
16 <input type="email">
17 <!-- multiple可以写多个邮箱 英文逗号隔开 -->
18 <input type="email" multiple>
19
20 <!-- 4、网址框 url-->
21 <input type="url">
22 <!-- multiple="2可以写2个网址 英文逗号隔开 -->
23 <input type="url" multiple="2">
24
25 <!-- 5、搜索框 search-->
26 <input type="search">
27
28 <!-- 6、颜色框 color -->
29 <input type="color">
30
31 <!-- 7、日期相关的 -->
32 <!-- 年月 -->
33 <input type="month">
34 <!-- 年周 -->
35 <input type="week">
36 <!-- 年月日 -->
37 <input type="date">
38
39 <!-- 时分 -->
40 <input type="time">
41
42 <!-- 年月日时分 -->
43 <input type="datetime-local">
44
45 <!-- 数据表单关联 -->
46 <input type="text" list="gouzi">
47 <datalist id="gouzi">
48 <option value="张鹏旭" label="最像吴彦祖的男人"></option>
49 <option value="宋小宝" label="宝哥，最有意思的男人"></option>
50 <option value="老八" label="秘制小汉堡"></option>
51 <option value="四哥" label="舞蹈担当"></option>
52 <option value="哈拉少" label="酒量最大的男人"></option>
53 </datalist>
54
55 <input type="submit">
56 </form>
57 </body>
浙公网安备 33010602011771号