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简单效果（幕布，跑马灯）的更多相关文章

  1. 设置TextView的密码效果以及跑马灯效果

    密码效果以及跑马灯效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  2. vue.js（4）--字符串跑马灯

    制作一个字符串的跑马灯效果 (1)实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. CSS效果：跑马灯按钮

    HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  4. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 前端用户体验优化： JS & CSS 各类效果代码段

    前言 不定时更新 在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/opt... 部分内容仅兼容webki ...

  6. js实现图片无缝循环跑马灯

    html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=&qu ...

  7. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Vue-使用计时器实现跑马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. iOS中跑马灯效果小结

    时光过得好快,记忆中刚刚从春节返回没有多久,清明.五一已飞逝而过,眨眼已到盛夏季节.不过还好,济南这两年不算太热,刚开始升温几天,一场及时雨总能让温度保持适宜.为了纪念一下青春的尾巴,也为了能有个健康 ...

随机推荐

  1. 【计算几何】【二分】【随机增量法】hdu6167 Missile Interception

    n个半径为R的圆是否有公共部分,等价于询问是否存在一个半径小于R的圆,能覆盖所有n个圆的圆心. 对这n个点求最小圆覆盖即可.从网上扒了个随机增量法的代码. 这样算上二分,复杂度就是nlogn了. #i ...

  2. 141.最小m 段和问题--划分性DP（特殊数据）

    3278 最小m 段和问题  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 给定 n 个整数(不一定是正整 ...

  3. 2015 百度之星 1003 棋盘占领 dfs

    棋盘占领 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://bestcoder.hdu.edu.cn/contests/contest_show ...

  4. java通过UUID生成16位唯一订单号

    import java.util.UUID; public class T { public static String getOrderIdByUUId() { int machineId = 1; ...

  5. UITabBarController 和 UINavigationController 的详解

    首先得搞清这两个控制器之间的层级关系,我们直接看官网给的图,如下所示: 从这张图可以看到:最右边的Assembled views是呈现给用户的界面,它左边的Window是最底层的窗口,重点来了,再往左 ...

  6. iOS:在使用Cocoapods安装shareSDK时出现的link路径错误

    CocoaPods 错误 target overrides the `OTHER_LDFLAGS`... Xcode 升级到 6.0 后,更新 CocoaPods,出现了如下的警告 [!] The ` ...

  7. ray tracing/shadow,reflection, caustic

    看了一下午终于明白raytracing的算法了 不知道这次能记住多久 ssr我又完全不记得了 按照Henrik所说 理解raytracing的核心在于,它是从Eye到light反着走的 需要一个前序的 ...

  8. UVa 615 - Is It A Tree?

    题目:给你一些有向边(端点,长度为1).推断给定的图是否是一棵树. 分析:图论.并查集.树是一个全部点都连接的有向无环图(不连接的是森林). 依照树的定义推断是否有环就可以,有环分成两种: 1.链状环 ...

  9. Struts2实现登录流程

    本节将演示一个基本的登录流程,在登录界面中若输入正确的用户名和密码,跳转到登录成功界面:否则路转到登录失败界面. 1 建立一个名为LoginDemo的动态Web项目 2 添加struts2相关的jar ...

  10. java map 分析

    java 8 对HashMap进行了优化, 当碰撞时使用TreeNode的二分方法查找数据: 但是当数据碰撞厉害的时候, table有很多浪费. table 大小等于size/factor, 当碰撞很 ...