版權聲明:本文為部落客原創文章,轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54837849
最近學習了HTML和CSS的一些簡答的文法,今天寫了一個簡單的項目,其實也算不上什麼項目,隻是一個靜态部落格,效果圖如下:
這個頁面使用了所謂的HTML+CSS+div來完成,看起來比之前寫的hao123要好看的多,但是其實也寫起來也不是很麻煩。視訊中的老師說他錄這節視訊隻用了一個多小時的時間,而我寫這個網頁卻寫了将近一天的時間。這這是最簡單的網頁,很多效果都還沒有用到,隻是在編寫這個網頁的同時可以了解一些設計網頁的思路。
可以從github下載下傳該網頁的源碼
網頁源碼 下面附上這個網頁的源碼:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="部落格實戰">
<meta name="description" content="htmlcss實戰">
<meta name="autor" content="twilight">
<title>css實戰1</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<!--頭部-->
<div id="header">
<div class="logo_title">
<h3>LinuxCast.net Demo Site</h3>
<p>LinuxCast.net示範頁面,Linux學習不再晦澀難懂</p>
</div>
<div class="navi">
<ul>
<li><a href="">首頁</a></li>
<li><a href="">閑言碎語</a></li>
<li><a href="">我是誰</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--中部-->
<div id="wrapper">
<div class="main">
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标題示例标題</h3>
<p class="item_info">作者:twilight 日期:2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标題示例标題</h3>
<p class="item_info">作者:twilight 日期:2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标題示例标題</h3>
<p class="item_info">作者:twilight 日期:2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标題示例标題</h3>
<p class="item_info">作者:twilight 日期:2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标題示例标題</h3>
<p class="item_info">作者:twilight 日期:2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标題示例标題</h3>
<p class="item_info">作者:twilight 日期:2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
</div>
<div class="sidebar">
<div class="author">
<div class="author_img">
<img src="3.jpg"/>
</div>
<div class="author_info">
<h4>twilight</p>
<p>cease to struggle and you cease to live</p>
</div>
</div>
<div class="article">
<h3>推薦文章</h3>
<ul>
<li>推薦文章1</li>
<li>推薦文章2</li>
<li>推薦文章3</li>
<li>推薦文章4</li>
<li>推薦文章5</li>
<li>推薦文章6</li>
</ul>
</div>
<div class="site_info">
<p>訪客100</p>
<p>文章數100</p>
</div>
</div>
<div class="clear"></div>
</div>
<!--尾部-->
<div id="footer">
<div class="left">Copyright © 1999-2016, balalalalal, All Rights Reserved</div>
<div class="right">
<ul>
<li>關于我們</li>
<li>聯系我們</li>
<li>使用條款</li>
<li>意見回報</li>
</ul>
</div>
</div>
</body>
</html>
CSS樣式檔案:
body{
background-image:url("2.jpg");
}
/*-------------頭部-------------*/
#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" "宋體";
}
.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;
}
/*----------------主體-----------------*/
#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 :dashed 1px #aaa;
}
.site_info p {
text-align:center;
font-size:12px;
color:gray;
}
/*---------------尾部-----------------*/
#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;
}