本文主要是介绍web前端踩坑小妹 简书文章页布局练习（flex练习），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
近期在重拾页面～
做一个简书文章页的布局练习～
截至11-12晚进度
截至11.16进度～header完毕
截至11.23进度
定位和尺寸有点问题～继续修正
代码量
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简书文章页</title><!-- 外链css --><link rel="stylesheet" href="mid.css"><link rel="stylesheet" href="janeys.css"></head>
<body><header><!-- 顶栏左侧内容 --><div class="h-left"><div class="logo"><img src="img/logo.png" alt=""></div><div class="home"><a href="https://www.jianshu.com/"><span class="h-span">首页</span></a></div><div class="downloadapp"><a href="https://www.jianshu.com/"><span class="h-span">下载APP</span></a></div><div class="search"><!-- 搜索框内提示文字 搜索 --><input type="text" placeholder="搜索"><img src="img/search.png" alt=""></div></div><!-- 顶栏右侧内容 --><div class="h-right"><div class="readconfig"><img src="img/aa.png" alt=""></div><div class="beta"><img src="img/beta.jpg" alt=""></div><div class="login"><span>登陆</span></div><div class="sign"><a href="https://www.jianshu.com/sign_up"></a><span>注册</span></div><div class="edit"><img src="img/penleather.png" alt=""><span>写文章</span></div></div></header><div class="mid"><!-- body内左侧两个圆形按钮和文字 --><div class="left"><div class="zan"><img src="img/zan@3x.png" alt=""></div><div class="wenzi">24赞</div><div class="shang"><img src="img/shang@3x.png" alt=""></div><div class="wenzi">赞赏</div></div><!-- 中间具体的文章 --><div class="middle"><h1>Flex布局知识点总结</h1><img src="img/ava.jpg" alt=""><span>艾曼大山</span><div class="follow2">关注</div><div class="ifo"><img class="zuanshi" src="img/dimond.png" alt=""><span class="yuedu">1</span><span class="articleifo">2020.03.19 09:02:30 字数 1,671 阅读 301</span></div></div><!-- 中间右侧的推荐等 --><div class="right"><div class="introduce"><span>username</span><div class="follow"></div><span>earn_ifo</span><div class="bestarticle"><span>title</span><span>des</span></div><div class="bestarticle"><span>title</span><span>des</span></div></div><div class="tuijian"><div class="selected"></div><span>推荐阅读</span><div class="bestarticle"><span>title</span><span>des</span></div><div class="bestarticle"><span>title</span><span>des</span></div><div class="bestarticle"><span>title</span><span>des</span></div><div class="bestarticle"><span>title</span><span>des</span></div><div class="bestarticle"><span>title</span><span>des</span></div></div> </div> </div><footer></footer>
</body>
</html>
/* 通配符 */
* {margin: 0 ;padding: 0 ;
}/* 全局链接样式 无下划线*/
a {text-decoration: none;
}
/* 全局输入框样式 无内框无点击后边框效果 */
input {border: none;outline: none;
}
body {background: #f9f9f9;
}
/* 顶栏区域靠顶部锁死 宽度自适应百分百 高度56钉死 */
header {position: fixed;width: 100%;height: 56px;top: 0px;background: #fff;line-height: 56px;box-shadow: 0px 2px 5px #f1f1f1;
}
/* 顶栏左侧内容 弹性分配 */
header .h-left {display: flex;width: 50%;margin-right: 0px;float: left;
}
/* 搜索框父级 */
.search {position: relative;margin-left: 20px;margin-right: 0px;
}
/* 搜索框 内框上右下左8 36 8 16px */
.search input {width: 108px;height: 20px;border-radius: 20px;background-color: #eee;padding:8px 36px 8px 16px;
}
/* 输入框 提示语句样式*/
input::placeholder {font-size: 14px;color:#ccc;height: 20px;
}
/* 搜索icon 根据search绝对定位 距离top20px距离右侧14px cursor表示悬停的鼠标样式 pointer是小手手 */
.search img {position: absolute;top:20px;right: 14px;cursor: pointer;
}
header .logo {height: 56px;
}
header .logo img {height: 56px;width: 106px;margin-left: 120px;margin-right: 60px;
}
/* 给各种span一个统一的class，统一定义样式 这里目前还是针对超链接内的文字 */
header .h-span {font-size: 16px;font-weight: 400;color: #333;margin-left:40px;margin: 20px;letter-spacing: 2px;
}
header .h-right {height: 56px;width: 50%;float: right;display: flex;}
header .h-right .readconfig {margin-left: 200px;
}
header .h-right .readconfig img {width: 24px;height: 24px;cursor: pointer;margin-top: 16px;margin-bottom: 16px;
}header .h-right .beta {margin-left: 20px;
}header .h-right .beta img {width:68;height: 34px;cursor: pointer;margin: 11px 0px 8px 0px;
}
header .h-right .login {margin-left:20px;
}header .h-right .login span {font-size: 20px;color:#ccc;line-height: 56px;cursor: pointer;
}header .h-right .sign {width:80px;height: 40px;line-height: 40px;text-align:center;background-color: #fff;border-radius: 20px;border:1px #ec7259 solid;margin-left: 20px;margin-top: 8px;cursor: pointer;
}
/* hover写的有问题还没改 */header .h-right .sign span {color:#ec7259;font-size: 16px;
}
header .h-right .edit {position: relative;width:108px;height: 40px;line-height: 40px;text-align:center;background-color: #ec7259;border-radius: 20px;border:1px #ec7259 solid;margin-left: 20px;margin-top: 8px;cursor: pointer;
}
header .h-right .edit span {position: absolute;right:20px;color:#fff;font-size: 16px;
}
header .h-right .edit img {position: absolute;width: 22px;height: 22px;left:14px;margin-top:9px;
}
body .mid {position:fixed;display:flex;top: 68px;left: 400px;right:400px;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;
}
body .mid .left {position:flex;width: 48px;flex-flow:column wrap;height: 100px;margin-top: 140px;
}
body .mid .left .zan {display: flex;width:48px;height: 48px;border-radius: 24px;box-shadow: 0px 0px 4px #ccc;background: #fff;cursor: pointer;
}
body .mid .left img {width: 28px;height: 28px;margin: 10px;
}
body .mid .left .wenzi {width: 48px;font-size: 14px;color:#ccc;text-align: center;margin-top:4px;
}body .mid .left .shang {display: flex;width:48px;height: 48px;border-radius: 24px;box-shadow: 0px 0px 4px #ccc;background: #fff;align-content:flex-end;margin-top:20px;cursor: pointer;
}
body .mid .middle {background: #fff;width: 820px;height: 500px;margin: 0px 10px 10px 10px;
}
body .mid .middle h1{color:#333;margin-bottom: 20px;margin-top: 40px;margin-left:20px;
}
body .mid .middle img{height: 50px;width: 50px;border-radius: 50px;margin-left: 20px;flex-direction: column;flex-wrap: nowrap;float: left;
}
body .mid .middle .follow2 {width: 56px;height: 22px;line-height: 22px;text-align:center;background-color: #fff;border-radius: 20px;border:1px #ec7259 solid;cursor: pointer;color:#ec7259;font-size: 14px;margin-right: 0px;margin-left:6px;float: left;
}
body .mid .middle span {font-size: 18px;color:#333;margin-left: 6px;float: left;}
body .mid .middle .ifo {float: left;
}
body .mid .middle .ifo .zuanshi{height: 18px;width: 18px;
}
body .mid .middle .ifo .yuedu {color:#ec7259;font-size: 16px;
}
body .mid .middle .articleifo {color:#777;font-size: 14px;
}
body .mid .right {width: 340px;height: 400px;background-color: #fff;
}
这篇关于web前端踩坑小妹 简书文章页布局练习（flex练习）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
