B站首页仿写
記錄第三個簡單小項目，黑馬前端進階課程。
html較為基礎，主要是合理布局，還沒有加上js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>b站</title><link rel="stylesheet" href="/less/css/index.css"><link rel="stylesheet" href="/fonts/iconfont.css"> </head> <body><!--頭部固定--><header><div class="top"><div class="left"><a href="#"><i class="iconfont Navbar_logo"></i></a></div><div class="right"><a href="#"><i class="iconfont ic_search_tab"></i></a><a href="#" class="login"><img src="./images/login.png" alt=""></a><a href="#" class="download"><img src="./images/download.png" alt=""></a></div></div><div class="bottom"><div class="tab"><ul><li><a href="#" class="current">首頁</a></li><li><a href="#">首頁</a></li><li><a href="#">首頁</a></li><li><a href="#">首頁</a></li><li><a href="#">首頁</a></li></ul></div><div class="more"><a href="#"><i class="iconfont general_pulldown_s"></i></a></div></div></header><!--內容區域--><section class="vedio_content"><div class="vedio_list"><a href="#"><div class="pic"><div class="count"><p><i class="iconfont icon_shipin_bofangshu"></i><span>132</span>萬</p><p><i class="iconfont icon_shipin_danmushu"></i><span>132</span>萬</p></div><img src="/images/1.jpg" alt=""></div><div class="txt ellipsis-2">你活著不到就是對我最大的侮辱，寒心最強王者名言就是和救護車</div></a></div></section> </body> </html>css樣式
@import 'base'; @vw: 3.75vw; @pink:#fb7299; /*頭部固定*/ header{z-index: 1;position: fixed;left: 0;top: 0;width: 100%;height: (84/@vw);color: #fff;// background-color: palevioletred;.top{display: flex;justify-content: space-between;align-items: center;height: (44/@vw);padding-left: (18/@vw);padding-right: (12/@vw);// background-color: green;}.left{.iconfont{font-size: (28/@vw);color: @pink;}}.right{display: flex;.iconfont{font-size: (22/@vw); color: #ccc;}.login{width: (24/@vw);height: (24/@vw);margin-left: (24/@vw);}.download{width: (72/@vw);height: (24/@vw);margin-left: (24/@vw);}}.bottom{display: flex;justify-content: space-between;height: (40/@vw);border-bottom: 1px solid #eee;}.more{a{display: block;width: (40/@vw);height: (40/@vw);line-height: (40/@vw);text-align: center;// font-size: (22/@vw);color: #ccc;.iconfont{font-size: (22/@vw);}}}.tab{ul{display: flex;}li{padding: 0 (16/@vw);}a{display: block;height: (38/@vw);line-height: (38/@vw);font-size: (14/@vw); }.current{color: @pink;border-bottom: 2px solid @pink;}} } .vedio_content{padding:(84/@vw) (5/@vw) ;.vedio_list{display: flex;flex-wrap: wrap;a{width: 50%;padding:(8/@vw) (5/@vw);.txt{margin-top: (5/@vw);font-size: (12/@vw);}.pic{position: relative;}.count{position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;width: 100%;padding: (8/@vw);color: #fff;}}} }總結
- 上一篇： 学习方法推荐——时间管理
- 下一篇： 【四二学堂】标准GPS坐标，转换成百度坐