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簡單效果（幕布，跑馬燈）
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。