<!DOCTYPE
HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/
html4/loose.dtd">
<
html>
<head>
<title>Blog Design</title>
<meta http-equiv="Content-Type" content="text/
html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<span class="logo">blog about web design</span> <div href="sc.chinaz.com">best free templates</a></h1></div>
<ul id="menu">
<li><a href="index.
html"><img src="images/but1.gif" alt="" width="64" height="42" /></a></li>
<li><a href="index2.
html"><img src="images/but2.gif" alt="" width="108" height="42" /></a></li>
<li><a href="index2.
html"><img src="images/but3.gif" alt="" width="93" height="42" /></a></li>
<li><a href="index2.
html"><img src="images/but4.gif" alt="" width="101" height="42" /></a></li>
<li><a href="index2.
html"><img src="images/but5.gif" alt="" width="86" height="42" /></a></li>
<li><a href="index2.
html"><img src="images/but6.gif" alt="" width="102" height="42" /></a></li>
</ul>
<img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" />
<map name="Map">
<area shape="circle" coords="60,60,63" href="sc.chinaz.com">
</map>
</div>
<div id="content">
<div id="posts">
<div class="post">
<h2>Retro Photos</h2>
<div><span class="date">Mar 18th</span><span class="categories">in: Photos, Retro</span></div>
<div class="description">
<p><img src="images/pic1.jpg" alt="" width="239" height="232" />
Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis. Maecenas hendrerit, massa ac laoreet iaculipede mnisl ullamcorpermassa, cosectetuer feipsum eget pede. Proin nunc. Donec nonummy, tellus er sodales enim, in tincidunmauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede niorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis. </p>
</div>
<p class="comments">Comments - <a href="sc.chinaz.com">17</a> <span>|</span> <a href="index2.
html">Continue Reading</a></p>
</div>
<div class="post">
<h2>Original Wordpress Themes</h2>
<div><span class="date">Mar 12th</span><span class="categories">in: Design, Themes</span></div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis. Maecenas hendrerit, massa ac laoreet iaculipede mnisl ullamcorpermassa, cosectetuer feipsum eget pede. Proin nunc. Donec nonummy, tellus er sodales enim, in tincidunmauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede niorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis. </p>
</div>
<p class="comments">Comments - <a href="sc.chinaz.com">17</a> <span>|</span> <a href="index2.
html">Continue Reading</a></p>
</div>
</div>
<div id="sidebar">
<div id="search">
<input type="text" value="Search"> <a href="sc.chinaz.com"><img src="images/go.gif" alt="" width="26" height="26" /></a>
</div>
<div class="list">
<img src="images/title1.gif" alt="" width="186" height="36" />
<ul>
<li><a href="sc.chinaz.com">animation</a></li>
<li><a href="sc.chinaz.com">magazines</a></li>
<li><a href="sc.chinaz.com">architecture</a></li>
<li><a href="sc.chinaz.com">news</a></li>
<li><a href="sc.chinaz.com">art</a></li>
<li><a href="sc.chinaz.com">photography</a></li>
<li><a href="sc.chinaz.com">blogs</a></li>
<li><a href="sc.chinaz.com">product design</a></li>
<li><a href="sc.chinaz.com">books</a></li>
<li><a href="sc.chinaz.com">stuff</a></li>
<li><a href="sc.chinaz.com">graphic design</a></li>
<li><a href="sc.chinaz.com">web design</a></li>
<li><a href="sc.chinaz.com">illustration</a></li>
</ul>
<img src="images/title2.gif" alt="" width="180" height="34" />
<ul>
<li><a href="sc.chinaz.com">January</a></li>
<li><a href="sc.chinaz.com">July</a></li>
<li><a href="sc.chinaz.com">February</a></li>
<li><a href="sc.chinaz.com">August</a></li>
<li><a href="sc.chinaz.com">March</a></li>
<li><a href="sc.chinaz.com">September</a></li>
<li><a href="sc.chinaz.com">April</a></li>
<li><a href="sc.chinaz.com">October</a></li>
<li><a href="sc.chinaz.com">May</a></li>
<li><a href="sc.chinaz.com">November</a></li>
<li><a href="sc.chinaz.com">June</a></li>
<li><a href="sc.chinaz.com">December</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copyright ©. All rights reserved. Design from <a href="sc.chinaz.com" target="_blank" title="Free Templates">站长素材</a></p>
</div>
<div
</
html>
本文详细介绍了如何设计一个静态博客首页，包括前期准备工作、布局流程、CSS属性书写顺序以及页面各部分的实现，如导航栏、搜索框、头像等。通过实例展示了HTML和CSS在构建页面时的技巧和注意事项。
最低0.47元/天 解锁文章
扫一扫
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
