HTML and csss implement simple blog code sharing

This article mainly to share with you HTML and CSSS implementation of simple blog Code, hope to help you with HTML and CSS to complete a simple blog.

Over-animation

-webkit-transition:color 200ms;  -o-transition:color 200ms;  Transition:color 200ms;

Shadow

-webkit-box-shadow:0 0 3px 2px rgba (0,0,0,.2);
box-shadow:0 0 3px 2px rgba (0,0,0,.2);

CSS Code

. side-bar{  Float:left;  width:20%;}. main{  float:right;  width:80%;  Color: #555;} a{  Text-decoration:none;} A, body{  color: #eee;} body{  background: #454545;  line-height:1.5;}. header. logo{  padding:10px 20px;  font-size:30px;  Display:inline-block;  border:5px solid #eee;  margin-bottom:10px;  Line-height:1;}. Side-bar > *{  padding:10px 15px;}. Side-bar. Nav a,.side-bar. tag-list a{  display:block;  padding:5px;  Color: #777;}. Side-bar. Nav a:hover,.side-bar. Tag-list a:hover{  Transition:  color: #eee;}. Side-bar. Nav a,.side-bar. tag-list a{  font-weight:700;}. article-list{  margin-right:30%;  Background: #fff;  padding:20px 30px;}. Article-list. Item. title{  font-size:  22px;  font-weight:700;  Color: #454545;}. Article-list. Item. status{  font-size:17px;  Color: #ccc;}. Article-list. item>*{  margin:  10px 0px;}. Article-list. item{  margin-bottom:20px;}

HTML code

<! DOCTYPE html>