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 ...
随机推荐
- [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之灯光介绍Lights
[我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之灯光介绍Lights 既上一篇分享了中文字幕的摄像机介绍Cameras后,本篇分享一下第2个已完工的 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程（四）：Hello World
============= 以下写于2013-07-20 ============= 这一篇文章其实可以写在很前面,不过我还是希望开发者们尽多地了解清楚原理之后再下手. 通过上一篇Senparc.W ...
- Axis 1 https(SSL) client 证书验证错误ValidatorException workaround
Axis 1.x 编写的client在测试https的webservice的时候, 由于client 代码建立SSL连接的时候没有对truststore进行设置,在与https部署的webservic ...
- IOS UIView 01-View开始深入 绘制像素到屏幕上
注:本人是翻译过来,并且加上本人的一点见解. 前言 一个像素是如何绘制到屏幕上去的?有很多种方式将一些东西映射到显示屏上,他们需要调用不同的框架.许多功能和方法的结合体.这里我们大概的看一下屏幕之后发 ...
- IOS 手势-轻点、触摸、手势、事件
1.概念 手势是从你用一个或多个手指接触屏幕时开始,直到手指离开屏幕为止所发生的所有事件.无论手势持续多长时间,只要一个或多个手指仍在屏幕上,这个手势就存在. 触摸是指把手指放到IOS设备的屏幕上,从 ...
- Atitit 理解Monad attilax总结
Atitit 理解Monad attilax总结 但函数式编程最大的一个问题是,函数是一个数学抽象,在现实世界中不存在,1 那既然这样就够用了,还要 Monad 干嘛?Monad 的作用在这里就体现出 ...
- ELK日志应用平台搭建
ELK架构: ElasticSearch:用于存储.索引日志. Logstash:用于收集.处理和转发事件或日志信息的工具. Kibana:搜索和可视化的日志的WEB界面. ELK优点: a.处理方式 ...
- phpstudy80端口被占用时的解决方案
1.适合人群? 之前笔记本单独安装过Apache.php.mysql环境,但是后期想用集成开发环境phpstudy的,安装完phpstudy后(之前的单独环境依然存在),发现启动时,总是显示80端口被 ...
- angularjs定义全局变量
angularjs定义全局变量 三种方法 直接外层定义全局变量 利用ng的value定义全局变量 利用ng的constant定义全局变量 Takl is cheap, Show me the code ...
- 部署到IIS报错：HTTP错误500.19，错误代码0x800700d
title=部署到IIS报错:HTTP错误500.19,错误代码0x800700d. 用vs直接运行网站没问题,部署到IIS就报错,由此可知应该是IIS中不支持网站相关配置. 查找发现在web.c ...