michael-blog.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>michael's blog</title>

    <link rel="stylesheet" href="michael.css">

</head>

<body>

<div class="left">

    <div class="avatar">

        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570940021470&di=7f0864107eaf55f197659fd940f5a04e&imgtype=0&src=http%3A%2F%2Fwww.qqju.com%2Fpic%2Ftx%2Ftx22877.jpg" alt="">

    </div>

    <div class="name">Michael_L's Blog</div>

    <div class="title">Welcome to my blog, this's the best present for you</div>

    <div class="tag">

        <ul>

            <li><a href="">关于我</a></li>

            <li><a href="">微博</a></li>

            <li><a href="">微信公众号</a></li>

        </ul>

    </div>

    <div class="tag">

        <ul>

            <li><a href="">#Python</a></li>

            <li><a href="">#PHP</a></li>

            <li><a href="">#go</a></li>

        </ul>

    </div>

</div>

<div class="right">

    <div class="article">

        <div class="head">

            <span class="title">这是michael的第一篇博客</span>

            <span class="data">2019-10-12</span>

        </div>

        <div class="body">Hello World!</div>

        <div class="article-tag">

            <span>#Python</span>

            <span>#java</span>

        </div>

    </div>

</div>

</body>

</html>

michael.css

*{

    margin: 0;

    padding: 0;

}

a{

    text-decoration: none;

}

li{

    list-style: none;

}

.left{

    width: 20%;

    height: 100%;

    position: fixed;

    top: 0;

    background-color: #4E4E4E;

}

.left .avatar{

    width: 130px;

    height: 130px;

    overflow: hidden;

    border-radius: 50%;

    border: white 5px solid;

    margin: 20px auto;

}

.left img{

    max-width: 130px;

}

.name{

    color: #A3A3A3;

    text-align: center;

}

.left .title{

    color: #A3A3A3;

    text-align: center;

    margin: 30px;

}

.tag{

    margin: 70px;

}

.left .tag ul li{

    text-align: center;

}

.tag ul li a{

    color: #A3A3A3;

}

.tag ul li a:hover{

    color: white;

}

.right{

    width: 80%;

    background-color: #EEEEEE;

    float: right;

}

.right .article{

    width: 700px;

    /*text-align: left;*/

    background-color: white;

    margin: 20px 0 20px 15px;

    box-shadow: 3px 3px 3px black;

}

.article .head{

    border-left: red 6px solid;

}

.article .head .title{

    font-size: 36px;

    padding-left: 10px;

    }

.article .head .data{

    margin-left: 480px;

}

.article .body{

    margin-top: 20px;

    border-bottom: black solid 1px;

    padding: 20px;

}

.article .body p{

    text-indent: 30px;

}

.article .article-tag{

    margin-top: 10px;

    padding-bottom: 20px;

    }

.article .article-tag span{

    padding-left: 30px;

}

前端小练习-Michael的博客界面(粗糙版)的更多相关文章

  1. 不懂CSS也能定制博客界面!

    之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面 我是基于模板BlueSky做了些改动,先看修改前后的效 ...

  2. python random模块 - 小驹的专栏 - 博客频道 - CSDN.NET

    python random模块 - 小驹的专栏 - 博客频道 - CSDN.NET python random模块 分类: python 2011-11-15 15:31 6037人阅读 评论(2) ...

  3. 微信小程序--简约风博客小程序（基于云开发 - 全开源）

    微信小程序--简约风博客小程序(基于云开发 - 全开源) 项目启动纯属突发奇想,想看看博客小程序,例如wehalo博客小程序,但是感觉自建平台还要浪费自己的服务器算力,还没有访问量,省省吧. 本着白嫖 ...

  4. iOS 实用博客整理(连载版)

    iOS 实用博客整理(连载版) 本博客为本人觉得不错的博客的暂存地,并不是本人所写. 1.iOS开发 如何适配iOS10? 2.UIWebView和WKWebView的比较和选择 3. 如何快速的开发 ...

  5. 前端小技巧：css sprite----V客学院技术分享

    前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...

  6. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  7. shell小脚本--从laod博客更新hosts文件

    #!/bin/bash #-------------------------------------------- # name: change-hosts.sh #----------------- ...

  8. hexo+github搭建博客(超级详细版，精细入微)

    # 前言 你了解[Hexo]( https://hexo.io/zh-cn/ "Hexo官网")吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染 ...

  9. 博客整理——Alpha版冲刺

    Alpha冲刺 助教链接:2016福州大学软件工程第五.六次团队作业-Alpha阶段成绩汇总 1.Transcend Daily Scrum Meeting --FirstDay Daily Scru ...

随机推荐

  1. springboot集成freemarker属性配置（不知道是针对于某个版本，2.0后有变动）

    freemarker属性配置 freemarker属性配置: spring.freemarker.allow-request-override=false # 设置是否允许HttpServletReq ...

  2. 在windows上搭建git服务器教程

    1.首先,需要确保windows系统上安装并配置了Java运行环境,JDK>=1.7. 2.下载Gitblit,下载地址:http://www.gitblit.com/ 3.解压缩下载的压缩包即 ...

  3. OpenCV Error: Unknown error code -10 (Raw image encoder error: Empty JPEG image (DNL not supported)) in throwOnEror 错误

    出现上面这样的错误可以肯定是传了空指针导致的, 刚开始出现这样的问题, 并且是概率性的, 网上找了一遍都没找到解决方案, 然后自己一行一行代码注释, 发现还是会出现这样的问题, 当时就懵逼了, 我从打 ...

  4. 大话设计模式Python实现- 抽象工厂模式

    抽象工厂模式(Abstract Factory Pattern):提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们的类 下面是一个抽象工厂的demo: #!/usr/bin/env pyth ...

  5. pycharm的安装与破解

    一.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载PyCharm安装包,根据自己 ...

  6. 这个meta标签会让华为mate10 pro自带浏览器无法粘贴手机收到的验证码信息

     前言 最近在项目中遇到一个问题,注册登录界面点击获取验证码,手机收到短信验证码后可以复制成功,但无法粘贴 让人郁闷的是在其它上手机上的(比如小米,苹果)默认浏览器和其它手机浏览器(比如QQ,夸克,搜 ...

  7. NET 已知excel表格前面26个是a到z，27是aa28是ab，以此类推，N是多少

    问题: 已知excel表格前面26个是a到z,27是aa28是ab,以此类推,N是多少 代码: /// <summary> /// 已知excel表格前面26个是a到z,27是aa28是a ...

  8. 使用Python+Selenium模拟登录QQ空间

    使用Python+Selenium模拟登录QQ空间爬QQ空间之类的页面时大多需要进行登录,研究QQ登录规则的话,得分析大量Javascript的加密解密,这绝对能掉好几斤头发.而现在有了seleniu ...

  9. C 输入和输出、char类型

    参考链接:https://www.runoob.com/cprogramming/c-input-output.html 标准输入输出头文件stdio.h #include是一个预处理指令,用于引入s ...

  10. MQ选型对比ActiveMQ,RabbitMQ,RocketMQ,Kafka 消息队列框架选哪个？

    最近研究消息队列,发现好几个框架,搜罗一下进行对比,说一下选型说明: 1)中小型软件公司,建议选RabbitMQ.一方面,erlang语言天生具备高并发的特性,而且他的管理界面用起来十分方便.不考虑r ...