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{ 200px; height: 30px;color: #FFF ;font-size: 14px; line-height: 30px ;text-align: center;background-color: #063}
            .chb02{ 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{ 1000px;
            height: 2000px;
            background-color:#930;
            margin: 0px auto;
        }

        .moban{
                100%;
                height: 2000px;
                background-color: black;
                opacity: 0.5;
                position: fixed;
                left: 0px;
                top: 0px;
              display: none;
        }

        .deng{
            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;
                    980px;
                    height: 185px;
                    background-color: #888888;
            }
            .pao ul li
            {
                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>

荣耀存于心，而非留于形我还在寻找，回家的路长路漫漫，唯剑做伴且随疾风前行，身后一许流星吾虽浪迹天涯，却未迷失本心