js+css简单效果（幕布，跑马灯）
2.js普通的盒子，css的优先级
css的优先级
！important >>>>> style 行内样式 >>>>> #id选择器 # >>>>>>>> calss选择器 .类 ：hover（猥类）>> p标签 属性选择 >> 继承 >> 默认值
同等 看优先，
3.引入js 有·3种 头部 行内 外部
点击变色
<div id="chb" onclick="chb.style.color='#9eff97'">ssssss</div>
行内js 控制属性
行内 值 就是css的值 值用‘’ 写多个用 ；隔开 用id选择器获取 复杂单词，就是单词里面有 -号 的 去掉，然后后面的一个字母变成大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<style type="text/css">
.chb01{width: 200px; height: 30px;color: #FFF ;font-size: 14px; line-height: 30px ;text-align: center;background-color: #063}
.chb02{width: 200px;
height: 200px;
background-color: #b3d4fc;
display: none;
}
</style>
</head>
<body>
<div id="chb" onclick="chb.style.color='#9eff97'">ssssss</div>
<div class="chb01" onclick="tan.style.display='block';this.style.color='red'">登 录</div>
<div class="chb02" id="tan" ></div>
</body>
</html>
例子： 简单的弹出div 隐藏div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>j22s</title>
<style type="text/css">
.main{width: 1000px;
height: 2000px;
background-color:#930;
margin: 0px auto;
}
.moban{
width: 100%;
height: 2000px;
background-color: black;
opacity: 0.5;
position: fixed;
left: 0px;
top: 0px;
display: none;
}
.deng{
width: 650px;
height: 300px;
background-color: brown;
position: fixed;
left: 50%;
top: 50%;
margin-left: -325px;
margin-top: -150px;
display: none;
}
</style>
</head>
<body>
<div class="main">
<input type="button" value="登录" onclick="m.style.display='block';d.style.display='block'">
</div>
<div class="moban" id="m" onclick="this.style.display='none'" ></div>
<div class="deng" id="d" onclick="this.style.display='none'" >登录页面</div>
</body>
</html>
4.marquee标签 跑马灯
direction="down" 方向
scrollamount="1" 速度
behaviro="alternate" 行为 往返运动 scroll 转圈 slide 停靠
loop 循环 -1无限 对 slide无效
onmouseover="this.stop()" 鼠标移上去 就停止了
onmouseout="this.start()" 鼠标移除就 就开始了
display : inline-block; 有宽高。不换行 img
div display : block 有宽高，换行
a display :inline 无宽高 不换行
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<style type="text/css">
*{margin: 0px; padding: 0px; list-style-type: none}
.pao{
display: block;
margin: 0px auto;
padding: 10px;
width: 980px;
height: 185px;
background-color: #888888;
}
.pao ul li
{
width: 150px;
height: 185px;
float: left;
margin-right: 10px;
background-color: #993300;
overflow: hidden;
}
.pao ul li a
{
position: relative;
left: 0px;
top: 0px;
}
.pao ul li a:hover
{
left: 2px;
top: 2px;
}
</style>
</head>
<body>
<marquee class="pao" behaviro="alternate" onmouseover="this.stop()" onmouseout="this.start()">
<ul>
<li><a><img src="../img/QQ图片20160913204411.jpg" height="185" width="180"/> </a></li>
<li><a> <img src="../img/QQ图片20160913204421.jpg" height="185" width="180"/></a></li>
<li><a><img src="../img/QQ图片20160913204713.jpg" height="185" width="180"/> </a></li>
<li><a><img src="../img/QQ图片20160913204906.jpg" height="185" width="180"/> </a></li>
</ul>
</marquee>
</body>
</html>
js+css简单效果（幕布，跑马灯）的更多相关文章
- 设置TextView的密码效果以及跑马灯效果
密码效果以及跑马灯效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- vue.js（4）--字符串跑马灯
制作一个字符串的跑马灯效果 (1)实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS效果：跑马灯按钮
HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前端用户体验优化： JS & CSS 各类效果代码段
前言 不定时更新 在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/opt... 部分内容仅兼容webki ...
- js实现图片无缝循环跑马灯
html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=&qu ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue-使用计时器实现跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS中跑马灯效果小结
时光过得好快,记忆中刚刚从春节返回没有多久,清明.五一已飞逝而过,眨眼已到盛夏季节.不过还好,济南这两年不算太热,刚开始升温几天,一场及时雨总能让温度保持适宜.为了纪念一下青春的尾巴,也为了能有个健康 ...
随机推荐
- Java高级架构师（一）第38节：Nginx的负载均衡模块
负载均衡: 1.热备:如果你有2台服务器,当一台服务器发生事故时,才启用第二台服务器给提供服务.服务器处理请求的顺序:AAAAAA突然A挂啦,BBBBBBBBBBBBBB..... upstream ...
- 基于 Dapper 的一个 DbUtils
/// <summary> /// v1.0 /// </summary> public partial class DbUtils { string ConnectionSt ...
- Delphi 类引用 Class Reference 元类 MetaClass 用法
delphi中类引用的使用实例 类引用类引用(Class Reference)是一种数据类型,有时又称为元类(MetaClass),是类的类型的引用.类引用的定义形式如下: class of type ...
- [译]SQL数据库迁移：从低版到高版本
我见过太多的数据库管理员花大量的时间在数据库迁移上,即便在客户的实际环境亦是如此.由于微软频繁的发布新版,基于业务和客户的要求,应用服务不得不同时升级.当然,还有许多用户仍在使用SQL Server ...
- 原生js操作HTML DOM
先上图 1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表( ...
- JavaScript 开发的45个技巧2
http://mp.weixin.qq.com/s?src=3×tamp=1474692926&ver=1&signature=agI3W5rKmVC6GgbdTXh ...
- 基于tiny4412的Linux内核移植 -- PWM子系统学习（七）
作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...
- 方差分析anova
方差分析 参考:http://wiki.mbalib.com/wiki/%E6%96%B9%E5%B7%AE%E5%88%86%E6%9E%90 方差分析(Analysis of Variance, ...
- UINavigationController 详解
// 导航控制器 // 1. 比较常用的视图控制器管理类 // 2. 以栈的形式管理视图控制器, 先进后出 // 3. 创建navigation后, 视图控制器上会多出一个导航栏 // 4. 导航栏高 ...
- iOS:iOS开发系列–打造自己的“美图秀秀”(中)
来源: KenshinCui 链接:http://www.cnblogs.com/kenshincui/p/3959951.html 其他状态设置 常用的图形上下文状态设置上面基本都用到了,我们不再一 ...