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>
html/css/js小技巧实例的更多相关文章
- 一些CSS/JS小技巧
CSS部分 1.文本框不可点击 .inputDisabled{ background-color: #eee;cursor: not-allowed;} 2.禁止复制粘贴 onpaste=" ...
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- js小技巧总结
js小技巧总结 1.Array.includes条件判断 function test(fruit) { const redFruits = ["apple", "stra ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- javascript小技巧-js小技巧收集(转)
本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...
- 一些常用的html/CSS效果---小技巧
我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...
随机推荐
- objective-c（继承）
objective-c的继承给出基础例子及注意点: 定义并实现基类ClassA #import <Foundation/Foundation.h> @interface ClassA : ...
- Request中的各种方法
前言 Request中方法众多,对于Java Web程序员来说,种种方法都会在工作中常常用到.Request由于不是JDK的一部分,这些方法的用法也没有专门的API可以查,所以在工作中遇到Reques ...
- 基于百度翻译API开发属于自己的翻译工具
你是否每天使用着网页翻译工具?你是否遇到过这种情况,上网过程中遇到一个很长的单词但是又不能复制,要开两个浏览器,一个打开百度翻译,照着另一个网页输入单词?你安装了各种翻译软件后,又删除,只因忍受不了那 ...
- [ACM_动态规划] 找零种类
问题描述:假设某国的硬币的面值有 1.5.10.50 元四种,输入一个金额 N (正整数,N<=1000),印出符合该金额的硬币组合有多少种. 问题分析: 1.5.10 元组合出 N 元的方法数 ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- Objective-C实现发短信和接电话
发短信: [[UIApplication sharedApplication]openURL:[NSURL URLWithString:@"sms://10000"]]; 打电话: ...
- Atitit jsr规范有多少个 407个。Jsr规范大全
Atitit jsr规范有多少个 407个.Jsr规范大全 1.1. JCP维护职能是发展和更新.1 1.2. Java技术规范.参考实现(RI).技术兼容包(TCK)1 1.3. JCP维护的规范 ...
- Cocos2d-x 3.X手游开发实例详解
Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...
- 百度面试题 字符串相似度 算法 similar_text 和页面相似度算法
在百度的面试,简直就是花样求虐. 首先在面试官看简历的期间,除了一个自己定义字符串相似度,并且写出求相似度的算法. ...这个确实没听说过,php的similar_text函数也是闻所未闻的.之前看s ...
- 转载：css3 content 生成内容
本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...