1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 期末大作业+毕业设计:电影网站设计——影视大全(6页面)含登录注册HTML+CSS+JavaScript

期末大作业+毕业设计:电影网站设计——影视大全(6页面)含登录注册HTML+CSS+JavaScript

时间:2022-11-12 05:09:33

相关推荐

期末大作业+毕业设计:电影网站设计——影视大全(6页面)含登录注册HTML+CSS+JavaScript

1.网页作品简介方面 :HTML期末大作业也可以用做影视类网站的毕业设计 ,主要有:登录、主页、影院、电影、电视剧、推荐等总共 6个页面

2.网页设计方面:此作品为影视网页设计题材,代码为简单学生水平 html+css+JavaScript布局制作,作品下载后可使用任意HTML编辑软件 HBuilder、Vscode 、Webstorm 等

3.网页作品布局方面:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局。

作品展示

1.首页

2、影院

3、电影4、电视剧5、推荐

6、登入注册页面

全部文档

部分代码展示

1.index(网站首页)

HTML代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/common.css"><link rel="icon" href="./img/dragon.ico"><base href="#" target="_blank"><title>影视大全</title></head><body><!-- 头部导航 --><nav class="header"><div class="contain"><!-- logo区 --><a href="#" class="logo"><h1>影视大全</h1></a><!-- 选择城市区 --><div class="cityselect">天津<span class="iconfont down-deleta">&#xe503;</span><div class="city-list"><span class="postioncty">定位地区:<a href="#">天津</a></span><ul class="citys-wrapper"><li class="citys"><span class="fl">A</span><div> <a href="">阿拉善盟</a><a href="">鞍山</a><a href="">安庆</a><a href="">安阳</a><a href="">阿坝</a><a href="">安顺</a><a href="">安康</a><a href="">阿勒泰</a><a href="">阿克苏</a><a href="">安丘</a><a href="">安岳</a><a href="">安平</a><a href="">安宁</a><a href="">安溪</a><a href="">安化</a><a href="">阿勒泰市</a><a href="">安福</a></div></li><li class="citys"><span class="fl">B</span><div><a href="">北京</a><a href="">保定</a><a href="">保定</a><a href="">包头</a><a href="">本溪</a><a href="">巴彦</a><a href="">淖尔</a><a href="">白城</a><a href="">滨州</a><a href="">博山</a><a href="">璧山</a><a href="">宾阳</a><a href="">博白县</a><a href="">博罗县</a><a href="">北镇市</a><a href="">泊头市</a><a href="">北安市</a></div></li><li class="citys"><span class="fl">C</span><div><a href="">重庆</a><a href="">成都</a><a href="">长沙</a><a href="">常州</a><a href="">长春</a><a href="">沧州</a><a href="">承德</a><a href="">赤峰</a><a href="">长治</a><a href="">朝阳</a><a href="">池州</a><a href="">巢湖</a><a href="">滁州</a><a href="">潮州</a><a href="">常德</a><a href="">崇左</a><a href="">楚雄</a><a href="">昌吉</a><a href="">从化</a><a href="">常熟</a><a href="">昌邑</a><a href="">慈溪</a><a href="">长兴</a></div></li><li class="citys"><span class="fl">D</span><div><a href="">大连</a><a href="">东莞</a><a href="">大庆</a><a href="">大同</a><a href="">丹东</a><a href="">大兴安岭</a><a href="">东营</a><a href="">德州</a><a href="">德阳</a><a href="">达州</a><a href="">德宏</a><a href="">大理</a><a href="">迪庆</a><a href="">定西</a><a href="">敦煌</a><a href="">丹阳</a><a href="">东台</a><a href="">大丰</a><a href="">德清</a><a href="">东平</a><a href="">定州</a><a href="">东海</a><a href="">东明县</a><a href="">定安县</a><a href="">定陶区</a><a href="">定边县</a></div></li></ul></div></div><!-- 列表 --><ul><li><a href="./index.html">首页</a></li><li><a href="./cinema.html">影院</a></li><li><a href="./movie.html">电影</a></li><li><a href="./movie1.html">电视剧</a></li><li><a href="./billbored.html">推荐</a></li> </ul><!-- 用户登入 --><div class="userinfo"><img src="./img/userifo.png" alt="用户"><span></span><span class="user-menu"><a href="./Login.html">登录</a></span></div><!-- 搜索区 --><form action="#" class="serch-form" method="POST"><input type="search" class="search" placeholder="找影视剧 影人 影院"><input type="submit" class="submit" value=""></form></div></nav><!-- 横幅广告开始 --><div class="canner-wrap"><div class="canner-fl fl"><p><a href="">最新通知<span class="arrow-r">></span></a><span class="more-info"><span class="msg">1</span><span class="msg">2</span><span class="msg">3</span><span class="msg">4</span><span class="msg">5</span></span></p><p><a href="">电影推荐<span class="arrow-r">></span></a><span class="more-info"><span class="msg">满江红</span><span class="msg">流浪地球2</span><span class="msg">无名</span><span class="msg">深海</span><span class="msg">阿凡达</span></span></p><p><a href="">正在热映<span class="arrow-r">></span></a><span class="more-info"><span class="msg">回到明天</span><span class="msg">东北五仙</span><span class="msg">断网</span><span class="msg">三线轮洄</span><span class="msg">中国乒乓之绝地反击</span></span></p><p><a href="">新片速递<span class="arrow-r">></span></a><span class="more-info"><span class="msg">洗屋大师</span><span class="msg">君品谈.志之所趋</span><span class="msg">一世独尊</span><span class="msg">黑豹2</span><span class="msg">云襄传</span></span></p><p><a href="">综艺<span class="arrow-r">></span></a><span class="more-info"><span class="msg">明星大侦探</span><span class="msg">向往的生活</span><span class="msg">一起露营吧</span><span class="msg">哈哈哈哈哈/span><span class="msg">极限挑战</span></span></p><p><a href="">其他<span class="arrow-r">></span></a><span class="more-info"><span class="msg">1</span><span class="msg">2</span><span class="msg">3</span><span class="msg">4</span><span class="msg">5</span></span></p></div><div class="canner-fr fr"><ul class="announce"><li class="spec"><a href="">最新公告</a></li><li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li></ul><img src="./img/funny.jpg" alt="" class="funny" id="now-hot"></div><div class="canner"><img src="./img/scenery1.jpg" alt=""><img src="./img/scenery2.jpg" alt=""><span class="left-arr"><</span><span class="right-arr">></span><p class="text-info"><a href="">猜你想看</a></p><ul class="choose-dot"><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul></div></div><!-- 横幅广告介绍 --><!-- 第一个主要区域 --><div class="contain bfc" id="chief"><!-- 右边 --><div class="aside fr"><span class="panel-title">猜你喜欢</span><!-- 电影list --><div class="panel-content bfc"><ul><li class="ranking-item-top"><a href="#"><div class="ranking-top-left"><i class="ranking-top-icon"></i><img src="./img/ranking-img1.jpg" alt=""></div><div class="ranking-top-right"><span class="movie-name">满江红</span><p class="movie-wish">8473.65万</p></div></a></li><li class="ranking-item"><a href="#"><i class="ranking-index">2</i><span class="ranking-movie-name">尘封十三载</span><span class="stonefont">426.20万</span></a></li><li class="ranking-item"><a href="#"><i class="ranking-index">3</i><span class="ranking-movie-name">狂飙</span><span class="stonefont">431.02万</span></a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">4</i><span class="ranking-movie-name">无名</span><span class="stonefont">389.35万</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">5</i><span class="ranking-movie-name">流浪地球2</span><span class="stonefont">355.86万</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">6</i><span class="ranking-movie-name">阿凡达:水之道</span><span class="stonefont">335.19万</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">7</i><span class="ranking-movie-name">触不可及</span><span class="stonefont">197.75万</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">8</i><span class="ranking-movie-name">我和我的祖国</span><span class="stonefont">126.51万</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">9</i><span class="ranking-movie-name">受益人</span><span class="stonefont">108.84万</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">10</i><span class="ranking-movie-name">天气之子</span><span class="stonefont">103.01万</span> </a></li></ul></div><div class="box-total-wrapper"><h3></h3><div class=><p><span class=></span><a href="#" class="more"></a></p><p><span class="time"></span><span class="pull-right"></span></p></div></div></div><!-- 左边 --><div class="main"><div class="panelhead"><span class="textcolor-red">云影院精选</span><span class="more"><a href="">更多&gt;</a></span></div><!-- 电影列表 --><div class="panel-content"><dl class="movies-list"><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie36.jpg" alt=""></a><a href=""><div class="movie-sale">推荐</div></a><i class="imax3d"></i><i class="integer">8.<span>0</span></i><div class="movietitle">满江红</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie38.jpg" alt=""></a><a href=""><div class="movie-sale">推荐</div></a><i class="imax3d"></i><i class="integer">9.<span>7</span></i><div class="movietitle">流浪地球</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie37.jpg" alt=""></a><a href="#"><div class="movie-sale">推荐</div></a><i class="imax3d"></i><i class="integer">9.<span>3</span></i><div class="movietitle">中国乒乓之绝地反击</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie8.jpg" alt=""></a><a href="#"><div class="movie-sale">推荐</div></a><i class="integer">9.<span>0</span></i><div class="movietitle">终结者</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie9.jpg" alt=""></a><a href="#"><div class="movie-sale">推荐</div></a><i class="imax3d"></i><i class="integer">8.<span>7</span></i><div class="movietitle">攀登者</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie31.jpg" alt=""></a><a href="#"><div class="movie-sale">推荐</div></a><i class="imax3d"></i><i class="integer">9.<span>0</span></i><div class="movietitle">独行月球</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie5.jpg" alt=""></a><a href="#"><div class="movie-sale">推荐</div></a><i class="integer">8.<span>9</span></i><div class="movietitle">少年的你</div></dd><dd class="movie-item" id="hot-movie"><a href="" class="movie-img"><img src="./img/movie26.jpg" alt=""></a><a href="#"><div class="movie-sale">推荐</div></a><i class="integer">9.<span>5</span></i><div class="movietitle">利刃出鞘</div></dd></dl></div></div></div><!-- 第二个主要区域 --><div class="contain bfc" id="chief"><!-- 右边 --><div class="aside fr" id="hot-movie"><span class="panel-title text-yellow">TOP&nbsp;100</span><span class="see-com">推荐&gt;</span><!-- 电影list --><div class="panel-content bfc"><ul><li class="ranking-item-top"><a href="#"><div class="ranking-top-left"><i class="ranking-top-icon"></i><img src="./img/ranking-img2.png" alt=""></div><div class="ranking-top-right"><span class="movie-name">流浪地球2</span><p class="movie-wish">8万</p></div></a></li><li class="ranking-item"><a href="#"><i class="ranking-index">2</i><span class="ranking-movie-name">人生之路</span><span class="stonefont">9.5分</span></a></li><li class="ranking-item"><a href="#"><i class="ranking-index">3</i><span class="ranking-movie-name">归路</span><span class="stonefont">9.1分</span></a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">4</i><span class="ranking-movie-name">狂飙</span><span class="stonefont">9.5分</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">5</i><span class="ranking-movie-name">尘封十三载</span><span class="stonefont">9.5分</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">6</i><span class="ranking-movie-name">突围</span><span class="stonefont">9.1分</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">7</i><span class="ranking-movie-name">灿烂的转身</span><span class="stonefont">9.1分</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">8</i><span class="ranking-movie-name">沉默的真相</span><span class="stonefont">9.2分</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">9</i><span class="ranking-movie-name">龙城</span><span class="stonefont">9.0分</span> </a></li><li class="ranking-item"><a href="#"><i class="ranking-index color-ccc">10</i><span class="ranking-movie-name">谁是凶手</span><span class="stonefont">9.0分</span> </a></li></ul></div></div><!-- 左边 --><div class="main"><div class="panelhead"><span class="textcolor-blue"> 正在热播</span><a href="#" class="special2">爱情</a><a href="#" class="special2">喜剧</a><a href="#" class="special2">动作</a><a href="#" class="special2">恐怖</a><a href="#" class="special2">动画</a><span class="more"><a href="">更多&gt;</a></span></div><!-- 电影列表 --><div class="panel-content"><dl class="movies-list movies-list-2"><dd class="movie-item movie-item-spec"><a href="" class="movie-img-bg"><img src="./img/scenery4.jpg" alt=""></a><i class="integer2">9.<span>0</span></i><div class="movietitle2">无名</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie32.jpg" alt=""></a><i class="integer2">8.<span>6</span></i><div class="movietitle2">你好,李焕英</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie3.jpg" alt=""></a><i class="integer2">8.<span>9</span></i><div class="movietitle2">大圣归来</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie35.jpg" alt=""></a><i class="integer2">9.<span></span></i><div class="movietitle2">金刚川</div></dd><dd class="movie-item" style="margin-left: 22px;"><a href="" class="movie-img"><img src="./img/movie34.jpg" alt=""></a><i class="integer2">9.<span>8</span></i><div class="movietitle2">杨戬</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie28.jpg" alt=""></a><i class="integer2">9.<span>5</span></i><div class="movietitle2">吹哨人</div></dd><dd class="movie-item"><a href="" class="movie-img"><img src="./img/movie9.jpg" alt=""></a><i class="integer2">8.<span>7</span></i><div class="movietitle2">攀登者</div></dd></dl></div></div></div><!-- 底部开始 --><div class="footer"><p class="special">网站简介:<a href="">关于我们</a><span>|</span><a href="">管理团队</a><span>|</span></p></div><!-- 底部结束 --></body></html>

css代码

@font-face {font-family: 'iconfont';src: url('../font/iconfont.eot');src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),url('../font/iconfont.woff2') format('woff2'),url('../font/iconfont.woff') format('woff'),url('../font/iconfont.ttf') format('truetype'),url('../font/iconfont.svg#iconfont') format('svg');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/* 公共样式开始 */.contain{width: 1230px;/* margin-top: 60px; */margin: 0 auto;}/* 公共样式结束 *//* 横幅广告开始 */.canner-wrap {width: 1230px;margin: 0 auto;margin-top: 140px;outline: 1px solid #f40;}.canner-wrap .canner-fl {width: 260px;height: 350px; margin-right: 20px;}.canner-fl p {height: 57px;background: #ccc;line-height: 57px;text-align: center;position: relative;border-bottom: 2px dotted #ffb400;}.canner-fl p:hover {background: #efefef;}.canner-fl p:nth-child(6){border: none;}.canner-fl p .arrow-r {padding-left: 125px;}.canner-fl p .more-info {display: none;position: absolute;top: 0;left: 260px;width: 130px;height: 210px;background: #efefef;z-index: 2;text-align: left;}.canner-fl p:hover .more-info{display: block;}.canner-fl p .more-info .msg{display: block;margin-left: 15px;line-height: 40px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.canner-wrap .canner-fr {width: 230px;height: 350px;outline: 1px solid #ccc;}.canner-fr .announce {padding: 10px 6px;}.canner-fr .announce li {list-style: inside;margin:5px 0;}.canner-fr .announce .spec {list-style: none;}.canner-fr .announce .spec a{font-size: 18px;color: red;}.canner-fr .announce a:hover {color: red;text-decoration: underline;}.canner-fr .funny {width: 230px;height: 192px;}.canner {width: 700px;height: 350px;overflow: hidden;position: relative;}.canner img {position: absolute;width: 700px;height: 350px;opacity: 0;animation: simg 12s infinite;}@keyframes simg {0%{opacity: 1}2%{opacity: 1}4%{opacity: 1}20%{opacity: 1}}img:nth-child(0){animation-delay: 0s;}img:nth-child(1){animation-delay: 3s;}img:nth-child(2){animation-delay: 6s;}img:nth-child(3){animation-delay: 9s;}.canner .left-arr {position: absolute;left: 5px;top: 150px;width: 50px;height: 50px;border-radius: 50%;color: #fff;font-size: 30px;line-height: 50px;text-align: center;background-color: rgba(0,0,0,.3);z-index: 10;cursor: pointer;}.canner .right-arr {position: absolute;right: 5px;top: 150px;width: 50px;height: 50px;border-radius: 50%;color: #fff;font-size: 30px;line-height: 50px;text-align: center;background-color: rgba(0,0,0,.3);z-index: 10;cursor: pointer;}.canner .text-info {position: absolute;left: 5px;bottom: 15px;}.canner .text-info a {color: #fff;}.canner .choose-dot {position: absolute;right: 8px;bottom: 15px;}.canner .choose-dot li {float: left;width: 10px;height: 10px;border-radius: 50%;margin: 0 5px;border: 1px solidrgba(0,0,0,.05);background: #fff;cursor: pointer;}.canner .choose-dot li:hover {background: chocolate;}/* 横幅广告介绍 *//* 主区域的右边开始 */#chief{margin-top: 60px;}#chief .aside{width: 360px;height: 614px;/* border: 1px solid red; */}#chief .aside .panel-title{color: #ef4238;font-size: 26px;}#chief .panel-content{width: 100%;margin-top: 23px;}#chief .panel-content .ranking-item-top{margin-bottom: 11px;}#chief .panel-content .ranking-item-top .ranking-top-left{width: 120px;height: 78px;float: left;position: relative;margin-right: 10px;}#chief .panel-content .ranking-item-top .ranking-top-left .ranking-top-icon{width: 22px;height: 25px;position: absolute;left: 0;top: 0;background-image: url("../img/ranking-top-icon.png");background-size: contain;}#chief .panel-content .ranking-item-top .ranking-top-right{height: 78px;border: 1px solid #ccc;}#chief .panel-content .ranking-item-top .ranking-top-right:hover{background-color: #ccc;}#chief .panel-content .ranking-item-top .ranking-top-right .movie-name{color: #333;font-size: 18px;line-height: 1.4;display: inline-block;margin-top: 9px;}#chief .panel-content .ranking-item-top .ranking-top-right .movie-wish{margin-top: 12px;font-size: 14px;color: #ef4238;}#chief .panel-content .ranking-item{width: 360px;height: 36.6px;line-height: 36.6px;}#chief .panel-content .ranking-item:hover {background: #f7f7f7;}#chief .panel-content .ranking-item .ranking-index{color: #ef4238;display: inline-block;width: 20px;}#chief .panel-content .ranking-item .color-ccc {color: #ccc;}#chief .panel-content .ranking-item .ranking-movie-name{font-size: 16px;color:#333;vertical-align: top;}#chief .panel-content .ranking-item .stonefont{float: right;font-size: 14px;color:#ef4238;}#chief .box-total-wrapper {margin-top: 32px;}#chief .box-total-wrapper>h3{width: 20px;height: 83px;padding: 10px;color: #fff;text-align: center;line-height: 21px;font-weight: 400;font-size: 17px;background-color: #ef4238;float: left;}#chief .box-total-wrapper .bottom-left{height: 102px;width: 319px;border: 1px solid #ccc;border-left: none;}#chief .box-total-wrapper .bottom-left .num{display: inline-block;font-size: 22px;font-weight: 700;margin: 22px 130px 10px 22px;color: #ef4238;}#chief .box-total-wrapper .bottom-left .more{color: #ef4238;}#chief .box-total-wrapper .bottom-left .time{margin: 0 10px 0 22px;color: #999;font-size: 14px;}#chief .box-total-wrapper .bottom-left .pull-right{color: #999;font-size: 14px;}/* 主区域的右边结束 *//* 主区域的左边开始 */.contain .main{width: 801px;height: 614px;padding-right: 36px;/* background: #ef4238; *//* border: 1px solid red; */}.contain .main .panelhead{width: 740px;height: 26px;font-size: 26px;line-height: 26px;color: #ef4238 !important;}.contain .main .panelhead .more{float: right;font-size: 14px;line-height: 16px;margin-top: 10px;}.contain .main .panelhead .more a {color: #ef4238;}.contain .main .panel-content{width: 100%;margin-top: 23px;}.contain .main .panel-content .movies-list{margin: -23px 0 20px -25px;}.contain .main .panel-content .movies-list .movie-item{width: 161.1px;/* height: 260.6px; */border: 1px solid #efefef;margin: 30px 0 0 30px;display: inline-block;vertical-align: top;position: relative;}.contain .main .panel-content .movies-list .movie-item .movie-sale{text-align: center;height: 42px;line-height: 39px;color: #ef4238;}.contain .main .panel-content .movies-list .movie-item .movie-sale:hover {color:#fff;background-color:#ef4238;}.contain .main .panel-content .movies-list .movie-item .imax3d{width: 69px;height: 25px;background: url("../img/3dmax.png");background-size: contain;position: absolute;top: 4px;left: -2px;font-size: 12px;color:#fff;}.contain .main .panel-content .movies-list .movie-item .integer{position: absolute;right: 12px;bottom: 54px;font-size: 18px;color: #ffb400;}.contain .main .panel-content .movies-list .movie-item .integer span{font-size: 14px;}.contain .main .panel-content .movies-list .movie-item .movietitle{position: absolute;left: 10px;bottom: 54px;color: #fff;font-size: 16px;line-height: 22px;}/* 主区域的左边结束 *//* 第二个主区域的左边开始 */.panelhead .textcolor-blue {color: #2d98f3 !important;}.panelhead a:hover {text-decoration: underline;}.panelhead .more a {color: #2d98f3;}.contain .main .panelhead .special2{font-size: 14px;color: #333;margin-left: 10px;}.contain .aside .text-yellow{color: #ffb400 !important;margin-right: 140px;}.contain .aside .see-com{color: #ffb400 !important;}.contain .main .panel-content .movies-list .movie-item-spec{width: 350px;height: 220px;}/* .contain .main .panel-content .movies-list .movie-item {margin: 50px 0 0 30px;} */.movie-item .integer2 {position: absolute;right: 10px;bottom: 6px;font-size: 18px;color:#ffb400;}.movie-item .integer2 span {font-size: 14px;}.movie-item .movietitle2 {position: absolute;left: 6px;bottom: 6px;color:#fff;font-size: 16px;line-height: 22px;}/* 第二个主区域的左边结束 *//* 右侧导航开始 */#tool{width: 50px;height: 303px;border: 1px solid red;position: fixed;top: 300px;right: 3%;border-radius: 8px;}#tool .bnt{text-align: center;position: relative;}.bnt .doll {position: absolute;top: -21px;left: 10px;font-size: 20px;color:#008c8c;}#tool .bnt a{display: block;width: 100%;height: 50px;/* line-height: 70px; */text-align: center;padding-top: 10px;background: #fff;border-bottom: 1px solid #ccc;}#tool .bnt .active{border-radius: 8px 8px 0 0;color: #fff;background: #f40;font-weight: bold;}#tool .bnt a:nth-child(6){border-bottom: none;border-radius: 0 0 8px 8px;}#tool .bnt a:hover{color: #fff;background: #f40;font-weight: bold;}/* 右侧导航接受 */

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。