最近學習了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;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
