静态网页设计 - 科幻电影分享（HTML+CSS+JavaScript）

/*基础设定*/ *{margin: 0;padding: 0;} body{ font-family: '黑体'; font-size: 16px; color: #464141; width: 1000px; margin: 0 auto; background: #1F1F1F; } /*版心*/ .w{ width:1000px; margin:0 auto; background:#000000; height: 120px; border-radius: 15px; } .logo{ float: left; margin: 0px 80px 0 0; height: 80px; } .w li{ margin: 40px 0 0 0; margin-left: 50px; list-style-type: none; font-size : 20pt; float: left; color:#B9B9B9; } .w li:hover{ color:#B9B9B9; background:#3A3939; } .w a { color:#ABABAB; font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/ text-decoration:none; /*CSS下划线效果：无下划线*/ } .w a:hover { color:#ABABAB; text-decoration:none; /*CSS下划线效果：无下划线*/ border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/ } /*头部*/ .head{ height: 120px; line-height: 70px; text-align: center; font-family: '微软雅黑'; } .head strong{ font-size: 30px; font-weight: normal; } .head em{ font-size: 13px; font-style: normal; } /*分类*/ .head2{ width: 1000px; margin: 0 auto; text-align: center; } .head2 p{ line-height: 30px; font-size: 30px; color:aliceblue; opacity:0.5; } .head2 p:hover { opacity:1; } .shouhou{ text-align: center; margin: 0 auto; } h4{ font-size: 30px; margin: 0 auto; text-indent: 2em; } h5{ text-indent: 2em; line-height: 26px; font-size: 14px; } .box{ position: relative; } .box-img{ position: absolute; left: 0; top: 0; opacity: 0; transition: all 1s; } .box-img:nth-child(1){ opacity: 1; } .box-left{ position: absolute; width: 35px; height: 50px; color: #585858; top: 170px; text-align: center; font-size: 28px; line-height: 45px; } .box-left:hover { color: aliceblue; background: #474445; } .box-right{ position: absolute; width: 35px; height: 50px; color: #585858; top: 170px; text-align: center; font-size: 28px; line-height: 45px; left: 565px; } .box-right:hover { color: aliceblue; background: #474445; } .box-zhiding{ position: absolute; top: 310px; left: 500px; } .box-zhiding>ul{ padding:0; magin:0; list-style: none; } .box-zhiding li{ width: 14px; height: 14px; border-radius: 100%; background-color: #ccc; float: left; margin-right: 10px; } .box-zhiding li:hover{ background-color: aliceblue; } .pinglun{ width:1000px; margin:0 auto; background:#000000; height: 337.5px; } .pinglun img{ height:337.5px; float: right; } .pinglun p{ float: right; } .last2{ width:1000px; margin:0 auto; background:#000000; height: 120px; border-radius:60px; top:1000px; position: absolute; } .last2 p{ margin-left: 400px; margin-top: 20px; } .caidan{ background: #000000 none repeat scroll 0 0; color: #e6e6e6; line-height: 30px; width: 140px; border-bottom: 1px solid #000000; position: fixed; top: 200px; right: 50px; } .caidan-box{ border-bottom: 1px solid #666; color: aliceblue; } .caidan-box-item{ height: 0; overflow: hidden; background-color: #544949; margin: 0; padding-left: 20px; transition: 0.5s; } .caidan:hover .caidan-box:hover .caidan-box-item{ height: 100px; } .candan li{ color:#B9B9B9; } .caidan li:hover{ color:#B9B9B9; background:#3A3939; } .candan-box-item a { color:aliceblue; text-decoration:none; } .caidan a { color:#ccc; font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/ text-decoration:none; /*CSS下划线效果：无下划线*/ } .caidan a:hover { color:#ccc; text-decoration:none; /*CSS下划线效果：无下划线*/ border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/ } .about{ width: 1000px; margin: 0 auto; top:650px; position: absolute; } .about-txt{ position: absolute; left: 350px; top:10px; color:#B6B6B6; }