flex弹性盒子实现微博页面
结果图：
源代码：
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>微博-发现</title>
<link rel="stylesheet" href="./weibo.css">
</head>
<body>
<div class="searchCnt">
<div class="searchBox">
<img src="../images/search.svg"/>
<p>大家正在搜：带娃去滑雪</p>
</div>
</div> <!--轮播图-->
<div class="swiperCnt">
<img src="../images/xiaomi/1.jpg"/>
</div> <!--菜单按钮-->
<div class="menuCnt">
<div class="menuItem">
<img src="../images/circle/0.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/1.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/2.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/3.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/10.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/5.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/6.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/7.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/8.svg"/>
<p>找人</p>
</div>
<div class="menuItem">
<img src="../images/circle/9.svg"/>
<p>找人</p>
</div>
</div>
<!--热门话题-->
<div class="hotCnt">
<ul>
<li>
<img src="../images/dog.jpg"/>
<p>#全球跨年#</p>
</li>
<li>
<img src="../images/dog.jpg"/>
<p>#全球跨年#</p>
</li>
<li>
<img src="../images/dog.jpg"/>
<p>#全球跨年#</p>
</li>
<li>
<img src="../images/dog.jpg"/>
<p>#全球跨年#</p>
</li>
</ul>
</div>
<!--微博之夜-->
<div class="weiboCnt">
<!--标题-->
<div class="title">
<p class="titleMain">微博之夜</p>
<p class="title2">为爱打call</p>
</div>
<!--滚动组-->
<div class="weiboGroup">
<div class="weiboBox">
<div class="groupItem">
<img src="../images/cat.jpg">
<p>一键探秘</p>
</div>
<div class="groupItem">
<img src="../images/cat.jpg">
<p>一键探秘</p>
</div>
<div class="groupItem">
<img src="../images/cat.jpg">
<p>一键探秘</p>
</div>
</div>
</div>
</div>
<!--tab栏-->
<div class="tabCnt">
<p>视频</p>
<p class="active">头条</p>
<p>榜单</p>
<p>南京</p>
</div> <!--提示文字-->
<p class="mark">热门微博24小时排行榜</p> <!--微博正文-->
<div class="weboList">
<!--单个微博-->
<div class="weiboRow">
<!--用户信息与关注-->
<div class="userInfoCnt">
<div class="userInfoBox">
<div class="userHpBox">
<img src="../images/rabbit.jpg">
</div>
<div class="userInfoGroup">
<p class="userName">用户名</p>
<div class="timeBox">
<p class="time">2小时前</p>
<p class="source">来自iphone X</p>
</div>
</div>
</div>
<input class="guanzhuBtn" type="button" value="+关注"/>
</div>
<!--微博正文-->
<div class="weiboDetail">
从景观文本看，首先应注意空间的整体性。比如大运河作为世界文化遗产，通惠河、积水潭都是其中的景观，但是南新仓，目前有六七座古代的粮仓，与其他省市粮仓遗址相比，作为皇家粮仓的建筑形式非常独特，应同通惠河联系在一起，彰显大运河文化遗产的整体性。
</div>
<!--微博操作-->
<div class="weiboOp">
<div class="weiboOpItem">
<img src="../images/edit.svg"/>
<p>4万</p>
</div>
<div class="weiboOpItem">
<img src="../images/message.svg"/>
<p>6万</p>
</div>
<div class="weiboOpItem">
<img src="../images/bigFinger.svg"/>
<p>43万</p>
</div>
</div>
</div>
<!--单个微博end-->
<div class="weiboRow">
<!--用户信息与关注-->
<div class="userInfoCnt">
<div class="userInfoBox">
<div class="userHpBox">
<img src="../images/rabbit.jpg">
</div>
<div class="userInfoGroup">
<p class="userName">用户名</p>
<div class="timeBox">
<p class="time">2小时前</p>
<p class="source">来自iphone X</p>
</div>
</div>
</div>
<input class="guanzhuBtn" type="button" value="+关注"/>
</div>
<!--微博正文-->
<div class="weiboDetail">
从景观文本看，首先应注意空间的整体性。比如大运河作为世界文化遗产，通惠河、积水潭都是其中的景观，但是南新仓，目前有六七座古代的粮仓，与其他省市粮仓遗址相比，作为皇家粮仓的建筑形式非常独特，应同通惠河联系在一起，彰显大运河文化遗产的整体性。
</div>
<!--微博操作-->
<div class="weiboOp">
<div class="weiboOpItem">
<img src="../images/edit.svg"/>
<p>4万</p>
</div>
<div class="weiboOpItem">
<img src="../images/message.svg"/>
<p>6万</p>
</div>
<div class="weiboOpItem">
<img src="../images/bigFinger.svg"/>
<p>43万</p>
</div>
</div>
</div>
<!--单个微博end-->
<div class="weiboRow">
<!--用户信息与关注-->
<div class="userInfoCnt">
<div class="userInfoBox">
<div class="userHpBox">
<img src="../images/rabbit.jpg">
</div>
<div class="userInfoGroup">
<p class="userName">用户名</p>
<div class="timeBox">
<p class="time">2小时前</p>
<p class="source">来自iphone X</p>
</div>
</div>
</div>
<input class="guanzhuBtn" type="button" value="+关注"/>
</div>
<!--微博正文-->
<div class="weiboDetail">
从景观文本看，首先应注意空间的整体性。比如大运河作为世界文化遗产，通惠河、积水潭都是其中的景观，但是南新仓，目前有六七座古代的粮仓，与其他省市粮仓遗址相比，作为皇家粮仓的建筑形式非常独特，应同通惠河联系在一起，彰显大运河文化遗产的整体性。
</div>
<!--微博操作-->
<div class="weiboOp">
<div class="weiboOpItem">
<img src="../images/edit.svg"/>
<p>4万</p>
</div>
<div class="weiboOpItem">
<img src="../images/message.svg"/>
<p>6万</p>
</div>
<div class="weiboOpItem">
<img src="../images/bigFinger.svg"/>
<p>43万</p>
</div>
</div>
</div>
<!--单个微博end-->
</div>
</body>
</html> weibo.css部分：
body {
padding: 0;
margin: 0;
}
ul, p {
margin: 0;
padding: 0;
}
img {
display: block;
width: 100%;
height: auto;
}
/*搜索栏*/
.searchCnt {
background-color: #fff;
padding: 10px;
}
.searchBox {
background-color: #e3e4e6;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 5px;
padding: 5px 0;
}
.searchBox img {
width: 16px;
height: 16px;
margin-right: 5px;
}
.searchBox p {
font-size: 14px;
color: #636363;
}
.menuCnt {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
}
.menuCnt .menuItem {
width: 20%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 10px;
align-items: center;
/*margin-bottom: 10px;*/
/*justify-content: center;*/
}
.menuCnt .menuItem img {
/*width: 80%;*/
}
/*热门话题*/
.hotCnt {
/*display: flex;*/
/*flex-direction: row;*/
}
.hotCnt ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-top: 1px solid #ddd;
}
.hotCnt ul li {
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
padding: 5px;
border-bottom: 1px solid #ddd;
}
.hotCnt ul li:nth-child(3),.hotCnt ul li:nth-child(4){
border-bottom: 0;
}
/*.hotCnt ul li:nth-child(2n){*/
/*border-left: 1px solid #ddd;*/
/*}*/
.hotCnt ul li img {
width: 30px;
margin-right: 5px;
}
/*每个li的右边加上一条竖线，这里采用p的右边框*/
.hotCnt li p{
flex: 1;
border-right:1px solid #ddd;
}
.hotCnt li:nth-child(even) p{
border-right:0;
}
/*微博之夜*/
.weiboCnt{
display:flex;
flex-direction: column;
border-top: 10px solid #f2f2f2;
}
.title{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 5px 10px;
border-left: 3px solid #ff8201;
margin: 5px 0;
}
.titleMain{
color: #636363;
font-size: 16px;
}
.title2{
font-size: 14px;
color: #939393;
}
.weiboGroup{
padding: 0 10px;
padding-bottom: 10px;
overflow-x:hidden;
}
.weiboBox{
display: flex;
flex-direction: row;
overflow-x:scroll;
width: 100%;
}
.groupItem{
display: flex;
flex-direction: column;
margin-right: 10px;
width: 45%;
flex-shrink: 0;
}
.groupItem p{
border: 1px solid #ddd;
border-top: none;
padding: 10px;
font-size: 14px;
}
/*tab栏*/
.tabCnt{
border-top: 10px solid #f2f2f2;
display: flex;
flex-direction: row;
justify-content: center;
}
.tabCnt p{
padding: 10px 0px;
color: #939393;
font-size: 16px;
margin: 0 20px;
}
.tabCnt .active{
border-bottom: 2px solid #fe6a00;
color: #000;
font-weight: bold;
}
.mark{
background-color: #f2f2f2;
font-size: 12px;
padding: 10px;
color: #636363;
}
/*微博正文*/
/*用户信息与关注*/
.weboList{
display: flex;
flex-direction: column;
}
.weiboRow{
display: flex;
flex-direction: column;
border-bottom: 10px solid #f2f2f2;
}
.userInfoCnt{
display: flex;
flex-direction: row;
padding: 10px;
align-items: center;
}
.userInfoBox{
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.userHpBox{
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.userInfoGroup{
display: flex;
flex-direction: column;
}
.userName{
font-size: 16px;
color: #fe6a00;
margin-bottom: 5px;
}
.time{
font-size: 12px;
color: #939393;
margin-right: 5px;
}
.source{
font-size: 12px;
color: #557ca7;
}
.timeBox{
display: flex;
flex-direction: row;
}
.guanzhuBtn{
background-color: rgba(0,0,0,0);
border: 1px solid #fe6a00;
color: #fe6a00;
border-radius: 5px;
font-size: 16px;
padding:5px 10px;
}
/*正文*/
.weiboDetail{
padding: 0 10px;
font-size: 14px;
color: #333;
line-height: 1.6;
}
/*微博操作*/
.weiboOp{
display: flex;
flex-direction: row;
padding: 10px;
}
.weiboOpItem{
display: flex;
flex: 1;
flex-direction: row;
border-top: 1px solid #ddd;
padding: 10px 0;
justify-content: center;
align-items: center;
}
.weiboOpItem img{
width: 20px;
height: 20px;
margin-right: 5px;
}
.weiboOpItem p{
font-size: 14px;
color: #939393;
}
flex弹性盒子实现微博页面的更多相关文章
- flex弹性盒子布局
一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...
- flex弹性盒子的使用
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! CSS3引入了一种新的布局模型—— flex 布局.flex是 flexible box 的缩写,一般称之 ...
- css3 flex弹性盒子布局梳理，打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
- JS Web的Flex弹性盒子模型
1. justify-content <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- flex 弹性盒子模型一些案例.html
Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 自适应导航 <ul class="navi ...
- flex弹性盒子
注意事项 1.设为Flex布局之后,子元素的float,clear和vertical-align属性都讲失效 2.采用Flex布局的元素,称为Flex容器(Flex container),所有的子元素 ...
- Flex 弹性盒子布局使用教程
本文转载于<https://blog.csdn.net/lyznice/article/details/53981062>
- css3弹性盒子display：flex
先看上面的代码,解释一下意思,看你能认识多少(后面有注释): .container { display: flex; //弹性布局 flex-direction: column; //容器内项目的排列 ...
- flex属性值----弹性盒子布局
里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法: display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...
随机推荐
- windowserver 2012安装openssh
下载https://github.com/PowerShell/Win32-OpenSSH/releases解压放到C:\Program Files\OpenSSH-Win64 进入到C:\Progr ...
- 查漏补缺：socket编程：TCP粘包问题和常用解决方案（上）
1.TCP粘包问题的产生(发送端) 由于TCP协议是基于字节流并且无边界的传输协议,因此很容易产生粘包问题.TCP的粘包可能发生在发送端,也可能发生在接收端.发送端的粘包是TCP协议本身引起的,TCP ...
- 高阶函数---swift中的泛型介绍(一步步实现Map函数)
说明 本文内容均出自函数式 Swift一书, 此处整理仅仅是为了自己日后方便查看, 需要深入研究的话, 可以点进去购买, 支持原作者 本书由 王巍–新浪微博大神翻译 OneV's Den 喵神博客 接 ...
- 美团CodeM 资格赛第一题
美团外卖的品牌代言人袋鼠先生最近正在进行音乐研究.他有两段音频,每段音频是一个表示音高的序列.现在袋鼠先生想要在第二段音频中找出与第一段音频最相近的部分. 具体地说,就是在第二段音频中找到一个长度和第 ...
- 探究 Go 语言 defer 语句的三种机制
Golang 的 1.13 版本 与 1.14 版本对 defer 进行了两次优化,使得 defer 的性能开销在大部分场景下都得到大幅降低,其中到底经历了什么原理? 这是因为这两个版本对 defer ...
- 【阿里云IoT+YF3300】16.云端一体化，天猫精灵操控YF3300
“你好天猫精灵”,“主人有什么吩咐”,“打开灯”,“好的,灯已打开”.对于这样的对话应该大多数人都很熟悉,这就是智能家居的缩影.对于现在市面上层出不穷的智能家居系统,功能越来越繁杂,可是因为开发难度高 ...
- kali linux下运行.sh文件权限不够解决办法
我要装一个生成免杀的神奇,系统提示权限不够 2 于是我想到了sudo,可还是不行 3 于是找到了方法 chmod a+x 文件名 4 再运行一下,成功 5 有时有的方法很简答,只要你愿意找.
- docker 搭建本地私有仓库
1.使用registry镜像创建私有仓库 安装docker后,可以通过官方提供的 registry 镜像来简单搭建一套本地私有仓库环境: docker run -d -p : registry: 这将 ...
- vnstat 流量统计 并附带一个小 php 查看流量的页面
安装apt-get install vnstat 配置到自动启动update-rc.d vnstat enable 启动/etc/init.d/vnstat start vnstat基本使用命令 vn ...
- 作为一个Tester，你在客户环境能保证质量吗？
公司严格地按照“产品-项目”模式来架构技术部门. 我又测产品,又测项目,所以一方面可以从项目测试的角度发现产品bug,并且给产品提供改进意见,一方面还能测产品为项目赋能,保证项目质量,让项目经理轻松些 ...