web前端踩坑小妹 简书文章页布局练习（flex练习）
近期在重拾页面～
做一个简书文章页的布局练习～
截至11-12晚进度
截至11.16进度～header完毕
截至11.23进度
定位和尺寸有点问题～继续修正
代码量
<html lang="en">
<head><meta charset="UTF-8"><title>简书文章页title><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">下载APPspan>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"><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">1span><span class="articleifo">2020.03.19 09:02:30 字数 1,671 阅读 301span>div>div><div class="right"><div class="introduce"><span>usernamespan><div class="follow">div><span>earn_ifospan><div class="bestarticle"><span>titlespan><span>desspan>div><div class="bestarticle"><span>titlespan><span>desspan>div>div><div class="tuijian"><div class="selected">div><span>推荐阅读span><div class="bestarticle"><span>titlespan><span>desspan>div><div class="bestarticle"><span>titlespan><span>desspan>div><div class="bestarticle"><span>titlespan><span>desspan>div><div class="bestarticle"><span>titlespan><span>desspan>div><div class="bestarticle"><span>titlespan><span>desspan>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;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！