这个系列的文章是我在搭建博客园博客时所经历的过程。

在上一期如何调教你的博客Episode1——修改整体样式中,我们通过添加CSS样式,修改了页面的总体布局。但将文章发出之后,博客的布局就出现问题了:

由于总体布局的修改,导致了博客园的默认样式无法工作。另外在移动端中会出现横向滚动条。让我们继续魔改这个博客吧!

1.增加主窗口自适应

在上一期文章中,我们把id为main的主div宽度修改为页面的95%。但在页面缩小的时候却会出现横向滚动条。一查样式表,发现是main的min-width选项导致的:

解决办法就是把min-width的宽度改为0px,这样就可以无限缩小,不产生横向滚动条了。为了避免两条规则冲突,就在这条规则后面加上了!important,将这条规则设置为最高优先级。好了,问题迎刃而解!

#main{
    min-width: 0px !important;
}

2.调整标题栏样式

将博客发布后,发现了一个重要问题:看官老爷们不知道我是谁。。。页面的顶端缺少标题,一个"Hi,there!"看起来很尴尬:

于是我稍微改进了一下,加入了导航条,效果是这样的:

3.调整日期在移动端重叠的问题

文章目录页是布局最乱的地方,需要好好"调教"一下!

首先是日期在移动端的重叠问题:

将top:40px元素禁用掉会发现,原来标题和日期是两个分离的元素:

.dayTitle{
    float:none !important;
    top:0px !important;
    text-align:center;
}

这段代码把top改成了0px,文字进行居中,但效果不尽人意:

还是直接隐藏日期吧:

.dayTitle{
    display:none;
}

4.为缩略图设置统一大小

文章缩略图会根据自己的大小按比例显示,这就导致了图片大小参差不齐:

一开始的想法是把图片的宽度都设置成100%,高度让它自动缩放。但这样高度不会缩放,而是会变形,这时可以定义一个max-height:10000px,他就开始自动缩放了。高度不缩放可能是CSS标准没写明的地方,但定义max-height可能就会触发浏览器重载图片,达到目的。代码如下:

.c_b_p_desc img{
    width:100%;
    max-height:10000px;
}

5.测试结果

分别在Windows7下的Chrome 75.0.3770.142和Android P默认浏览器下进行的测试,结果如图:

总体来说实现了移动端和PC端的兼容,优化了手机用户的体验。

如何调教你的博客Episode2——移动端支持和UI美化的更多相关文章

  1. django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务

    上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...

  2. 代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)

    博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...

  3. 如何调教你的博客Episode1——修改整体样式

    如图所示,这是你刚刚注册的博客园博客,让我们开始一步步修改它. 1.写入自适应代码 html,body{ height:100%; border:; margin:; padding:; } body ...

  4. cnbolgs博客中添加Latex支持

    参考:http://www.cnblogs.com/ilogic/archive/2012/08/05/latex.html 主要是利用在线生成公式的工具:MathJax,但要在博客上获得 MathJ ...

  5. 【技术博客】移动端的点击事件与Sticky Hover问题

    目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...

  6. 【完全开源】Django多人博客系统——支持MarkDown和tinyMce

    目录 说明 功能 如何使用 说明 这是一个用Django开发的多人博客系统,功能简单,但完全满足公司内部或个人的博客使用需求.支持普通富文本编辑器(tinyMCE)和MarkDown编辑器 由于嫌弃D ...

  7. 使用Word2013发布博客

    步骤一.新建博客文章 打开Word软件,新建->博客文章(第一次在模板下面可能找不到,可以在搜索栏中搜索"博客",下次在首页就能直接找到). 步骤二.编辑博客文章 1.输入文 ...

  8. MWeb 1.3.7 发布!增加发布到 Wordpress 等支持 MetaWeblog API 的服务,如:Wordpress 博客、新浪博客、cnblogs、oschina。

    MWeb 1.3.7 版的新功能 增加发布到 Wordpress 等支持 Metaweblog API 的服务,目前经测试过的有: Wordpress 博客.新浪博客.cnblogs.oschina. ...

  9. 使用hexo+github搭建免费个人博客详细教程

    [TOC] 本文目录(注意无法点击): 前言 体验更加排版请访问原文链接:http://blog.liuxianan.com/build-blog-website-by-hexo-github.htm ...

随机推荐

  1. 剑指offer第二版-3.数组中重复的数

    面试题3:数组中重复的数 题目要求: 在一个长度为n的数组中,所有数字的取值范围都在[0,n-1],但不知道有几个数字重复或重复几次,找出其中任意一个重复的数字. 解法比较: /** * Copyri ...

  2. Spark on YARN资源申请

    1.spark submit参数 $ ./bin/spark-submit --class path.to.your.Class --master yarn --deploy-mode cluster ...

  3. python爬虫笔记之用cookie访问需要登录的网站

     目标:用cookie访问一个需要登录的网站 如图,直接访问会跳转到登录页面,提示登录. 运行结果: 直接在浏览器上输入该url,网站立马跳转到登录页面.  方法: 1.先手动登录,通过抓包获取coo ...

  4. Spring:定时任务定时器 Quartz的使用

    Quartz的使用方式 配置文件方式 一.引入依赖 <!-- spring 其他依赖省略 --> <!-- https://mvnrepository.com/artifact/or ...

  5. 基于 HTML5 WebGL 的民航客机飞行监控系统

    前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...

  6. git commit规范化实践

    最近从svn转到git进行代码版本控制,今天了解了git commit规范化的一些知识后,写此文章记录下配置过程. 环境 编辑器使用的是vscode,项目框架是vue3.0 规范化工具 规范化git ...

  7. python的发展史

    python的发展史 1989年,被称为龟叔的Guido在为ABC语言写插件时,产生了写一个简洁又实用的编程语言的想法,并开始着手编写.因为其喜欢Monty Python喜剧团,所以将其命名为pyth ...

  8. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  9. 高级查询MYsql(二) 练习

    一.单词部分 ①exist存在②temp临时的③district区域 ④content内容⑤temporary暂时的 二.预习部分 1.表连接都可以用子查询替换吗 是的 2.检测某列是否存在某个范围可 ...

  10. 【Android】Mac Android adb 配置

    打开终端,输入下面命令: touch .bash_profile open -e .bash_profile 即新建 “.bash_profile” 文件,并会弹出 “.bash_profile” 文 ...