开发者社区> 范大脚脚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【写漂亮的博客】让我们的博客更加漂亮,让我们的博客支持响应式布局!

简介:
+关注继续查看
前言

很多朋友问我的博客是什么软件写的,嘻嘻,其潜台词是我的博客页面还挺好看的呢!!!心里美滋滋的,这里就把方法共享出来吧

定制样式而已

我的博客主要是对H1的样式做了一点改变,给H1加上了背景色,并且对其文字做了一点改变,我们来看看我的博客的页面;



其中的centercontent就是博客的主体,我们博客园其实是设置了地方可以定制样式的:





在这个地方设置就可以了,我这里是这样写的:

复制代码
<style type="text/css">
    #cnblogs_post_body
    {
        color: black;
        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
        font-size: 16px;
    }
    #cnblogs_post_body h1
    {
        background: #2B6695;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 17px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 15px 0 !important;
        padding: 5px 0 5px 20px;
        text-shadow: 2px 2px 3px #222222;
    }
</style>
复制代码
这个样子,我们的博客便会比较有层次感了。但是若是这样就结束了,我就弱爆了!

让我们的博客页支持响应式布局!

在以上的CSS中我们若是加上以下CSS代码:

复制代码
@media screen and (min-width: 1px) and (max-width: 800px)
    {
        #mytopmenu
        {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }
        #centercontent
        {
            padding-left: 0;
            padding-right: 0;
            width: 100%;
        }
        #leftcontent
        {
            width: 100%;
            position: static;
            width: 100%;
        }
        #footer
        {
            margin: 0;
            width: 100%;
        }
        #comment_form
        {
            display: none;
        }
        #header
        {
            display: none;
        }
        #green_channel
        {
            display: none;
        }
        #centercontent img { width: 98% !important; }
    }
复制代码
然后在这里加上以下代码:


复制代码
<script type="text/javascript">
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initialwidth=device-width,initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(meta);

</script>
复制代码
于是,在手机上在网页上,我们的博客就简单的响应式布局啦!!!
PS:这里应该对图片宽度有所限制才行!


结语

来吧,让我们一起来打造我们美丽的博客吧! 






本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/archive/2013/05/27/3101311.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
半小时教你使用hexo建立一个漂亮的个人博客
半小时教你使用hexo建立一个漂亮的个人博客
21 0
搭建自己的技术博客系列(二)把 Hexo 博客部署到 GitHub 上
1、在GitHub上建一个新仓库 ​ 2、配置Git的SSH KEY 生成SSH添加到GitHub回到你的git bash中, git config --global user.name "yourname"git config --global user.email "youremail" 这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。
5447 0
博客搬家通知
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
734 0
响应式布局
弹性布局 浮动+百分比布局 Flex布局 悬浮+百分比布局 百分比布局 浮动+百分比布局好处 网页内容宽度自适应 多设备都适用 Flex布局 1.
964 0
博客搬家
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
776 0
博客搬家
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
1177 0
博客搬家
我的博客即将同步至“云栖社区”,诚邀技术同仁一起入驻。
772 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载