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. Django views 中的装饰器

    关于装饰器 示例: 有返回值的装饰器:判断用户是否登录,如果登录继续执行函数,否则跳回登录界面 def auth(func): def inner(request, *args, **kwargs): ...

  2. NOIP模拟赛1(one)

    题目描述 Description 很久以前,有一个序列,序列里填了一些非负整数. \(zzq\) 每次可以选择序列的一个前缀,把这个前缀里的数都-1,如果这个前缀 中有 0 操作就无法进行. \(zz ...

  3. <String> 179 ，6， 168

    179. Largest Number 冒泡排序,每一轮都把最小的数字选出放在最后. class Solution { public String largestNumber(int[] nums) ...

  4. ActiveMQ基础使用

    概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...

  5. LeetCode 94：二叉树的中序遍历 Binary Tree Inorder Traversal

    题目: 给定一个二叉树,返回它的中序 遍历. Given a binary tree, return the inorder traversal of its nodes' values. 示例: 输 ...

  6. Redis缓存穿透，缓存击穿，缓存雪崩，热点Key

    导读 使用Redis难免会遇到Redis缓存穿透,缓存击穿,缓存雪崩,热点Key的问题.有些同学可能只是会用Redis来存取,基本都是用项目里封装的工具类来操作.但是作为开发,我们使用Redis时可能 ...

  7. SqlHelper发布——比你期望的还要多的多（例如比MyBatis-Pagehelper性能更高）

    SqlHelper发布——比Mybatis-PageHelper性能更高 起源 前段时间开启了一个新的项目,在选择分页插件时,发现github上很流行的一个是pagehelper,在百度上搜索了一下, ...

  8. 在Linux系统中运行并简单的测试RabbitMq容器

    以前使用的是Windows下面的RabbitMq,需要先安装 Erlang的语言环境等,这次直接在Linux中的Docker容器来测试一下 1:docker配置RabbitMq的指令 docker r ...

  9. C 数组、枚举类型enum

    传递数组给函数 告诉编译器函数要接受一个指针 skip //函数声明,数组的长度无需声明,因为编译器不会对形式参数进行边界检查 void myFunction(int param[]) //或者 vo ...

  10. SSM登陆

    简单的SSM登陆 jsp <form action="${pageContext.request.contextPath }/user/login.action"> & ...