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. 关于XSS攻击

    1.XSS XSS(Cross Site Scripting)攻击全称跨站脚本攻击,为了不与CSS(Cascading Style Sheets)混淆,故将跨站脚本攻击缩写为XSS,XSS是一种经常出 ...

  2. 对flutter中，ExpsionPanel的简单改造

    因为项目有大量的下拉面板,而默认的组件(默认的padding.颜色.大小)不是我们UI设计上想要的,但是每个地方都要去改又很麻烦.于是我就想,可以对这个组件进行定制化改造,传入一些颜色.参数.图标大小 ...

  3. MySQL统计信息简介

    作者:王小龙@网易乐得DBA 原文地址: http://mp.weixin.qq.com/s/698g5lm9CWqbU0B_p0nLMw MySQL执行SQL会经过SQL解析和查询优化的过程,解析器 ...

  4. Java内存泄漏的排查总结

    Java内存泄漏的排查总结 https://blog.csdn.net/fishinhouse/article/details/80781673(缺图见下一条)内存泄漏的解决方案(转载)https:/ ...

  5. 【Linux命令】ulimit设置最大文件打开数

    一.简介 在Linux下有时会遇到Socket/File : Can't open so many files的问题.其实Linux是有文件句柄限制的,而且Linux默认一般都是1024(阿里云主机默 ...

  6. 【Linux命令】Linux命令后面所接选项和参数的区别

    Linux命令后面所接选项和参数的区别 在使用Linux命令时,有时候后面会跟一些"选项"(options)或"参数"(agruments) 命令格式为: #中 ...

  7. sitecore系列教程场所分类简介

    在Sitecore体验平台(XP)中,场所是可跟踪的离线交互发生的位置.这些是发生交互的物理位置,例如特定的零售场所或公共汽车站. 您可以使用场所分类记录特定交互发生的位置.此信息保存在体验数据库(x ...

  8. laravel模型中非静态方法也能静态调用的原理

    刚开始用laravel模型时,为了方便一直写静态方法,进行数据库操作. <?php namespace App\Models; use Illuminate\Database\Eloquent\ ...

  9. Spring Security OAuth2 Demo —— 客户端模式（ClientCredentials）

    前情回顾 前几节分享了OAuth2的流程与其它三种授权模式,这几种授权模式复杂程度由大至小:授权码模式 > 隐式授权模式 > 密码模式 > 客户端模式 本文要讲的是最后一种也是最简单 ...

  10. Kubernetes Pod 镜像拉取策略

    Kubernetes Pod 镜像拉取策略 官方文档:https://kubernetes.io/docs/concepts/containers/images/ • IfNotPresent:默认值 ...