时间:2023-04-24 08:36:02 | 来源:网站运营
时间:2023-04-24 08:36:02 来源:网站运营
寒假别颓废,一起写个b站练练手吧(HTML+CSS+JS): <!---------- 顶部页面 ----------> <div id="header"> <!-- 最顶部 --> <div class="header-top"> <div class="auto-width"> <h1 class="logo fl"><a href="#"><img src="images/logo.png" alt="#"></a></h1> <div class="search-box fl"> <form action="#"> <input type="text" class="fl search-text" placeholder="Search here..."> <button class="fl search-btn"> <i class="iconfont icon-search"></i> </button> </form> <div class="search-feedback"> <span class="search-hot">今日热搜</span> <div class="search-menu"> <a href="#" class="item item-cur"> <span>1</span> <em>OverWatch</em> </a> <a href="#" class="item item-cur"> <span>2</span> <em>电影知道答案</em> </a> <a href="#" class="item item-cur"> <span>3</span> <em>S6</em> </a> <a href="#" class="item"> <span>4</span> <em>夏目友人帐</em> </a> <a href="#" class="item"> <span>5</span> <em>微小而确实的幸福</em> </a> <a href="#" class="item"> <span>6</span> <em>神盾局特工</em> </a> <a href="#" class="item"> <span>7</span> <em>天凉好个秋</em> </a> </div> </div> </div> <ul class="header-guide fr"> <li class="guide-item download"> <a href="#"> <i class="iconfont icon-app"></i> <span>下载客户端</span> </a> <div class="guide-hover"> <img src="images/app-download.png" alt="#"> </div> </li> <li class="guide-item login"> <a href="#">登录/注册</a> </li> <li class="guide-item history"> <a href="#"> <i class="iconfont icon-history"></i> </a> <div class="guide-hover"> <span class="text">尚未记录任何历史信息。</span> <a href="#" class="more">More</a> </div> </li> <li class="guide-item upload"> <a href="#"> <i class="iconfont icon-upload"></i> </a> <div class="guide-hover"> <ul> <li><a href="#">投视频</a></li> <li><a href="#">投文章</a></li> </ul> </div> </li> <li class="guide-item collect"> <a href="#"> <i class="iconfont icon-collect"></i> </a> </li> </ul> </div> </div> <!-- 焦点图 --> <div class="header-banner"> <a href="#" class="bg"></a> <span class="text">这辆车……到底能不能上啊!!!</span> <a href="#" class="link"></a> </div> <!-- 导航 --> <div class="header-nav"> <div class="nav-wrap auto-width clearfix"> <a href="#" class="nav-item nav-cur">首页</a> <a href="#" class="nav-item">番剧</a> <a href="#" class="nav-item nav-item_hover">动画</a> <a href="#" class="nav-item nav-item_hover">音乐</a> <a href="#" class="nav-item nav-item_hover">舞蹈</a> <a href="#" class="nav-item nav-item_hover">游戏</a> <a href="#" class="nav-item nav-item_hover">娱乐</a> <a href="#" class="nav-item nav-item_hover">科技</a> <a href="#" class="nav-item nav-item_hover">影视</a> <a href="#" class="nav-item nav-item_hover">体育</a> <a href="#" class="nav-item nav-item_hover">彼女</a> <a href="#" class="nav-item nav-item_hover">鱼塘</a> <a href="#" class="nav-item nav-item_hover">文章</a> <a href="#" class="nav-item nav-item_hover">合辑</a> <a href="#" class="nav-rank"> <i class="iconfont icon-rank"></i> 全站排行榜 </a> </div> <div class="subNav"> <ul class="auto-width"> <li class="subNav-item"> <a href="#">动画短片</a> <a href="#">动画资讯</a> <a href="#">旧番补档</a> <a href="#">新番连载</a> <a href="#">MAD·AMV</a> <a href="#">MMD·3D</a> <a href="#">2.5次元</a> <a href="#">国产动画</a> </li> <li class="subNav-item"> <a href="#">原创·翻唱</a> <a href="#">演奏</a> <a href="#">Vocaloid</a> <a href="#">日系音乐</a> <a href="#">综合音乐</a> <a href="#">演唱会</a> </li> <li class="subNav-item"> <a href="#">宅舞</a> <a href="#">综合舞蹈</a> </li> <li class="subNav-item"> <a href="#">主机单机</a> <a href="#">游戏集锦</a> <a href="#">电子竞技</a> <a href="#">LOL</a> <a href="#">守望先锋</a> <a href="#">桌游卡牌</a> <a href="#">Mugen</a> </li> <li class="subNav-item"> <a href="#">生活娱乐</a> <a href="#">鬼畜调教</a> <a href="#">萌宠</a> <a href="#">美食</a> <a href="#">综艺</a> </li> <li class="subNav-item"> <a href="#">SF</a> <a href="#">黑科技</a> <a href="#">数码</a> <a href="#">广告</a> <a href="#">白科技</a> <a href="#">自我发电</a> <a href="#">科学技术</a> <a href="#">汽车</a> </li> <li class="subNav-item"> <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> </li> <li class="subNav-item"> <a href="#">综合体育</a> <a href="#">足球</a> <a href="#">篮球</a> <a href="#">搏击</a> <a href="#">11区体育</a> <a href="#">惊奇体育</a> </li> <li class="subNav-item"> <a href="#">造型</a> <a href="#">西皮</a> <a href="#">爱豆</a> <a href="#">其他</a> </li> <li class="subNav-item"> <a href="#">军事</a> <a href="#">历史</a> <a href="#">焦点</a> </li> <li class="subNav-item"> <a href="#">文章综合</a> <a href="#">工作·情感</a> <a href="#">漫画·轻小说</a> <a href="#">游戏</a> </li> <li class="subNav-item"> <a href="#">AcFun专题</a> </li> </ul> </div> </div> </div>
关键词:寒假