html/css/js小技巧实例
一些学习中碰到的小技巧
让div自动撑起来：
.clearfix:after{
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
用css画出尖角/三角
transparent:表示透明
.icon{
display: inline-block;
border-top: 15px solid transparent;
border-bottom: 15px solid red;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
后台管理布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>manage</title>
<style>
body{
margin:0;
}
.head-menu{
height:48px;
background-color: #507aff;
}
.left-menu{
width: 200px;
background-color: greenyellow;
position: absolute;
top:48px;
left:0;
bottom: 48px;
}
.right-content{
background-color: #fff8ee;
position: absolute;
top:48px;
left:200px;
right:0;
bottom: 48px;
/*最重要的一句代码，它让这个div变得可以根据内容长短进行滚动*/
/*而其他的div却会保持位置不变*/
overflow: auto;
}
.pg-footer{
height: 48px;
background-color: #b095b6;
position: absolute;
bottom: 0px;
left:0;
right:0;
}
</style>
</head>
<body>
<div class="head-menu">
head menu
</div>
<div>
<div class="left-menu">
left menu
</div>
<div class="right-content">
right content
<p>ahaha</p>
<p>ahaha</p>
<p>ahaha</p>
</div>
</div>
<div class="pg-footer">
page footer
</div>
</body>
</html>
一个跑马灯或滚动条的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
</head>
<body>
<!--这是一个跑马灯或者滚动条的实例！-->
<div id="id1" style="background-color: red;color: yellow;display: inline-block;">
欢迎宝宝莅临指导工作
</div>
<script>
// 这是一个定时器，接受一个js代码语句作为执行对象，1000表示每1000毫秒执行一次！
setInterval("f1();",1000);
function f1() {
// 下面的方法获取id为id1的标签
var tag = document.getElementById("id1");
// 下面的方法获取该标签的内部文本
var text = tag.innerText;
// 下面都是对该字符串进行操作，将第一个字符放到最后去。
var a = text.charAt(0);
var temp_str = text.substring(1,text.length)
var new_string = temp_str + a
tag.innerText = new_string
}
</script>
</body>
</html>
DOM版本的模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.field{
z-index: 1;
}
.cover{
display: none;
z-index: 2;
position: fixed;
top:0;
right:0;
bottom: 0;
left:0;
background-color: #b6b0ad;
opacity: 0.8;
}
.input{
display: none;
z-index: 3;
width: 300px;
height:200px;
background-color: #fff;
border-radius: 20px;
position: fixed;
top:50%;
left:50%;
margin-left: -150px;
margin-top: -100px;
-webkit-box-shadow: 0 0 10px #0CC;
}
</style>
</head>
<body>
<div>
<fieldset id="1" class="field">
<legend>用户信息</legend>
<p id="username">用户名：</p>
<p id="usergender">性别：</p>
</fieldset>
<button type="button" onclick="show()">输入用户信息</button>
</div>
<div id="2" class="cover">
</div>
<div id="3" class="input">
<!--<form>-->
<div style="text-align: center;">
姓名：<input id = "name" type="text" />
</div>
<br />
<div style="text-align: center;">
性别：<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女"/>女
</div>
<br />
<div style="text-align: center;">
<input type="button" onclick="submit()" value="提交" />
</div>
<!--</form>-->
</div>
<script>
function show() {
var cover = document.getElementById("2");
cover.style.display = "block";
var input = document.getElementById("3");
input.style.display = "block";
}
function submit() {
var cover = document.getElementById("2");
cover.style.display = "none";
var input = document.getElementById("3");
input.style.display = "none";
var name = document.getElementById("name");
var text = name.value;
var p1 = document.getElementById("username");
p1.innerHTML="用户姓名："+text;
var mbtype = document.getElementsByName("gender");
var gender;
for(var i=0;i<mbtype.length;i++){
if (mbtype.item(i).checked) {
gender = mbtype.item(i).getAttribute("value");
break;
}
}
var p2 = document.getElementById("usergender");
p2.innerHTML="用户姓名："+gender;
}
</script>
</body>
</html>
利用JQuery实现模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.field{
z-index: 1;
}
.cover{
display: none;
z-index: 2;
position: fixed;
top:0;
right:0;
bottom: 0;
left:0;
background-color: #b6b0ad;
opacity: 0.8;
}
.input{
display: none;
z-index: 3;
width: 300px;
height:200px;
background-color: #fff;
border-radius: 20px;
position: fixed;
top:50%;
left:50%;
margin-left: -150px;
margin-top: -100px;
-webkit-box-shadow: 0 0 10px #0CC;
}
</style>
</head>
<body>
<div>
<fieldset id="1" class="field">
<legend>用户信息</legend>
<p id="username">用户名：</p>
<p id="usergender">性别：</p>
</fieldset>
<button type="button" id="show">输入用户信息</button>
</div>
<div id="2" class="cover">
</div>
<div id="3" class="input">
<!--<form>-->
<div style="text-align: center;">
姓名：<input id = "name" type="text" />
</div>
<br />
<div style="text-align: center;">
性别：<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女"/>女
</div>
<br />
<div style="text-align: center;">
<input type="button" id="submit" value="提交" />
</div>
<!--</form>-->
</div>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#2,#3").show();
});
$('#submit').click(function(){
var input = $("#name").val();
$("#1 p").first().append(input);
var g = $("input[name='gender']:checked").val();
alert(g);
$("#1 p").first().next().append(g);
$("#2,#3").hide();
});
});
</script>
</body>
</html>
搜索框
<input type="text" id="1" value="请输入关键字" onfocus="hide();" onblur="show();"/>
<script>
function hide() {
var e = document.getElementById("1");
if (e.value == "请输入关键字"){
e.value = "";
}
}
function show() {
var e = document.getElementById("1");
if (e.value.trim().length == 0){
e.value = "请输入关键字";
}
}
</script>
点赞的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>good</title>
<style>
.good{
position: relative;
}
</style>
</head>
<body>
<div class ="good">
<input type="button" value="点赞1" onclick="add(this);"/>
</div>
<div class ="good">
<input type="button" value="点赞2" onclick="add(this);"/>
</div>
<div class ="good">
<input type="button" value="点赞3" onclick="add(this);"/>
</div>
<div class ="good">
<input type="button" value="点赞4" onclick="add(this);"/>
</div>
<script>
function add(ths) {
var top = 12;
var left = 50;
var op = 1;
var fontSize = 10;
var tag = document.createElement("span");
tag.innerText = "+1";
tag.style.color = "green";
tag.style.position = "absolute";
tag.style.top = top +"px";
tag.style.left = left +"px";
tag.style.fontSize = fontSize +"px";
tag.style.opacity = op;
ths.parentElement.appendChild(tag);
var itv =setInterval(function () {
top -=10;
left +=10;
op -= 0.2;
fontSize += 5;
tag.style.top = top +"px";
tag.style.left = left +"px";
tag.style.fontSize = fontSize +"px";
tag.style.opacity = op;
if(op<=0.2){
clearInterval(itv);
ths.parentElement.removeChild(tag);
}
},50);
}
</script>
</body>
</html>
自适应的“返回顶部”功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>back</title>
<style>
body{
margin: 0;
}
.hide{
display: none;
}
.whole{
height: 2000px;
background-color: #a9e2bc;
}
.back{
width: 50px;
height:50px;
background-color: #B61D1D;
position: fixed;
right: 10px;
bottom: 10px;
color: white;
}
</style>
</head>
<body onscroll="show();">
<div class="whole">
看到这里，就是顶部！
</div>
<div id="back" class="back hide">
<span onclick="back();">返回顶部</span>
</div>
<script>
function back() {
document.body.scrollTop = 0;
}
function show() {
var s = document.body.scrollTop;
var sp = document.getElementById("back");
if(s >=100){
sp.classList.remove("hide");
}else{
sp.classList.add("hide");
}
}
</script>
</body>
</html>
