web前端踩坑小妹简书文章页布局练习（flex练习）

最新推荐文章于 2024-08-05 15:37:32 发布

fairycode

最新推荐文章于 2024-08-05 15:37:32 发布

阅读量182

点赞数 1

分类专栏：前端踩坑蹚水小妹文章标签： Flex布局网页设计 CSS样式简书页面构建

本文链接：https://blog.csdn.net/fairycode/article/details/109667237

版权

前端踩坑蹚水小妹专栏收录该内容

6 篇文章 0 订阅

订阅专栏

近期在重拾页面～
做一个简书文章页的布局练习～
在这里插入图片描述

截至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;
}

fairycode

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端踩坑小妹简书文章页布局练习（flex练习）

近期在重拾页面～做一个简书文章页的布局练习～截至11-12晚进度代码量html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> 简书文章页 </title>  <link rel="stylesheet" href="janeys.
复制链接

扫一扫