Html+css Static Blog __html

Recently learned the HTML and CSS some of the simple syntax, today wrote a brief project, in fact, is not a project, just a static blog, the effect of the figure is as follows:

This page uses the so-called Html+css+div to complete, looks more than before hao123 lot better, but in fact also write is not very troublesome. The teacher in the video said he recorded the video for only one hours, and I wrote this page for almost a day. This is the simplest Web page, a lot of effects have not been used, but in the writing of this page can also understand some of the design of the Web page ideas.
You can download the source page source code from GitHub
The source code for this page is attached below:

<! DOCTYPE html>  
 CSS style file: 
 

body{Background-image:url ("2.jpg");}
    * *-------------Head-------------* * * #header {width:960px;
    Color:white;
    border-bottom:dashed 1px White;
    margin:0 Auto;
margin-bottom:10px;

}. logo_title{Float:left;}
    . logo_title h3{font-size:30px;
    margin-top:14px;
font-family: "Adobe Garamond Pro Bold" "Song Body";

}. Logo_title p{font-size:20px;}
    /*---------------------------------/* navi{float:right;
margin-top:66px;
    }. Navi a{color:white;
Text-decoration:none;
    }. Navi ul {list-style:none; Navi ul li{Display:inline;
    margin-right:8px;
    border:1px solid white;
    PADDING:4PX 8px;
    border-radius:6px;
Background-color:rgba (255,255,255,0.15);

}. clear{Clear:both;}
    * *----------------main-----------------/#wrapper {width:960px;
    margin:0 Auto;
margin-bottom:15px;
    }. main{width:610px;
    Background-color:white;
    border-radius:8px;
    Float:left;
padding:20px; }. item_img{Float:leFt
    margin:10px;
margin-top:4px;
    }. item_img img{width:80px;
height:80px;

}. item_content{margin-left:100px;}
    . item_content h3{font-size:22px;
    Color: #a5612d;
margin:0;
    }. item_info{font-size:12px;
    Font-style:italic;
    margin:0;
Color: #999;
    }. item_desc{font-size:14px;
    margin:0;
    Color:gray;
    margin-top:10px;
    padding-left:5px;
Border-left:solid 1px #999;
    }. item{border-bottom:dashed 1px #999;
padding:20px;
    }. sidebar{width:300px;
    Background-color:white;
    border-radius:8px;
    Float:right;
padding-top:10px;
    }. author_img img{width:120px;
    height:120px;
border-radius:10px;
    }. author_img{width:120px;
    height:120px;

margin:0 Auto;
    }. author_info{margin:10px 10px;
    padding:0;
    Border:solid #ddd 1px;
    border-radius:8px;

Background-color: #eee;
    }. author_info h4{margin:0;
    padding:0;
    Text-align:center;
Font-weight:bold; }. ArtIcle h3{font-style:italic;
    margin-left:10px;
    border-bottom:dashed 1px #aaa;
padding-bottom:4px;
    }. Article ul {list-style:none;
    padding:0;
margin-left:40px;
    }. site_info{border-top:d ashed 1px #aaa; site_info p {text-align:center;
    font-size:12px;
Color:gray;
    }/*---------------tail-----------------/#footer {width:960px;
    height:100px;
    margin:0 Auto;
    Background-color:bluee;
Border-top:dashed white 1px;
    #footer. left{Color:white;
    Float:left;
margin-top:10px;
    #footer. right{Color:white;
    Float:right;

font-size:14px;
    #footer. Right ul {margin-top:10px;
List-style:none;
    #footer. Right ul li {display:inline-block;
margin-right:5px; }