bootstrap自适应视频播放详情页内容页效果
代码语言:html
所属分类:布局界面
代码描述:bootstrap自适应视频播放详情页内容页效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bulma-0.3.1.css"> <style> body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; } .has-text-muted { color: #95A5A6; } .spacer { height: 20px; } .nav-left .searchbox { margin-top: 10px; } .avatar-photo { border-radius: 50px; } .video-title { font-size: 1.5em; font-weight: 500; } .box.video-description { padding: 20px 20px 5px 20px; } .video-description-more { font-size: 12px; font-weight: bold; text-transform: uppercase; margin-top: -15px; } .related-card .video-title { display: block; font-size: 13px; font-weight: 500; } .related-card .video-account, .related-card .video-views { display: block; font-size: 11px; color: #95A5A6; } .related-card img { height: 68px; } .related-card.media .media, .related-card.media + .media { border-top: none; } .related-list .autoplay { padding-bottom: 10px; } .related-list .autoplay .autoplay-title { font-weight: bold; } .related-list .autoplay .autoplay-toggle { float: right; } .related-list .autoplay .autoplay-toggle .fa { font-size: 13px; padding: 5px 10px; } </style> </head> <body translate="no"> <nav class="nav has-shadow" id="top"> <div class="container"> <div class="nav-left"> <a class="nav-item" href="/"> <img src="http://repo.bfw.wiki/bfwrepo/icon/5d834ea6be5b9.png" alt="Description"> </a> <p class="control has-addons searchbox"> <input class="input" type="text" placeholder="Search videotube..."> <a class="button is-dark"> <i class="fa fa-search"></i> </a> </p> </div> <span class="nav-toggle"> <span></span> <span></span> <span></span> </span> <div class="nav-right nav-menu"> <span class="nav-item"> <a class="button is-default is-bold"> Upload </a> </span> <a class="nav-item is-tab"> <i class="fa fa-bell-o"></i> </a> <a class="nav-item is-tab"> <img src="https://placehold.it/64x64" class="avatar-photo"> </a> </div> </div> </nav> <div class="spacer"></div> <div class="container"> <div class="columns"> <div class="column is-8"> <div class="image"> <img src="http://repo.b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0