主要练习应用flex布局

完整项目代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>喜欢it，就上撩课(itlike.com)</title><link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!--头部--><header id="hd"><div class="hd-main container"><div class="hd-left"><!--logo--><a href="#" class="hd-logo"><img class="icon-logo" src="data:images/logo.png" alt=""></a><!--导航列表--><nav class="hd-nav"><a href="#" class="current">首页</a><a href="#">发现</a><a href="#">话题</a></nav><!--搜索栏--><div class="hd-search"><div class="hd-search-bar"><form action=""><i class="itlike-search"></i><input type="text" placeholder="王思聪爆出王多多怼领导截图"/></form></div><button class="hd-search-btn">提问</button></div></div><!--侧边--><div class="hd-right"><a href="#"><i class="itlike-bell"></i></a><a href="#"><i class="itlike-bubbles2"></i></a><a href="#"><img src="data:images/user_p.jpg" alt=""></a></div></div></header><!--主体内容--><main id="main" class="container"><!--主体左边--><div class="main-left"><!--头部标签--><div class="card"><ul><li class="current"><a href="#">推荐</a></li><li><a href="#">关注</a></li><li><a href="#">热榜</a></li></ul></div><!--中间内容--><div class="content"><div class="item"><!--标题--><a class="item-title" href="#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》？</a><div class="item-main"><div class="item-main-top"><a class="item-main-l" href="#"><img src="data:images/c_pic.jpg" alt=""></a><div class="item-main-r"><span>丸子头： 不好意思，我是专门来吹爆霸总保剑锋演技的！！ 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了，完全靠杨紫的演技撑住第一集。 这次也是一样，整部剧其实剪辑及格分数以下，剧情嘛，不至于脑残但是也…</span><a href="#">阅读全文<i class="itlike-circle-down"></i></a></div></div><div class="item-main-bottom"><div class="one"><a href="#"><i class="itlike-diamonds"></i>赞同 1.3k</a><a href="#"><i class="itlike-diamonds"></i></a></div><a href="#"><i class="itlike-bubble"></i>335 条评论</a><a href="#"><i class="itlike-compass"></i>分享</a><a href="#"><i class="itlike-star-full"></i>收藏</a><a href="#"><i class="itlike-heart"></i>感谢</a><a href="#">···</a></div></div></div><div class="item"><!--标题--><a class="item-title" href="#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》？</a><div class="item-main"><div class="item-main-top"><a class="item-main-l" href="#"><img src="data:images/c_pic.jpg" alt=""></a><div class="item-main-r"><span>丸子头： 不好意思，我是专门来吹爆霸总保剑锋演技的！！ 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了，完全靠杨紫的演技撑住第一集。 这次也是一样，整部剧其实剪辑及格分数以下，剧情嘛，不至于脑残但是也…</span><a href="#">阅读全文<i class="itlike-circle-down"></i></a></div></div><div class="item-main-bottom"><div class="one"><a href="#"><i class="itlike-diamonds"></i>赞同 1.3k</a><a href="#"><i class="itlike-diamonds"></i></a></div><a href="#"><i class="itlike-bubble"></i>335 条评论</a><a href="#"><i class="itlike-compass"></i>分享</a><a href="#"><i class="itlike-star-full"></i>收藏</a><a href="#"><i class="itlike-heart"></i>感谢</a><a href="#">···</a></div></div></div><div class="item"><!--标题--><a class="item-title" href="#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》？</a><div class="item-main"><div class="item-main-top"><a class="item-main-l" href="#"><img src="data:images/c_pic.jpg" alt=""></a><div class="item-main-r"><span>丸子头： 不好意思，我是专门来吹爆霸总保剑锋演技的！！ 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了，完全靠杨紫的演技撑住第一集。 这次也是一样，整部剧其实剪辑及格分数以下，剧情嘛，不至于脑残但是也…</span><a href="#">阅读全文<i class="itlike-circle-down"></i></a></div></div><div class="item-main-bottom"><div class="one"><a href="#"><i class="itlike-diamonds"></i>赞同 1.3k</a><a href="#"><i class="itlike-diamonds"></i></a></div><a href="#"><i class="itlike-bubble"></i>335 条评论</a><a href="#"><i class="itlike-compass"></i>分享</a><a href="#"><i class="itlike-star-full"></i>收藏</a><a href="#"><i class="itlike-heart"></i>感谢</a><a href="#">···</a></div></div></div><div class="item"><!--标题--><a class="item-title" href="#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》？</a><div class="item-main"><div class="item-main-top"><a class="item-main-l" href="#"><img src="data:images/c_pic.jpg" alt=""></a><div class="item-main-r"><span>丸子头： 不好意思，我是专门来吹爆霸总保剑锋演技的！！ 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了，完全靠杨紫的演技撑住第一集。 这次也是一样，整部剧其实剪辑及格分数以下，剧情嘛，不至于脑残但是也…</span><a href="#">阅读全文<i class="itlike-circle-down"></i></a></div></div><div class="item-main-bottom"><div class="one"><a href="#"><i class="itlike-diamonds"></i>赞同 1.3k</a><a href="#"><i class="itlike-diamonds"></i></a></div><a href="#"><i class="itlike-bubble"></i>335 条评论</a><a href="#"><i class="itlike-compass"></i>分享</a><a href="#"><i class="itlike-star-full"></i>收藏</a><a href="#"><i class="itlike-heart"></i>感谢</a><a href="#">···</a></div></div></div><div class="item"><!--标题--><a class="item-title" href="#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》？</a><div class="item-main"><div class="item-main-top"><a class="item-main-l" href="#"><img src="data:images/c_pic.jpg" alt=""></a><div class="item-main-r"><span>丸子头： 不好意思，我是专门来吹爆霸总保剑锋演技的！！ 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了，完全靠杨紫的演技撑住第一集。 这次也是一样，整部剧其实剪辑及格分数以下，剧情嘛，不至于脑残但是也…</span><a href="#">阅读全文<i class="itlike-circle-down"></i></a></div></div><div class="item-main-bottom"><div class="one"><a href="#"><i class="itlike-diamonds"></i>赞同 1.3k</a><a href="#"><i class="itlike-diamonds"></i></a></div><a href="#"><i class="itlike-bubble"></i>335 条评论</a><a href="#"><i class="itlike-compass"></i>分享</a><a href="#"><i class="itlike-star-full"></i>收藏</a><a href="#"><i class="itlike-heart"></i>感谢</a><a href="#">···</a></div></div></div><div class="item"><!--标题--><a class="item-title" href="#">如何评价佟大为刘诗诗电视剧《如果可以这样爱》？</a><div class="item-main"><div class="item-main-top"><a class="item-main-l" href="#"><img src="data:images/c_pic.jpg" alt=""></a><div class="item-main-r"><span>丸子头： 不好意思，我是专门来吹爆霸总保剑锋演技的！！ 上一次看国产剧坚持超过五分钟不拉快进已经是《香蜜》了，完全靠杨紫的演技撑住第一集。 这次也是一样，整部剧其实剪辑及格分数以下，剧情嘛，不至于脑残但是也…</span><a href="#">阅读全文<i class="itlike-circle-down"></i></a></div></div><div class="item-main-bottom"><div class="one"><a href="#"><i class="itlike-diamonds"></i>赞同 1.3k</a><a href="#"><i class="itlike-diamonds"></i></a></div><a href="#"><i class="itlike-bubble"></i>335 条评论</a><a href="#"><i class="itlike-compass"></i>分享</a><a href="#"><i class="itlike-star-full"></i>收藏</a><a href="#"><i class="itlike-heart"></i>感谢</a><a href="#">···</a></div></div></div></div></div><!--主体右边--><div class="main-right"><div class="r-one"><div class="r-one-item"><i class="itlike-book"></i><span>写回答</span></div><div class="r-one-item"><i class="itlike-file-text2"></i><span>写文章</span></div><div class="r-one-item"><i class="itlike-pencil"></i><span>写想法</span></div></div><div class="r-two"><div class="r-two-item"><i class="itlike-power orangered"></i><span>Live</span></div><div class="r-two-item"><i class="itlike-book green"></i><span>书店</span></div><div class="r-two-item"><i class="itlike-firefox blue"></i><span>圆桌</span></div><div class="r-two-item"><i class="itlike-pencil red"></i><span>专栏</span></div><div class="r-two-item"><i class="itlike-coin-yen purple"></i><span>付费咨询</span></div></div><div class="r-three"><a href="#"><img src="data:images/ad_one.jpeg" alt=""></a><a class="ad" href="">广告</a><span class="close">×</span></div><div class="r-three"><a href="#"><img src="data:images/ad_two.jpeg" alt="">`在这里插入代码片`</a><a class="ad" href="">广告</a><span class="close">×</span></div></div></main>
</body>
</html>

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----------------*/

实战flex：模拟实现静态知乎首页相关推荐

Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局 1.布局页面导航大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul. css代码块 /* 设置导航样式,定义flex容器 */ ...
知乎首页实战之背景与大体布局
模仿知乎首页编写之背景与布局刷完w3c的基础教程没有实际的操作,所以在一次偶然的想法驱动下开始模仿写出一个静态知乎登录网页. 背景设置打开知乎首页查看,之前的文章已经提到了查看网页源码,可以在其中 ...
使用Flex布局-实现静态携程网移动端首页
使用Flex布局-实现静态携程网移动端首页 Flex布局思路 html css Flex布局思路方案:单独制作移动页面方案技术:flex布局.宽度自适应高度固定 html <!DOCTYP ...
知乎首页实战之表单模块
知乎首页编写之表单模块知乎首页表单模块大致分为三个模块:logo,标语,输入界面,如下图: 将底色改为白色,对三个div块样式表进行修饰,给不同的颜色便于区分 .rectBrand{backgrou ...
python实战1.0——爬取知乎某问题下的回复
python实战1.0--爬取知乎某问题下的回复确定问题爬取进行简单筛选保存数据 # 获取问题下的回复总数 def get_number():url = 'https://www.zhihu. ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
Flutter开发实战高仿微信（一）首页
Flutter开发实战高仿微信(一)首页 Flutter开发实战高仿微信(一)首页 flutter 开发微信项目 (一) 1. 开发HomePage页 2. 用到的知识点讲解 2.1 Bottom ...
知乎python练手的_Python—爬虫之初级实战项目：爬取知乎任一作者的文章练手
爬虫之初级实战项目:爬取知乎任一作者的文章练手在正式上代码之前,先过一遍之前所学知识的框架内容,温故而知新!!! 接下来我们直接上代码,一定要手敲代码.手敲代码.手敲代码!!! import req ...
ThinkPHP6项目基操（11.实战部分部署后台静态页面模板及后台登录页面）
实战部分部署后台静态页面模板及后台登录页面前言一.部署静态资源到项目 1.新建后台静态资源文件夹二.后台登录页面 1. 目录结构 2. 模板字符串替换配置前言网站后台一般是在基础静态页面上 ...
Python 爬虫实战，模拟登陆爬取数据
Python 爬虫实战,模拟登陆爬取数据从0记录爬取某网站上的资源连接: 模拟登陆爬取数据保存到本地结果演示: 源网站展示: 爬到的本地文件展示: 环境准备: python环境安装略安装r ...

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

完整项目代码

实战flex：模拟实现静态知乎首页相关推荐

最新文章

热门文章