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. Python Beautiful Soup 4

    Beautiful Soup 是一个灵活方便的网页解析库,利用它不用编写正则表达式即可方便地提取的网页信息 官方文档:https://www.crummy.com/software/Beautiful ...

  2. oracle存储过程中循环游标,变量的引用

    创建出错时使用: show errors查看具体的错误提示 一. 存储过程中的一个循环及变量引用示例: create or replace procedure my_proiscursor cur i ...

  3. day_0

    Day01 - 初识Python - Python简介 - Python的历史 / Python的优缺点 / Python的应用领域 - 搭建编程环境 - Windows环境 / Linux环境 / ...

  4. mysql小知识点汇总---(时间与时间戳的转换, 修改mysql用户名密码, navicate 导入sql文件报错 1153)

    1. 时间与时间戳的转换 1.1 时间戳转时间 FROM_UNIXTIME(add_time, '%Y-%m-%d') 1.2 时间转时间戳 UNIX_TIMESTAMP('2015-04-29') ...

  5. FineUIPro v6.0.1 小版本更新！

    这次修正了 v6.0.0版本的几个问题,建议所有用户升级到此版本: +修正调用F.addMainTab时可能出现JS错误的问题(34484135,1450561644).    -仅在未调用F.ini ...

  6. 一、SqlServer查询今天的数据-多写法对比性能问题

    -- 目标:查询当天的所有数据 -- 说明:表数据行数:960w --方法一:使用格式化被查询条件与格式化当前时间比对 ),)),) --方法二:使用函数DATEDIFF 比对 --方法三:使用传统比 ...

  7. [SpingBoot guides系列翻译]Redis的消息订阅发布

    Redis的消息 部分参考链接 原文 CountDownLatch 概述 目的 这节讲的是用Redis来实现消息的发布和订阅,这里会使用Spring Data Redis来完成. 这里会用到两个东西, ...

  8. JBoss4.2.2配置及优化

    本文是在[url=http://solarisxb.cublog.cn]SOLARIS小兵[/url]的[url=http://blog.chinaunix.net/u/504/showart_114 ...

  9. 与某军工背景软件企业分享Azure DevOps Server的经验

    DevOps 是英文单词Development和Operations的组合词,是一种用于促进软件开发.运维实施和质量保障部门之间协同工作的过程和方法. 结合软件开发管理规范,应用自动化的构建.测试和发 ...

  10. Luogu P3577 [POI2014]TUR-Tourism

    Luogu P3577 [POI2014]TUR-Tourism 题目链接 题目大意:给出一张\(n\)个点,\(m\)条边的无向图,保证任意两点之间没有点数超过\(10\)的简单路径.选择第\(i\ ...