模仿扇贝短文阅读页面
有时候会看一下扇贝短文阅读，觉得布局挺好看的，正好在学习CSS基础，就想模仿着做一下。
参考的神舟十二那篇文章，做完后的“盗版”界面大概如下：
大致看上去还OK，但实际上没有做任何链接，也没有下拉菜单，没有自动翻译，没有添加备注……等等一系列功能。这样看来一个简单的界面也不是那么简单的，哎，看我啥时候能把它补齐。
记录下思路：
一开始想用layUI，页眉还没做出来，layUI官宣停止维护，另一方面发现用框架反而更复杂，搞了一整天导航栏还没弄出来，还不如直接用纯HTML+CSS做呢，就当巩固基础了。
整体分上下两个div，导航div和内容div：
上面的div还分了三个部分，最左侧是普通链接，中间是搜索框和帮助，右边是个人中心。之所以搞这么复杂还不是一开始雄心壮志的，想着分开了，后面添加搜索功能、个人中心设置下拉菜单也方便，鬼知道只搞了界面出来。
下面的div比较简单，分为左右两个板块，左边就是短文内容，右边的相关推荐阅读和广告二维码。
废话不多说，代码如下：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ShanBeiWeb</title><link rel="stylesheet" href="shanbeiWeb.css">
</head>
<body><div class="navTap"><div class="topTap"><div class="topleft"><a style="margin: 10px 20px 0 0;"><img src="logo_shanbei.png" style="width: 100px;height: 40px;" alt="zhanweifu"></a><a>首页</a><a>单词</a><a>编程</a><a>听力</a><a>口语</a><a>短文</a><a>读书</a><a>社区</a><a>帮助</a></div><div class="topright"><label><input placeholder="查词"></label><a style="float: right">帮助</a></div><div class="topuser">个人中心</div></div></div><div class="bigDiv"><div class="leftDiv"><p class="englishHead"><b>Shenzhou-12 Returned: How Important Is The Parachute?</b></p><p class="chineseHeadLine">神舟十二返航，降落伞如何保驾护航？</p><p class="easyDifficult">难度：六级/考研 单词：314 读后感：47</p><img src="center_img.png" style="width: 800px;height: auto;"><p>The three taikonauts aboard China's Shenzhou-12 spacecraft naturally get most of the attentionduring discussions of their historic 90-day mission. But on their return to Earth,a key piece of equipment takes a starring role: The giant parachute that softens their landing.China's self-developed parachutes have escorted all Shenzhou spacecraft back to Earth smoothly.
模仿扇贝短文阅读页面相关推荐
- php实现返回界面,PHP实现模仿socket请求返回页面的方法
本文实例讲述了PHP实现模仿socket请求返回页面的方法.分享给大家供大家参考.具体实现方法如下: $url = "www.XXXX.com"; //自己做替换 $parse = ...
- 【HTML】@weijinhai0101：模仿酷狗登录页面半成品（CSS样式和HTML代码放在一起了）
``` <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
- html5网页仿写,纯CSS代码模仿绘制蚂蚁庄园页面
CSS的图形绘制功能还是很强大的,今天就用CSS模仿一个支付宝蚂蚁庄园的页面,当然,说是模仿,因为是电脑页面,又因为时间关系,只能模仿个大概.先把效果图贴出来,截图只能截取静态效果,动画看不出来,大家 ...
- kindle阅读_如何在Kindle上清除最远的阅读页面
kindle阅读 It's really annoying when you're trying to re-read an eBook and your Kindle or Kindle app k ...
- 微信小程序相关一、模仿京东静态登录页面
一.培训的第一天,基本上没有什么最新的东西,但是看到老师的代码收获的确实是不少. 1.1.首页代码很简洁,将共有的样式都提取的很好. 1.2.其次是每一个小块写样式的时候用到了好多子代选择器和后代选择 ...
- 电子计算机与多媒体短文阅读答案,电子计算机和多媒体习题精选.doc
<电子计算机和多媒体>习题精选 一.多音字组词. 二.写出下列词语的近义词. 诞生--( ) 信息--( ) 获取--( ) 处理--( ) 传递--( ) 预料--( ) 三.把不能搭配 ...
- 17年寒假阅读页面索引
一个寒假从0起步读了太多东西,收藏夹也好标签页也好都不堪重负,就写一个博客记录一下 目标是清理一下收藏夹,同时不用每次打开浏览器都恢复上一次会话. 新的一年希望减少在手机上的阅读. http://ww ...
- 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
转自:http://blog.csdn.net/loongggdroid/article/details/51442097 特别喜欢稀土掘金个人界面的样子,那我们就来看看如何实现这个效果吧,要想实现这 ...
- 使用epubjs开发一个电子书阅读页面
以下功能包括,阅读epub电子书,上一张,下一章,左翻页,右翻页,目录,设置字体,背景色,书签等功能,使用uniapp框架开发,遇到许多问题,现在是一个完整的功能,以后用到可以使用. html < ...
最新文章
- Python 数据分析三剑客之 Matplotlib（七）：饼状图的绘制
- 8个应用案例告诉你，机器学习都能做什么？
- linux domino启动和停止命令,在unix平台中通过脚本来启动和停止domino和domino控制器所用的参数_lotus notes...
- Linux下安装配置vsftpd
- Unix中$$、$@、$#、$*的意思
- java鼠标中键_java-selenium鼠标键盘操作Actions类和Robot
- lammps教程：group命令详解
- 关于SPSS16的安装及教程
- 梦网云通讯平台个性化短信API接口multi_send
- Gson解析json文件
- 图解机器学习：分类模型性能评估指标
- easypoi 批量导出_浅谈easypoi快速实现excel批量导入
- Mac重装系统（1）系统U盘制作
- ln命令 Linux软连接（Symbolic Link）和硬链接（Hard Link）
- FAST-LIO2代码解析(五)
- 钛媒体2022 EDGE AWARDS全球创新评选之「年度最佳企业服务品牌」揭榜
- C/C++编码准则，可借鉴的东西还挺多！
- 计算机数值方法之最小二乘法拟合多项式C语言
- listview 的首行固定内容标题且加粗显示（类似于表格的首行）的实现方法
- “转行做程序员”很难？这里有4个建议
热门文章