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. php 学习笔记之日期时间操作一箩筐

    格式化日期时间 date : 格式化日期时间 场景 将当前日期时间或者特定日期时间格式化输出为特定格式的字符串,常用于人性化展示信息. 说明 返回给定时间戳格式化后所产生的日期时间字符串,如果没有给出 ...

  2. Vue v-if,v-else-if,v-else的使用

    v-else-if 要紧跟 v-if v-else要紧跟v-else-if 或 v-if 代码: <!doctype html> <html lang="en"& ...

  3. Luogu P4068 [SDOI2016]数字配对

    反正现在做题那么少就争取做一题写一题博客吧 看到题目发现数字种类不多,而且结合价值的要求可以容易地想到使用费用流 但是我们如果朴素地建图就会遇到一个问题,若\(i,j\)符合要求,那么给\(i,j\) ...

  4. vue使用--Jquery引入

      为什么要引入jquery? vue中一般不需要使用jquery,但当我们需要使用的某个插件没有vue的版本且又使用了jquery,那我们就需要引入jquery了 安装.配置与使用   ①insta ...

  5. Linux socket program Demo1(client & server)

    client  and  server Demo of socket. client send data to server. server send data to client. // this ...

  6. [DP]Luogu 2014NOIP提高组 飞扬的小鸟题解

    2014NOIP提高组飞扬的小鸟题解 题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一 ...

  7. 转 OpenCV Mat 数据读写

    转:https://blog.csdn.net/u011520181/article/details/83831866 1.创建 Mat 对象: // 创建一个 320x240 的 8 位无符号型 4 ...

  8. sql 动态行转列 （2005及以上版本）

    表数据: sql: --pivot方案 sql 2005及以上版本 ) Set @sql=(Select DISTINCT ','+ N'[' +pref_name+N']' FROM dbo.Pop ...

  9. Freemarker简单封装

    Freemarker是曾经很流行的一个模板库,它是一种通用的模板库,不仅仅可以用来渲染html. 模板可以分为两类: 只能生成特殊类型文件的模板,如jinja.django.Thymeleaf.jad ...

  10. Web点击链接调起手机系统自带短信发短信

    实现代码如下: 一.Html代码 <a href="javascript:;" class="xq-sms">发送短信</a> 二.jQ ...