首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

实战flex：模拟实现静态知乎首页

作者：想翻身的咸鱼。。。 | 来源：互联网 | 2023-09-23 19:11
主要练习应用flex布局完整项目代码代码：index.html

主要练习应用flex布局


完整项目代码

代码&＃xff1a;
index.html


"en">
"UTF-8">"shortcut icon" href&＃61;"images/favicon.ico" type&＃61;"image/x-icon">"stylesheet" href&＃61;"css/style.css">"stylesheet" href&＃61;"css/index.css">

"hd">

"hd-main container">
"hd-left">"#" class&＃61;"hd-logo">"icon-logo" src&＃61;"images/logo.png" alt&＃61;"">
"hd-search">
"hd-search-bar">"">"itlike-search">"text" placeholder&＃61;"王思聪爆出王多多怼领导截图"/>
"hd-right">"#">"itlike-bell">"#">"itlike-bubbles2">"#">"images/user_p.jpg" alt&＃61;"">
"main" class&＃61;"container">
"main-left">
"card">
"content">
"item">"item-title" href&＃61;"#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》&＃xff1f;
"item-main">
"item-main-top">"item-main-l" href&＃61;"#">"images/c_pic.jpg" alt&＃61;"">
"item-main-r">丸子头&＃xff1a; 不好意思&＃xff0c;我是专门来吹爆霸总保剑锋演技的&＃xff01;&＃xff01; 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了&＃xff0c;完全靠杨紫的演技撑住第一集。 这次也是一样&＃xff0c;整部剧其实剪辑及格分数以下&＃xff0c;剧情嘛&＃xff0c;不至于脑残但是也…"#">阅读全文"itlike-circle-down">
"item-main-bottom">
"one">"#">"itlike-diamonds">赞同 1.3k"#">"itlike-diamonds">
"#">"itlike-bubble">335 条评论"#">"itlike-compass">分享"#">"itlike-star-full">收藏"#">"itlike-heart">感谢"#">···
"item">"item-title" href&＃61;"#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》&＃xff1f;
"item-main">
"item-main-top">"item-main-l" href&＃61;"#">"images/c_pic.jpg" alt&＃61;"">
"item-main-r">丸子头&＃xff1a; 不好意思&＃xff0c;我是专门来吹爆霸总保剑锋演技的&＃xff01;&＃xff01; 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了&＃xff0c;完全靠杨紫的演技撑住第一集。 这次也是一样&＃xff0c;整部剧其实剪辑及格分数以下&＃xff0c;剧情嘛&＃xff0c;不至于脑残但是也…"#">阅读全文"itlike-circle-down">
"item-main-bottom">
"one">"#">"itlike-diamonds">赞同 1.3k"#">"itlike-diamonds">
"#">"itlike-bubble">335 条评论"#">"itlike-compass">分享"#">"itlike-star-full">收藏"#">"itlike-heart">感谢"#">···
"item">"item-title" href&＃61;"#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》&＃xff1f;
"item-main">
"item-main-top">"item-main-l" href&＃61;"#">"images/c_pic.jpg" alt&＃61;"">
"item-main-r">丸子头&＃xff1a; 不好意思&＃xff0c;我是专门来吹爆霸总保剑锋演技的&＃xff01;&＃xff01; 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了&＃xff0c;完全靠杨紫的演技撑住第一集。 这次也是一样&＃xff0c;整部剧其实剪辑及格分数以下&＃xff0c;剧情嘛&＃xff0c;不至于脑残但是也…"#">阅读全文"itlike-circle-down">
"item-main-bottom">
"one">"#">"itlike-diamonds">赞同 1.3k"#">"itlike-diamonds">
"#">"itlike-bubble">335 条评论"#">"itlike-compass">分享"#">"itlike-star-full">收藏"#">"itlike-heart">感谢"#">···
"item">"item-title" href&＃61;"#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》&＃xff1f;
"item-main">
"item-main-top">"item-main-l" href&＃61;"#">"images/c_pic.jpg" alt&＃61;"">
"item-main-r">丸子头&＃xff1a; 不好意思&＃xff0c;我是专门来吹爆霸总保剑锋演技的&＃xff01;&＃xff01; 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了&＃xff0c;完全靠杨紫的演技撑住第一集。 这次也是一样&＃xff0c;整部剧其实剪辑及格分数以下&＃xff0c;剧情嘛&＃xff0c;不至于脑残但是也…"#">阅读全文"itlike-circle-down">
"item-main-bottom">
"one">"#">"itlike-diamonds">赞同 1.3k"#">"itlike-diamonds">
"#">"itlike-bubble">335 条评论"#">"itlike-compass">分享"#">"itlike-star-full">收藏"#">"itlike-heart">感谢"#">···
"item">"item-title" href&＃61;"#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》&＃xff1f;
"item-main">
"item-main-top">"item-main-l" href&＃61;"#">"images/c_pic.jpg" alt&＃61;"">
"item-main-r">丸子头&＃xff1a; 不好意思&＃xff0c;我是专门来吹爆霸总保剑锋演技的&＃xff01;&＃xff01; 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了&＃xff0c;完全靠杨紫的演技撑住第一集。 这次也是一样&＃xff0c;整部剧其实剪辑及格分数以下&＃xff0c;剧情嘛&＃xff0c;不至于脑残但是也…"#">阅读全文"itlike-circle-down">
"item-main-bottom">
"one">"#">"itlike-diamonds">赞同 1.3k"#">"itlike-diamonds">
"#">"itlike-bubble">335 条评论"#">"itlike-compass">分享"#">"itlike-star-full">收藏"#">"itlike-heart">感谢"#">···
"item">"item-title" href&＃61;"#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》&＃xff1f;
"item-main">
"item-main-top">"item-main-l" href&＃61;"#">"images/c_pic.jpg" alt&＃61;"">
"item-main-r">丸子头&＃xff1a; 不好意思&＃xff0c;我是专门来吹爆霸总保剑锋演技的&＃xff01;&＃xff01; 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了&＃xff0c;完全靠杨紫的演技撑住第一集。 这次也是一样&＃xff0c;整部剧其实剪辑及格分数以下&＃xff0c;剧情嘛&＃xff0c;不至于脑残但是也…"#">阅读全文"itlike-circle-down">
"item-main-bottom">
"one">"#">"itlike-diamonds">赞同 1.3k"#">"itlike-diamonds">
"#">"itlike-bubble">335 条评论"#">"itlike-compass">分享"#">"itlike-star-full">收藏"#">"itlike-heart">感谢"#">···
"main-right">
"r-one">
"r-one-item">"itlike-book">写回答
"r-one-item">"itlike-file-text2">写文章
"r-one-item">"itlike-pencil">写想法
"r-two">
"r-two-item">"itlike-power orangered">Live
"r-two-item">"itlike-book green">书店
"r-two-item">"itlike-firefox blue">圆桌
"r-two-item">"itlike-pencil red">专栏
"r-two-item">"itlike-coin-yen purple">付费咨询
"r-three">"#">"images/ad_one.jpeg?s=#34; alt&＃61;"">"ad" href&＃61;"">广告"close">×
"r-three">"#">"images/ad_two.jpeg?s=#34; alt&＃61;"">&＃96;在这里插入代码片&＃96;"ad" href&＃61;"">广告"close">×

index.css

* {margin: 0;padding: 0;box-sizing: border-box;
}body {background-color: #f6f6f6;font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;font-size: 15px;color: #1a1a1a;
}a {color: #1a1a1a;text-decoration: none;
}ul, ol {list-style: none;
}.container {width: 1000px;margin: 0 auto;
}/*--------------------头部-begin----------------*/
#hd {width: 100%;height: 52px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;box-shadow: 0 1px 1px #e7e7e7;
}.hd-main {height: 100%;display: flex;/*background-color: skyblue;*/
}/*头部左边*/
.hd-left {flex: 1; /*background-color: red;*/display: flex;flex-direction: row; /*侧轴居中*/align-items: center;
}.hd-left .hd-logo {display: block;margin-right: 20px;
}.hd-left .icon-logo {width: 100px;
}.hd-left .hd-nav a { /*background-color: skyblue;*/padding: 0 10px;color: #8590a6;
}.hd-left .hd-nav a.current {color: #444;
}.hd-left .hd-nav a:hover {color: #175199;
}.hd-left .hd-search {margin-left: 15px;display: flex;
}.hd-left .hd-search .hd-search-bar {position: relative;
}.hd-left .hd-search input {width: 350px;height: 36px;border: 1px solid #e7e7e7;border-radius: 5px;background-color: #efefef;padding-left: 10px;
}.hd-left .hd-search input:focus {outline: none;border-color: #175199;
}.hd-left .hd-search i {width: 20px;height: 20px;color: #999999;position: absolute;right: 8px;top: 10px;
}.hd-left .hd-search .hd-search-btn {background-color: #0084ff;width: 56px;height: 34px;border: none;border-radius: 5px;color: #fff;margin-left: 15px;cursor: pointer;
}.hd-left .hd-search .hd-search-btn:hover {background-color: #0077e6;
}/*头部右边*/
.hd-right {display: flex;flex-direction: row;align-items: center;
}.hd-right a {display: block;margin: 0 15px;
}.hd-right a i {color: #8590a6;font-size: 20px;
}.hd-right img {width: 30px;height: 30px;
}/*--------------------头部-end----------------*//*--------------------主体内容-begin----------------*/
#main {margin-top: 62px;/*background-color: red;*/display: flex;
}#main .main-left {width: 690px;/*height: 800px;*/background-color: #fff;margin-right: 10px;box-shadow: 0 0 5px #e7e7e7;
}#main .main-left .card {width: 100%;height: 60px;border-bottom: 1px solid #e7e7e7;
}#main .main-left .card ul li {float: left;line-height: 58px;
}#main .main-left .card ul li a {margin: 0 20px;display: inline-block;
}#main .main-left .card ul li.current a {font-weight: bold;border-bottom: 2px solid #0077e6;
}/*左边中间列表*/
#main .main-left .content {}#main .main-left .content .item {padding: 20px;border-bottom: 1px solid #e7e7e7;/*伸缩布局*/display: flex;flex-direction: column;
}#main .main-left .content .item .item-title {font-size: 19px;font-weight: bold;padding: 10px 0;
}#main .main-left .content .item .item-main {display: flex;flex-direction: column;
}#main .main-left .content .item .item-main .item-main-top {display: flex;align-items: center;
}#main .main-left .content .item .item-main .item-main-top .item-main-l {display: block;
}#main .main-left .content .item .item-main .item-main-top .item-main-l img {width: 190px;border-radius: 5px;
}#main .main-left .content .item .item-main .item-main-top .item-main-r {flex: 1;margin-left: 10px;
}#main .main-left .content .item .item-main .item-main-top .item-main-r span {line-height: 26px;
}#main .main-left .content .item .item-main .item-main-top .item-main-r a {color: #0077e6;vertical-align: middle;
}#main .main-left .content .item .item-main .item-main-top .item-main-r a i {margin-left: 3px;
}#main .main-left .content .item .item-main .item-main-bottom {display: flex;align-items: center;padding-top: 5px;
}#main .main-left .content .item .item-main .item-main-bottom .one{display: flex;
}#main .main-left .content .item .item-main .item-main-bottom .one a:first-child{color: #0077e6;width: 120px;height: 36px;background-color: rgba(0,132,255,.15);border-radius: 5px;display: flex;justify-content: center;align-items: center;
}#main .main-left .content .item .item-main .item-main-bottom .one a:first-child i{margin-right: 5px;
}#main .main-left .content .item .item-main .item-main-bottom .one a:last-child{color: #0077e6;width: 36px;height: 36px;background-color: rgba(0,132,255,.15);border-radius: 5px;margin-left: 5px;display: flex;justify-content: center;align-items: center;
}#main .main-left .content .item .item-main .item-main-bottom>a{margin-left: 25px;color: #8590a6;display: flex;justify-content: center;align-items: center;
}#main .main-left .content .item .item-main .item-main-bottom>a i{margin-right: 3px;
}#main .main-right {flex: 1;/*background-color: yellow;*/
}/*----右1---*/
#main .main-right .r-one{background-color: #fff;box-shadow: 0 0 1px #e7e7e7;padding: 20px;display: flex;justify-content: space-around;align-items: center;
}#main .main-right .r-one .r-one-item{width: 80px;height: 80px;display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;}#main .main-right .r-one .r-one-item i{color: #8590a6;font-size: 20px;
}#main .main-right .r-one .r-one-item span{font-size: 17px;margin-top: 10px;
}/*----右2---*/
#main .main-right .r-two{margin-top: 10px;background-color: #fff;box-shadow: 0 0 1px #e7e7e7;padding: 20px;display: flex;flex-wrap: wrap;
}#main .main-right .r-two .r-two-item{display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;width: 33%;height: 80px;/*background-color: red;*/
}#main .main-right .r-two .r-two-item{color: #8590a6;
}#main .main-right .r-two .r-two-item i{margin-bottom: 10px;font-size: 20px;
}.orangered{color: orangered !important;}
.green{color: palegreen !important;}
.blue{color: royalblue !important;}
.red{color: red !important;}
.purple{color: purple !important;}#main .main-right .r-three{margin-top: 10px;position: relative;
}#main .main-right .r-three img{width: 100%;
}#main .main-right .r-three .ad{position: absolute;right: 10px;bottom: 10px;border: 1px solid #fff;border-radius: 5px;padding: 2px 8px;background-color: rgba(0,0,0,.3);color: #fff;
}#main .main-right .r-three .close{position: absolute;right: 5px;top: 5px;font-size: 20px;background-color: rgba(0,0,0,.6);width: 20px;height: 20px;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;padding-bottom: 3px;cursor: pointer;visibility: hidden;
}#main .main-right .r-three:hover .close{visibility: visible;
}/*--------------------主体内容-end----------------*/

推荐阅读
  • window

    使用HTML创建弹出框以便用户输入信息

    使用HTML创建弹出框以便用户输入信息
    在做项目的过程中，我们时常需要进行一些弹框操作，比如在后台管理时需要进行的一些增删改操作，这个时候我们需要使用到弹框，或者在 ... [详细]
  • python

    Python基础篇：315道题目及答案整理，帮助你检验学习成果

    本文整理了315道Python基础题目及答案，帮助读者检验学习成果。文章介绍了学习Python的途径、Python与其他编程语言的对比、解释型和编译型编程语言的简述、Python解释器的种类和特点、位和字节的关系、以及至少5个PEP8规范。对于想要检验自己学习成果的读者，这些题目将是一个不错的选择。请注意，答案在视频中，本文不提供答案。 ... [详细]
  • join

    前端提高篇(七十)：SVG基本使用、基本样式、路径path

    前端提高篇(七十)：SVG基本使用、基本样式、路径path
    SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范，与html5的使用有所区别SVG绘制出来的是矢量图，放大之后不会失真官方文 ... [详细]
  • list

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • python

    Python正则表达式学习记录及常用方法

    Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程，介绍了re模块的常用方法re.search，并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具，通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • python

    游标的使用笔记

    本文介绍了游标的使用方法，并以一个水果供应商数据库为例进行了说明。首先创建了一个名为fruits的表，包含了水果的id、供应商id、名称和价格等字段。然后使用游标查询了水果的名称和价格，并将结果输出。最后对游标进行了关闭操作。通过本文可以了解到游标在数据库操作中的应用。 ... [详细]
  • python

    在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

    在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
  • import

    基于dlib的人脸68特征点提取(眨眼张嘴检测)python版本

    基于dlib的人脸68特征点提取(眨眼张嘴检测)python版本
    文章目录引言开发环境和库流程设计张嘴和闭眼的检测引言(1)利用Dlib官方训练好的模型“shape_predictor_68_face_landmarks.dat”进行68个点标定 ... [详细]
  • python

    JS实现一键分享功能

    JS实现一键分享功能
    本文介绍了如何使用JS实现一键分享功能，并提供了2019独角兽企业招聘Python工程师的标准。同时，给出了分享到QQ空间、新浪微博和人人网的链接。 ... [详细]
  • list

    EPPlus绘制刻度线的方法及示例代码

    EPPlus绘制刻度线的方法及示例代码
    本文介绍了使用EPPlus绘制刻度线的方法，并提供了示例代码。通过ExcelPackage类和List对象，可以实现在Excel中绘制刻度线的功能。具体的方法和示例代码在文章中进行了详细的介绍和演示。 ... [详细]
  • format

    Foundation框架中常用结构体和类的介绍

    本文介绍了Foundation框架中一些常用的结构体和类，包括表示范围作用的NSRange结构体的创建方式，处理几何图形的数据类型NSPoint和NSSize，以及由点和大小复合而成的矩形数据类型NSRect。同时还介绍了创建这些数据类型的方法，以及字符串类NSString的使用方法。 ... [详细]
  • import

    python – PyQt进度在启动后跳转到100％

    当我在doWork方法中运行代码时,通过单击button1,进度条按预期工作.但是,当我从其他方法(即btn2,btn3)将列表传递给doWork方法时,进度条在启动后会跳转到10 ... [详细]
  • python

    pyecharts 介绍

    pyecharts 介绍
    一、pyecharts介绍ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部 ... [详细]
  • python

    Vue案例（搜索页面）

    <!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]
  • config

    Gitlab接入公司内部单点登录的安装和配置教程

    Gitlab接入公司内部单点登录的安装和配置教程
    本文介绍了如何将公司内部的Gitlab系统接入单点登录服务，并提供了安装和配置的详细教程。通过使用oauth2协议，将原有的各子系统的独立登录统一迁移至单点登录。文章包括Gitlab的安装环境、版本号、编辑配置文件的步骤，并解决了在迁移过程中可能遇到的问题。 ... [详细]
author-avatar
想翻身的咸鱼。。。
你个家伙才懒。。。
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有