HTML5零散知识点总结
1.产生ioc图标的网站：
http://www.bitbug.net/
链接ioc图标：
<link rel="shortcut icon" type="image/x-icon" href="img/my.ico" />
2. css3图片充满全屏：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
#div1 > img {
height:100%;
width:100%;
border:0;
}
body{ font-family: 'Heiti SC', 'Microsoft YaHei';}
</style>
</head>
<body>
<div id="div1"><img src="img/img.jpg" /></div>
图片充满全屏
</body>
</html>
运行效果：
2. 图片轮播+图片上方有li导航
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#center_img {
position: relative;/*这个div包含了图片及上方的导航 让它相对定位*/
}
.c_img{
position: absolute;
top: 0;
background: #4c4c4c;
width: 260px;
height: 506px;/*这个div包含了上方的导航 让它相对于他的父级#center_img绝对定位 这样他就会跟着大div动 不会乱*/
}
.c_img ul{
margin: 16px 0 0 0;
}
.c_img li{
font-family: 'Heiti SC', 'Microsoft YaHei';
list-style: none;
color: white;
height: 47px;
line-height: 47px;
width: 100%;
display: inline-block;
cursor: pointer;
font-size: 15px;
}
.c_img li a{
margin-left: 30px;
}
.c_img li span{
float: right;
margin-right: 20px;
font-size: 21px;
}
.c_img li:hover{
background: #ff6700;
}
</style>
</head>
<body>
<div id="center_img">
<img id="img" width="100%" height="506" src="img/1.jpg"/>
<div class="c_img">
<ul>
<li><a>手机 电话卡</a><span>></span></li>
<li><a>笔记本 平板</a><span>></span></li>
<li><a>电视 盒子</a><span>></span></li>
<li><a>路由器 只能硬件</a><span>></span></li>
<li><a>移动电源 电池 插线板</a><span>></span></li>
<li><a>耳机 音箱</a><span>></span></li>
<li><a>保护套 贴膜</a><span>></span></li>
<li><a>材料 支架 储存卡</a><span>></span></li>
<li><a>箱包 服饰</a><span>></span></li>
<li><a>米兔 生活周边</a><span>></span></li>
</ul>
</div>
</div>
<script>
window.onload=function(){
var index=2; setInterval(function(){
showImg();
var myimg=document.getElementById("img");
myimg.src="./img/"+index+".jpg";
index++;
if(index==4){
index=1;
}
},3000);
}
function changeOpacity(){
img=document.getElementById("img");
img.style.opacity=opa;
if(opa<0.9){
opa+=0.2;
setTimeout("changeOpacity()",50);
}
}
function showImg(){
opa=0.1;
changeOpacity();
}
</script>
</body>
</html>
运行效果：
备注有轮播
2.1 图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="center_img">
<img id="img" width="100%" height="506" src="imgs/pic1.jpg"/>
</div>
<script>
window.onload=function(){
var array=["pic1.jpg","pic2.jpg","pic3.jpg"];
var index = 1;
setInterval(function(){
showImg();
var myimg=document.getElementById("img");
myimg.src="./imgs/"+array[index]+"";
++index;
if(index>2){
index = 0;
}
},3000);
}
function changeOpacity(){
img=document.getElementById("img");
img.style.opacity=opa;
if(opa<0.9){
opa+=0.2;
setTimeout("changeOpacity()",50);
}
}
function showImg(){
opa=0.1;
changeOpacity();
}
</script>
</body>
</html>
3. 固定定位与导航
<!DOCHTML>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:100%;
height:100px;
border: 1px solid #2e6da4;
top:0px;
}
#div2{
width:100%;
height:40px;
background: #1E90FF;
line-height: 40px; }
#div2 a{
font-family: 'Heiti SC', 'Microsoft YaHei';
margin: 0 3% 0 7%;
color: cornsilk;
cursor: pointer;
transition: all 0.3s;
}
#div2 a:hover{color: #ff6700}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<script>
window.onload =function(){
//封装自己的scroll
function scroll(){
if(window.pageYOffset != null){
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
} var div2 =document.getElementById("div2");
window.onscroll = function() {
if(scroll().top >100){
div2.className = "fixed";
}else {
div2.className = "";
}
}
}
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2"><a>导航条固定</a><a>导航条固定</a><a>导航条固定</a><a>导航条固定</a><a>导航条固定</a><a>导航条固定</a></div>
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br />
<p>aaaaa<br /> </body>
</html>
运行效果：
4. 遮罩层
示例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩层</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<style type="text/css">
/*最大的遮罩*/
#loadingDiv{
position:fixed;
display:none;
z-index:2;
top:0px;
left:0px;
opacity: 0.8;
width:100%;
height:100%;
background:#4c4c4c;
}
/*遮罩里面的大框*/
#popup{
position: fixed;
left: 25%;
top:25%;
margin: 0 auto;
display:none;
z-index:3;
background-color:whitesmoke;
height: 50%;
width: 50%;
text-align:center;
font-family: 'Heiti SC', 'Microsoft YaHei';
}
/*遮罩大框下方*/
#embedding{
position: absolute;
background-color: #36F;
bottom: 0;
width:100%;
line-height:56px;
text-align:center;
}
#close{
width: 100%;
height: 13%;
background: #ff6700; }
#close span{
line-height: 40px;
font-size: 20px;
color: white;
}
#close img{
float: right;
margin: 4px 6px 0 0;
cursor: pointer;
border-radius: 15px;
}
#popup a{
text-decoration: none;
margin-right: 30px;
color: white;
cursor: pointer;
} </style>
<script type="text/javascript">
$(function(){
$(document).on('click','button',function(){
$('#loadingDiv').css('display','block');
$('#popup').slideDown();
});
$(document).on('click','a',function(){
if($(this).text()=='确定'){
location.href="http://www.cnblogs.com/zhangyongl/";
}else{
$('#loadingDiv').css('display','none');
$('#popup').slideUp();
}
}); $(document).on('click','img',function(){
$('#loadingDiv').css('display','none');
$('#popup').css('display','none');
});
});
</script>
<body>
<a href="BFC1.html">1212</a>
<div id="loadingDiv"></div>
<div id="popup">
<div id="close">
<span>提示</span>
<img src="img/cross.png" height="30" width="30"/></div>
<div id="embedding">
<a >确定</a>
<a >取消</a>
</div>
</div>
<button >登陆</button><br></br></br></br></br></br></br></br></br></br></br></br></br></br>1212</br>1212</br>1212</br>1212</br>1212</br></br></br>1212</br>1212</br>1212</br>1212</br>1212</br></br></br>1212</br>1212</br>1212</br>1212</br>1212</br></br></br>1212</br>1212</br>1212</br>1212</br>1212</br></br></br>1212</br>1212</br>1212</br>1212</br>1212</br>
</body>
</html>
运行效果：
5 DIV里面文本根据宽度自动换行
#div{word-break:break-all;width:200px;}
运行效果：
文章不会横向撑出div外面
5 oppo 新品与热卖
<!DOCTYPE html>
<html>
<head>
<title>新品</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#content{
font-family: "微软雅黑";
border-top: 1px solid #ccc;
width: 1205px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.box{
border: solid 1px #ccc;
width: 300px;
height: 500px;
float: left;
position: relative;
overflow: hidden;
margin:-1px -1px 0 0;
}
img{
margin-top: 40px;
width: 300px;
height: 300px;
}
.p2{margin-top: 30px;
color: #1f8657;
font-size: 18px;
}
.span1,.span2{
position: absolute;
top: 20px;
right: -60px;
height: 40px;
line-height: 40px;
width: 200px;
color: #fff;
display: block;
transform: rotate(45deg);
background: #39bf9A;
box-shadow: 5px 5px 5px #3c3c3c;
}
.span2{
background: #fb5151;
box-shadow: 5px 5px 5px #dedbda;
}
</style>
</head>
<body>
<div id="content">
<div class="box">
<span class="span1">新品</span>
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<span class="span2">热卖</span>
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<span class="span1">新品</span>
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<span class="span2">热卖</span>
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
<div class="box">
<img class="img" src="./imgs/oppo.png">
<p class="p1">A57 玫瑰金 1600万美颜自拍</p>
<p class="p2">￥1599.00</p>
</div>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>新品与热卖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#content{
font-family: "微软雅黑";
border-top: 1px solid #ccc;
width: 1205px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.box{
border: solid 1px #ccc;
width: 300px;
height: 500px;
float: left;
position: relative;
overflow: hidden;
margin:-1px -1px 0 0;
}
img{
margin-top: 40px;
width: 300px;
height: 300px;
}
.p2{margin-top: 30px;
color: #1f8657;
font-size: 18px;
}
.span1,.span2{
position: absolute;
top: 20px;
right: -60px;
height: 40px;
line-height: 40px;
width: 200px;
color: #fff;
display: block;
transform: rotate(45deg);
background: #39bf9A;
box-shadow: 5px 5px 5px #3c3c3c;
}
.span2{
background: #fb5151;
box-shadow: 5px 5px 5px #dedbda;
}
</style>
<script src="./js/jquery-1.10.2.min.js"></script> </head>
<body>
<div id="content">
</div>
<script type="text/javascript">
var obj=[{name:"dack1",price:"￥1338",desc:"A57 玫瑰金 1600万美颜自拍",url:"./imgs/oppo.png",state:"热卖"},
{name:"dack2",price:"￥1308",desc:"R9s 黑色版 全新配色",url:"./imgs/oppo1.png",state:"新品"},
{name:"dack3",price:"￥1208",desc:"R9s 黑色版 全新配色",url:"./imgs/oppo2.png"},
{name:"dack4",price:"￥2328",desc:"R9s 黑色版 全新配色",url:"./imgs/oppo3.png",state:"热卖"},
];
var state;
$.each(obj,function(index,obj){
$("#content").append(
"<div class='box'>"+
"<span>"+obj.state+"</span>"+
"<img class='img' src="+obj.url+">"+
"<p class='p1'>"+obj.desc+"</p>"+
"<p class='p2'>"+obj.price+"</p>"+
"</div>"
);
state=obj.state;
if (state=="热卖") {
$(".box span").eq(index).addClass("span2");
}else if(state=="新品"){
$(".box span").eq(index).addClass("span1");
}else if(state == undefined){
$(".box span").eq(index).empty();
}
});
</script>
</body>
</html>
运行效果：
6. 按钮
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>test</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
button{
margin: 100px;
width: 100px;
transition: 0.3s all;
background: #d9534f;
color:white;
}
button:hover{
background: #449d44;
width: 120px;
color: white !important;
}
button span{
font-size: 12px;
margin-left: 6px;
transition: 0.5s all;
}
button:hover span{
color: white;
transform: translate(16px);
}
</style>
</head>
<body>
<button class="btn">确定<span class="glyphicon glyphicon-arrow-right"></span></button>
</body> </html>
运行效果：
6. 手机端成功页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>报价成功页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
.p{
text-align: center;
font-family: "microsoft yahei";
font-size: 20px;
margin-top: 40px;
}
.oBtn{
text-align: center;
}
.oBtn button:last-child{
margin-left: 40px;
}
.oBtn button:first-child{
margin-right: 20px;
}
.box{
background: #228B22;
width: 200px;
height: 200px;
border: 3px solid #E3E3E3;
border-radius: 100px;
margin: 0 auto;
position: relative;
top: 20px;
}
.oBox{
width: 100px;
height: 60px;
border: 3px solid white;
border-radius: 3px;
position: absolute;
top: 45px;
left: 47px;
border-top: none;
border-right: none;
border-right: none;
transform: rotate(-55deg);
}
</style>
</head>
<body>
<div class="box">
<div class="oBox"></div>
</div>
<p class="p">报价成功</p><br />
<div class="oBtn">
<button type="button" class="btn btn-info">首页</button>
<button type="button" class="btn btn-danger">前往商城</button>
</div>
</body>
</html>
运行效果：
HTML5零散知识点总结的更多相关文章
- ACM个人零散知识点整理
ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...
- Android 零散知识点整理
Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...
- Android零散知识点积累
本文仅在记录android开发中遇到的零散知识点,会不断更新... 目录 .隐藏系统标题栏 .图片尺寸及屏幕密度 3.获取顶部状态栏高度 1.隐藏系统标题栏 1)在资源文件styles.xml中定义样 ...
- HTML5实用知识点
本文讲解HTML5实用知识点 新增的表单type Canvas使用 SVG使用 Audio使用 Video使用 网页缓存 文件缓存 后台worker Server-Sent Events 定位 拖放功 ...
- HTML5易漏知识点锦集
本文通过对w3schoolHTML5基础教程,整理出比较常见的却又容易遗忘或者忽略的HTML5相关知识点.本文的标题顺序与w3school中的HTML5基础教程标题顺序保持一致.适合翻阅和复习. 1. ...
- JavaScript 零散知识点1 （正则表达式+定时器+hover）
1.clear:both清楚浮动影响//css中 2.正则表达式 search方法 :指明是否存在相应的匹配,如找到一个返回一个整数值,表明这个匹配距离字符串开始的偏移位置,如果没有找到匹配返回-1f ...
- HTML5基本知识点
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML的基本格式 <!DOCTYPE html>: ①文档类型声明:让浏览器按照 ...
- 零散知识点总结(持续更新……)
这篇博客用于记录平时学习中遇到的零散的知识点,它们不适于单独写一篇长博客,在这里记录下来一是为了增强记忆,二是为了方便复习总结.这篇博客会持续更新... 一.JS数据类型及类型判断 1. JS ...
- 【温故知新】——HTML5重要知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...
随机推荐
- ExceptionHelper异常工具类
using System;using System.Collections.Generic;using System.Text; namespace JiaWel.Utilities{ public ...
- java 多线程执行过程
1.分支线程执行 过程: 2．线程运行的状态:五大状态 线程: 从新建状态 就绪状态 运行状态 挂起(阻塞)状态 死亡状态(结束,销毁) 3. 多线程:在同一个时间执行多个任务的操作,现在的软 ...
- 用css3+js写了一个钟表
有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...
- type="button"和type="submit"的区别
type=＂button＂ ,＂submit＂ 的区别(转) Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=s ...
- js 闪动元素
<style> #div1{width:500px;height:100px;background:#888;font-size:5px;margin:0 auto;color:yello ...
- Linux基础之命令练习Day2-useradd（mod，del），groupadd（mod，del），chmod，chown，
作业一: 1) 新建用户natasha,uid为1000,gid为555,备注信息为“master” 2) 修改natasha用户的家目录为/Natasha 3) 查看用户信息配置文件的最后一行 4) ...
- 【2014-08-23】Beyong Coding
be a product engineer,not be a engineer 选择比努力更重要 just code it,code it ,until you make it 缺的不是i ...
- 【Python】猜数小游戏（文件操作）
人生苦短,我用Python 关键词 1.多用户 2.字典记录所有成绩 3.每次游戏轮数&总游戏次数&平均每次游戏需要多少轮 字典Dictionary.列表List.元组Tuple差异化 ...
- SpringMVC学习（二）——基于xml配置的springMVC项目（maven+spring4）
可运行的附件地址:http://files.cnblogs.com/files/douJiangYouTiao888/springWithXML.zip 项目说明: 作者环境:maven3+jdk1. ...
- Android学习——文件存储
在Andriod开发中,文件存储和Java的文件存储类似.但需要注意的是,为了防止产生碎片垃圾,在创建文件时,要尽量使用系统给出的函数进行创建,这样当APP被卸载后,系统可以将这些文件统一删除掉.获取 ...