仿今日头条首页

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="static/css/index.css">
  9.     <link rel="stylesheet" href="static/font_icon/iconfont.css">
  10. </head>
  11. <body>
  12.     <div class="header">
  13.         <!-- 搜索框 -->
  14.         <div class="search">
  15.             <div class="keys">
  16.                 <span class="iconfont icon-fangdajing"></span>
  17.                 <span>习近平主席访问俄罗斯</span>
  18.             </div>
  19.             <!-- 发布按钮 -->
  20.             <div class="publish">
  21.                 <span class="iconfont icon-jiahao"></span>
  22.                 <span>发布</span>
  23.             </div>
  24.         </div>
  25.         <!-- 导航条 -->
  26.         <div class="navs">
  27.             <a href="" class="active">推荐</a>
  28.             <a href="">科技</a>
  29.             <a href="">军事</a>
  30.             <a href="">两性</a>
  31.             <a href="">明星</a>
  32.         </div>
  33.     </div>
  35.     <!-- 主体 -->
  36.     <div class="main">
  37.         <div class="rec-list">
  38.             <a href="" class="item">
  39.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  40.                 <div class="desc">
  41.                     <span class="tag">置顶</span>
  42.                     <div class="other">
  43.                         <span>已关注</span>
  44.                         <span>澎湃新闻</span>
  45.                         <span>122条评论</span>
  46.                     </div>
  47.                 </div>
  48.             </a>
  49.             <a href="" class="item">
  50.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  51.                 <div class="desc">
  52.                     <span class="tag">置顶</span>
  53.                     <div class="other">
  54.                         <span>已关注</span>
  55.                         <span>澎湃新闻</span>
  56.                         <span>122条评论</span>
  57.                     </div>
  58.                 </div>
  59.             </a>
  60.             <a href="" class="item">
  61.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  62.                 <div class="desc">
  63.                     <span class="tag">置顶</span>
  64.                     <div class="other">
  65.                         <span>已关注</span>
  66.                         <span>澎湃新闻</span>
  67.                         <span>122条评论</span>
  68.                     </div>
  69.                 </div>
  70.             </a>
  71.             <a href="" class="item">
  72.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  73.                 <div class="desc">
  74.                     <span class="tag">置顶</span>
  75.                     <div class="other">
  76.                         <span>已关注</span>
  77.                         <span>澎湃新闻</span>
  78.                         <span>122条评论</span>
  79.                     </div>
  80.                 </div>
  81.             </a>
  82.         </div>
  83.         <!-- 左文本+右图片 -->
  84.         <div class="img1-list">
  85.             <a href="" class="item">
  86.                 <!-- 文本 -->
  87.                 <div class="left">
  88.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  89.                     <div class="desc">
  90.                         <span class="author">魂淡君</span>
  91.                         <span class="replay-num">98条评价</span>
  92.                         <span class="time">1小时前</span>
  93.                     </div>
  94.                 </div>
  95.                 <!-- 图片 -->
  96.                 <img src="static/images/1.jpeg" class="right">
  97.             </a>
  98.             <a href="" class="item">
  99.                 <!-- 文本 -->
  100.                 <div class="left">
  101.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  102.                     <div class="desc">
  103.                         <span class="author">魂淡君</span>
  104.                         <span class="replay-num">98条评价</span>
  105.                         <span class="time">1小时前</span>
  106.                     </div>
  107.                 </div>
  108.                 <!-- 图片 -->
  109.                 <img src="static/images/1.jpeg" class="right">
  110.             </a>
  111.             <a href="" class="item">
  112.                 <!-- 文本 -->
  113.                 <div class="left">
  114.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  115.                     <div class="desc">
  116.                         <span class="author">魂淡君</span>
  117.                         <span class="replay-num">98条评价</span>
  118.                         <span class="time">1小时前</span>
  119.                     </div>
  120.                 </div>
  121.                 <!-- 图片 -->
  122.                 <img src="static/images/1.jpeg" class="right">
  123.             </a>
  124.             <a href="" class="item">
  125.                 <!-- 文本 -->
  126.                 <div class="left">
  127.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  128.                     <div class="desc">
  129.                         <span class="author">魂淡君</span>
  130.                         <span class="replay-num">98条评价</span>
  131.                         <span class="time">1小时前</span>
  132.                     </div>
  133.                 </div>
  134.                 <!-- 图片 -->
  135.                 <img src="static/images/1.jpeg" class="right">
  136.             </a>
  137.             <a href="" class="item">
  138.                 <!-- 文本 -->
  139.                 <div class="left">
  140.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  141.                     <div class="desc">
  142.                         <span class="author">魂淡君</span>
  143.                         <span class="replay-num">98条评价</span>
  144.                         <span class="time">1小时前</span>
  145.                     </div>
  146.                 </div>
  147.                 <!-- 图片 -->
  148.                 <img src="static/images/1.jpeg" class="right">
  149.             </a>
  150.         </div>
  152.         <div class="img2-list">
  153.             <a href="" class="item">
  154.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  155.                 <div class="imgs">
  156.                     <img src="static/images/2.jpeg">
  157.                     <img src="static/images/2.jpeg">
  158.                     <img src="static/images/2.jpeg">
  159.                 </div>
  160.             </a>
  161.             <a href="" class="item">
  162.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  163.                 <div class="imgs">
  164.                     <img src="static/images/2.jpeg">
  165.                     <img src="static/images/2.jpeg">
  166.                     <img src="static/images/2.jpeg">
  167.                 </div>
  168.             </a>
  169.             <a href="" class="item">
  170.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  171.                 <div class="imgs">
  172.                     <img src="static/images/2.jpeg">
  173.                     <img src="static/images/2.jpeg">
  174.                     <img src="static/images/2.jpeg">
  175.                 </div>
  176.             </a>
  177.             <a href="" class="item">
  178.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  179.                 <div class="imgs">
  180.                     <img src="static/images/2.jpeg">
  181.                     <img src="static/images/2.jpeg">
  182.                     <img src="static/images/2.jpeg">
  183.                 </div>
  184.             </a>
  185.         </div>
  187.         <!-- 上面文本，下面视频 -->
  188.         <div class="video-list">
  189.             <a href="" class="item">
  190.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  191.                 <video src="static/images/v1.mp4" controls></video>
  192.             </a>
  193.             <a href="" class="item">
  194.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  195.                 <video src="static/images/v1.mp4" controls></video>
  196.             </a>
  197.             <a href="" class="item">
  198.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  199.                 <video src="static/images/v1.mp4" controls></video>
  200.             </a>
  201.             <a href="" class="item">
  202.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  203.                 <video src="static/images/v1.mp4" controls></video>
  204.             </a>
  205.         </div>
  206.     </div>
  208.     <!-- 页脚部分 -->
  209.     <div class="footer">
  210.         <a href="" class="active">
  211.             <span class="iconfont icon-shouye"></span>
  212.             <span>首页</span>
  213.         </a>
  214.         <a href="" class="active">
  215.             <span class="iconfont icon-24gl-play"></span>
  216.             <span>视频</span>
  217.         </a>
  218.         <a href="" class="active">
  219.             <span class="iconfont icon-yonghuguanli_huaban"></span>
  220.             <span>图片</span>
  221.         </a>
  222.         <a href="" class="active">
  223.             <span class="iconfont icon-yonghu"></span>
  224.             <span>我的</span>
  225.         </a>
  226.     </div>
  227. </body>
  228. </html>
  230. css部分
  231. /* 通用设置 */
  232. * {
  233.     margin: 0;
  234.     padding: 0;
  235.     box-sizing: border-box;
  236. }
  237. a {
  238.  text-decoration: none;
  239.  color: #555;
  240. }
  241. html{
  242.     font-size: calc(100vw / 3.75);
  243. }
  244. body{
  245.     font-size: 0.16rem;
  246.     color: #333;
  247.     background-color: #fff;
  248.     margin: 0 auto;
  249.     padding: 0 0.15rem;
  250. }
  251. body img,
  252. body video{
  253.     width: 100%;
  254. }
  255. @media (max-width:320px) {
  256.     html{
  257.         font-size: 85px;
  258.     }
  259. }
  260. @media (min-width:640px) {
  261.     html{
  262.         font-size: 170px;
  263.     }
  264. }
  266. /* 头部 */
  267. .header {
  268.     /* 使用固定定位 */
  269.     position: fixed;
  270.     left: 0;
  271.     top: 0;
  272.     right: 0;
  273.     border-bottom: 1px solid #ccc;
  274.     /* 确保永远在前面 */
  275.     z-index: 9999;
  276.     background-color: #fff;
  277. }
  278. /* 搜索框 */
  279. .header .search{
  280.     background-color: red;
  281.     padding: 0.08rem 0.15rem;
  282.     /* 左面是输入框,右面是发布按钮,使用grid */
  283.     display: grid;
  284.     grid-template-columns: 1fr 0.5rem;
  285. }
  286. /* 关键字 */
  287. .header .search .keys{
  288.     background-color: #fff;
  289.     border-radius: 1.5rem;
  290.     display: flex;
  291.     place-items: center;
  292.     padding-left: 0.1rem;
  293. }
  294. /* 发布按钮 */
  295. .header .publish{
  296.     color: white;
  297.     display: grid;
  298.     place-items: center;
  299. }
  300. /* 导航条 */
  301. .header .navs{
  302.     display: flex;
  303.     place-content: space-around;
  304.     /* padding: 0.1rem 0 0.5rem; */
  305. }
  306. /* 首个选中 */
  307. .header .navs a.active{
  308.     color: red;
  309. }
  310. /* 选中后下方红条 */
  311. .header .navs a{
  312.     position: relative;
  313. }
  314. .header .navs a.active::after{
  315.     content: '';
  316.     position: absolute;
  317.     left: 0;
  318.     width: 0.3rem;
  319.     height: 0.03rem;
  320.     bottom: -0.04rem;
  321.     background-color: red;
  322. }
  324. /* **********主体部分 ********************/
  325. .main{
  326.     min-height: 2000px;
  327.     position: relative;
  328.     top: 0.8rem;
  329.     padding-bottom: 0.6rem;
  330. }
  331. /* 文本和标签 */
  332. .main .rec-list .item{
  333.     display: block;
  334.     margin-top: 0.1rem;
  335. }
  336. .main .rec-list .item .desc{
  337.     display: flex;
  338.     font-size: xx-small;
  339.     gap: 0.1rem;
  340. }
  341. /* 标签 */
  342. .main .rec-list .item .desc .tag{
  343.     color: red;
  344. }
  345. .main .rec-list .item .desc .other{
  346.     color: #ccc;
  347. }
  348. /* 左文本和右图片 */
  349. .main .img1-list .item{
  350.     margin-top: 0.1rem;
  351.     display: grid;
  352.     grid-template-columns: 1fr 1.3rem;
  353.     gap: 0.2rem;
  354. }
  355. .main .img1-list .item .left{
  356.     display: grid;
  357.     place-content: space-between;
  358. }
  359. .main .img1-list .item .left .desc{
  360.     font-size: xx-small;
  361.     color: #ccc;
  362. }
  363. /* 上面文本和下面图片 */
  364. .main .img2-list .item{
  365.     display: block;
  366.     margin-top: 0.1rem;
  367. }
  368. .main .img2-list .item .imgs{
  369.     display: grid;
  370.     grid-template-columns: repeat(3,1fr);
  371.     gap: 0.05rem;
  372. }
  373. /* 视频部分 */
  374. .main .video-list .item{
  375.     display: block;
  376.     margin-top: 0.1rem;
  377. }
  379. /***************** 底部 ****************/
  380. .footer{
  381.     position: fixed;
  382.     left: 0;
  383.     right: 0;
  384.     bottom: 0;
  385.     background-color: #efefef;
  386.     display: flex;
  387.     place-content: space-around;
  388. }
  389. .footer a{
  390.     display: grid;
  391.     place-items: center;
  392.     font-size: x-small;
  393. }
  394. .footer a .iconfont{
  395.     font-size: xx-small;
  396. }
  397. /* 首个选中 */
  398. .footer a .active{
  399.     color: red;
  400. }

效果图

【文章原创作者：大丰网页开发公司 http://www.1234xp.com/dafeng.html 复制请保留原URL】
更多阅读