实战HTML：模拟简书首页静态实现

目标:
实现简书首页的静态展示
效果:

代码:
html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简书 - 创作你的创作</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读"><meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
</head>
<body>
<!--头部导航-->
<nav id="nav"><div class="nav-content"><!--左边--><div class="nav-content-l"><a href="https://blog.csdn.net/KaiSarH"><img src="data:images/js_logo.png" alt=""></a></div><!--中间内容--><div class="nav-content-c"><ul><li><a href=""><img src="data:images/find_icon.png" alt="">发现</a></li><li><a href=""><img src="data:images/book_icon.png" alt="">关注</a></li><li><a href=""><img src="data:images/ld_icon.png" alt="">消息</a></li><li class="search-input"><label><input type="text" value="搜索"><img src="data:images/fd_icon.png" alt="" class="search-icon"></label></li></ul></div><!--右边--><div class="nav-content-r"><img src="data:images/jsa_icon.png" alt="" class="jsa-btn"><img src="data:images/touxiang_img.png" alt="" class="head-btn"><a href="#" class="write-btn"><img src="data:images/write_icon.png" alt="">写文章</a></div></div>
</nav>
<!--主体内容-->
<section id="main"><!--主体的左边--><div class="main-left"><!--焦点图--><div class="main-left-top"><img src="data:images/jdt.png" alt=""></div><!--投稿--><div class="main-left-center"><a href="#"><img src="data:images/1.jpg" alt="">故事</a><a href="#"><img src="data:images/2.jpg" alt="">读书</a><a href="#"><img src="data:images/3.jpg" alt="">摄影</a><a href="#"><img src="data:images/4.jpg" alt="">互联网</a><a href="#"><img src="data:images/2.jpg" alt="">读书</a><a href="#"><img src="data:images/3.jpg" alt="">摄影</a><a href="#"><img src="data:images/4.jpg" alt="">互联网</a><a href="#"><img src="data:images/3.jpg" alt="">摄影</a><a href="#">更多热门专题&nbsp;&gt;</a></div><!--文章列表--><div class="main-left-cell"><div class="cell"><dl><dt><img src="data:images/cell_img.jpg" alt=""></dt><dd><h3>排序图解：js排序算法实现</h3><p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p><a href="#"><span>远方不会远</span></a><a href="#"><img src="data:images/comment_icon.png" alt=""><span>999</span></a><a href="#"><img src="data:images/like_icon.png" alt=""><span>8989</span></a></dd></dl></div><div class="cell"><dl><dt><img src="data:images/cell_img.jpg" alt=""></dt><dd><h3>排序图解：js排序算法实现</h3><p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p><a href="#"><span>远方不会远</span></a><a href="#"><img src="data:images/comment_icon.png" alt=""><span>999</span></a><a href="#"><img src="data:images/like_icon.png" alt=""><span>8989</span></a></dd></dl></div></div></div><!--主体的右边--><div class="main-right"><!--第一部分--><div class="main-right-top"><a href="#"><img src="data:images/jf01.png" alt=""></a><a href="#"><img src="data:images/jf02.png" alt=""></a><a href="#"><img src="data:images/jf03.png" alt=""></a><a href="#"><img src="data:images/jf04.png" alt=""></a><a href="#"><img src="data:images/jf05.png" alt=""></a></div><!--第二部分--><div class="main-right-center"><dl><dt><img src="data:images/itlike.png" alt=""></dt><dd><p>下载简书手机App></p><p>随时随地发现和创作内容</p></dd></dl></div><!--第三部分--><div class="main-right-bottom"><div class="main-right-bottom-head"><span>推荐作者</span><span><a href="#">换一批</a></span></div><ul><li><a class="author-icon" href="#"><img src="data:images/author1.webp" alt=""></a><div><a href="#" class="title">王老师八卦美术史</a><p>写了132.4k字 · 788喜欢</p></div><a href="#" class="focus">+关注</a></li><li><a class="author-icon" href="#"><img src="data:images/author2.webp" alt=""></a><div><a href="#" class="title">红瑀</a><p>写了320.6k字 · 10.6k喜欢</p></div><a href="#" class="focus">+关注</a></li><li><a class="author-icon" href="#"><img src="data:images/author3.webp" alt=""></a><div><a href="#" class="title">须僧</a><p>写了241.4k字 · 3.5k喜欢</p></div><a href="#" class="focus">+关注</a></li><li><a class="author-icon" href="#"><img src="data:images/author4.webp" alt=""></a><div><a href="#" class="title">一只支</a><p>写了635.4k字 · 1.6k喜欢</p></div><a href="#" class="focus">+关注</a></li><li><a class="author-icon" href="#"><img src="data:images/author6.webp" alt=""></a><div><a href="#" class="title">孤狼</a><p>写了235.4k字 · 923喜</p></div><a href="#" class="focus">+关注</a></li></ul><a href="#" class="main-right-bottom-footer">查看全部</a></div></div>
</section>
</body>
</html>

CSS

/************************通用样式-start***********************/
* {margin: 0;padding: 0;box-sizing: border-box;border: none;
}ul, ol {list-style: none;
}a {text-decoration: none;color: #000;
}img {vertical-align: middle;
}input {outline: none;
}/************************通用样式-end***********************//************************头部样式-start***********************/
#nav {width: 100%;height: 56px;background-color: #fff;border-bottom: 1px solid #e7e7e7;z-index: 999;/*固定定位*/position: fixed;left: 0;top: 0;
}#nav .nav-content {width: 1440px;height: 56px;/*版心*/margin: 0 auto;
}#nav .nav-content .nav-content-l {float: left;
}#nav .nav-content .nav-content-l a img {width: 110px;height: 56px;
}#nav .nav-content .nav-content-c {width: 700px;height: 56px;/*浮动*/float: left;margin-left: 120px;
}#nav .nav-content .nav-content-c ul li {display: inline-block;height: 56px;line-height: 56px;
}#nav .nav-content .nav-content-c ul li a {/*改变标签的类型*/display: inline-block;padding: 0 15px;
}#nav .nav-content .nav-content-c ul li a img {width: 23px;height: 23px;margin-right: 5px;
}#nav .nav-content .nav-content-c ul li a:hover {background-color: #ccc;
}#nav .nav-content .nav-content-c ul li input {width: 225px;height: 38px;background-color: #eeeeee;border-radius: 40px;padding-left: 15px;font-size: 14px;color: #b8b8b8;
}#nav .nav-content .nav-content-c ul li.search-input {position: relative;margin-left: 10px;
}#nav .nav-content .nav-content-c ul li .search-icon {width: 20px;height: 20px;position: absolute;right: 10px;top: 20px;
}/*右边*/
#nav .nav-content .nav-content-r{width: 300px;height: 56px;line-height: 56px;float: right;
}#nav .nav-content .nav-content-r .jsa-btn{margin-left: 10px;
}#nav .nav-content .nav-content-r .head-btn{width: 40px;height: 40px;border-radius: 20px;margin: 0 10px;
}#nav .nav-content .nav-content-r .write-btn{background-color: #ea6f5a;display: inline-block;width: 100px;height: 40px;line-height: 40px;border-radius: 20px;padding-left: 10px;color: #fff;
}#nav .nav-content .nav-content-r .write-btn .write-btn img{margin-right: 5px;
}/************************头部样式-end***********************//************************内容样式-start***********************/
#main{width: 1000px;height: 2000px;margin: 70px auto;
}#main .main-left{width: 688px;height: 800px;float: left;
}#main .main-left .main-left-top{height: 270px;
}#main .main-left .main-left-top img{width: 688px;height: 270px;border-radius: 10px;
}#main .main-left-center{width: 100%;height: 110px;margin-top: 20px;
}#main .main-left-center a{display: inline-block;height: 32px;border: 1px solid #dcdcdc;background-color: #e7e7e7;margin: 0 18px 18px 0;padding-right: 15px;border-radius: 5px;font-size: 14px;vertical-align: top;
}#main .main-left-center a:last-child{background-color: transparent;border: none;line-height: 32px;font-size: 16px;color: #787878;
}#main .main-left-center a img{width: 30px;height: 30px;vertical-align: middle;margin-right: 15px;border-radius: 5px 0 0 5px;
}/*文章列表*/
#main .main-left-cell{height: 500px;
}#main .main-left-cell .cell{border-top: 1px solid #F0F0F0;height: 125px;padding: 10px 0;
}#main .main-left-cell .cell dt{width: 20%;height: 100px;float: right;
}#main .main-left-cell .cell dt img{width: 100%;height: 100%;border-radius: 5px;
}#main .main-left-cell .cell dd{width: 80%;float: left;
}#main .main-left-cell .cell dd p{font-size: 14px;margin: 5px 0;color: #666666;
}#main .main-left-cell .cell dd a{margin-right: 10px;font-size: 12px;color: #b4b4b4;
}#main .main-left-cell .cell dd a span,
#main .main-left-cell .cell dd a img{vertical-align: middle;
}#main .main-right{width: 300px;height: 800px;float: right;
}#main .main-right .main-right-top{height: 290px;
}#main .main-right .main-right-top img{width: 300px;height: 50px;margin-bottom: 5px;
}#main .main-right .main-right-center{height: 90px;border: 1px solid #F0F0F0;border-radius: 5px;padding: 15px 25px;
}#main .main-right .main-right-center dl dt{float: left;margin-right: 10px;
}#main .main-right .main-right-center dl dd{float: left;margin-top: 8px;
}#main .main-right .main-right-center dl dd p{font-size: 14px;margin-top: 3px;
}#main .main-right .main-right-center dl dd p:last-child{color: #b4b4b4;
}#main .main-right .main-right-center dl dt img{width: 60px;height: 60px;
}#main .main-right .main-right-bottom{height: 300px;
}#main .main-right .main-right-bottom .main-right-bottom-head{height: 45px;line-height: 45px;padding: 5px 10px;font-size: 14px;color: #b8b8b8;margin-bottom: 10px;
}#main .main-right .main-right-bottom .main-right-bottom-head span:first-child{float: left;font-size: 14px;
}#main .main-right .main-right-bottom .main-right-bottom-head span:last-child{float: right;font-size: 14px;
}#main .main-right .main-right-bottom .main-right-bottom-head span:last-child a{color: #b8b8b8;
}#main .main-right .main-right-bottom ul li{width: 300px;height: 50px;margin-bottom: 10px;position: relative;
}#main .main-right .main-right-bottom ul li img{width: 48px;height: 48px;border-radius: 50%;border: 1px solid #CCCCCC;margin-right: 10px;
}#main .main-right .main-right-bottom ul li .author-icon{float: left;
}#main .main-right .main-right-bottom ul li  a.focus{position: absolute;right: 0;top: 0;color: Lime;
}#main .main-right .main-right-bottom ul li>div{float: left;height: 50px;line-height: 25px;
}#main .main-right .main-right-bottom ul li>div>p{color: #b4b4b4;
}#main .main-right .main-right-bottom-footer{display: inline-block;width: 300px;border: 1px solid #CCCCCC;padding: 7px 10px;text-align: center;border-radius: 5px;color: #b4b4b4;margin-top: 10px;
}/************************内容样式-end***********************/

总结:

高度崩塌
序号选择器

实战HTML：模拟简书首页静态实现相关推荐

基于python爬虫的论文标题_Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】...
本文实例讲述了Python3实现爬取简书首页文章标题和文章链接的方法.分享给大家供大家参考,具体如下: from urllib import request from bs4 import Beaut ...
python生成文章标题_利用简书首页文章标题数据生成词云
原标题:利用简书首页文章标题数据生成词云感谢关注天善智能,走好数据之路↑↑↑ 欢迎关注天善智能,我们是专注于商业智能BI,人工智能AI,大数据分析与挖掘领域的垂直社区,学习,问答.求职一站式搞定! ...
android jsoup简书,jsoup爬虫简书首页数据做个小Demo
昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固,比如java反射注解,知道一点就是说不出来,很尴尬... 生命不止,学习不止啊之前那个项目 Q ...
Node爬取简书首页文章
Node爬取简书首页文章博主刚学node,打算写个爬虫练练手,这次的爬虫目标是简书的首页文章流程分析使用superagent发送http请求到服务端,获取HTML文本用cheerio解析获得的 ...
jsoup爬虫简书首页数据做个小Demo
代码地址如下: http://www.demodashi.com/demo/11643.html 昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固 ...
谈谈未来简书首页拒稿界面的设计思路
(文/阿群1986) 被简书首页拒稿的文章,拒稿原因应该被存储到特定页面进行公示,公示期可以暂定为7至30天.这样可能给用户提供一个途径,去访问.了解自己和别人被拒稿的稿件分别是什么样子的,哪种类型的 ...
简书首页标题配图bug，偶发，未能重现（可以重现2017-12）
现象1:首页不显示配图(之前在移动网络下查看一次7日热门,然后简书首页的标题配图异常消失) 图片发自简书App 无论设置移动网络下加载图片还是不加载图片,移动4G网络首页均无法显示标题配图. &quo ...
python关键词打标签详解_Python学习日记13|利用python制作简书首页热门文章关键词标签云...
今天是6.16号. 昨天去面越秀金融风险控制部计算机实习生,去面了才知道主要也就是做数据抓取这一块.面试过程中有问到分词,然后自己心虚的说了有接触过分词这一块,面试结果就不去想了,过不过都其实不重要了 ...
python爬虫抓取分页_Python爬虫—简书首页数据抓取
简书本该昨天完成的文章,拖了一天.可能是没休息好吧,昨天的在思路以及代码处理上存在很多问题,废话不多说,我们一起来看一下简书首页数据的抓取. 抓取的信息 2.2)简书首页文章信息 http://ww ...
爬虫36计之 1.2 爬取文章-简书首页推荐文章
文章目录爬取文章-简书首页推荐文章页面分析页面源码分析代码编写获取第一页的内容解析第一页面的方法:_parse_li() 获取下一页的方法:_handle_next_page() 实例运行 ...

实战HTML：模拟简书首页静态实现

实战HTML：模拟简书首页静态实现相关推荐

最新文章

热门文章