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 ...
随机推荐
- 手Q兴趣号的价值在哪里
拥有5.21亿月活跃用户,如果不做点什么东西出来,实在是浪费至极.如此庞大的用户量,如果能够将内容贡献出来,那将是恐怖的,QQ空间产品就是很好的佐证. QQ群让个体用户能够连接在一起,单个的用户关系链 ...
- Android横竖屏切换
ps:虽然现在的app一般都是固定一个屏幕方向,但是还是有必要了解下屏幕切换的方法和注意. 一 固定横竖屏 androidmainfest.xml中设置activoty属性:android:scree ...
- Jexus web server V5.4.5 已经发布
Jexus 是运行于 Linux/FreeBSD 平台的一款以支持 ASP.NET 为主要特色的,同时非常重视安全性和稳定性的高性能 WEB 服务器.最新版 5.4.5 已经发布,官方网站是:www. ...
- 让 File Transfer Manager 在新版本WIndows上能用
最近研究.NET NATIVE,听说发布了第二个预览版,增加了X86支持,所以下,发现连接到的页面是:https://connect.microsoft.com/VisualStudio/Downlo ...
- CSS3之绽放的花朵(网页效果--每日一更)
今天,带来的是纯CSS3打造的效果--绽放的花朵. 先来看效果吧:亲,请点击这里 这是纯CSS3样式打造的效果,关键是采用了animation属性和transform属性.详细请看下面代码. HTML ...
- [.NET领域驱动设计实战系列]专题六：DDD实践案例：网上书店订单功能的实现
一.引言 上一专题已经为网上书店实现了购物车的功能了,在这一专题中,将继续对网上书店案例进行完善,本专题将对网上书店订单功能的实现进行介绍,现在废话不多说了,让我们来一起看看订单功能是如何实现的吧. ...
- 【Java】ThreadLocal细节分析
ThreadLocal通过中文解释就是线程本地变量,是线程的一个局部变量.根据哲学家黑格尔“的存在即合理”的说法,ThreadLocal的出现肯定是有它的意义,它的出现也是因为多线程的一个产物.Thr ...
- AlwaysON 故障处理之辅助副本磁盘空间不足
用户反馈AlwaysON辅助副本数据库查询的结果与主库不一致, 远程到服务器后发现数据库的状态显示为“未同步/可疑”, 查看数据库的日志,定位到出现错误的时间点,可以看到提示日志文件所在磁盘的“磁盘空 ...
- 如何开始DDD(完)
连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public class Domai ...
- SQLServer 随机生成指定范围的日期
一个分页的问题,DTCms3.0中,分页是根据时间分页的,如果当添加时间(add_time)都是同一个数值时,不管点击第几页,显示的数据都是同一个的内容,于是就有了需要把同一个时间改指定随机日期的功能 ...