一、实战仿照博客网站
div布局
css引用方式
字体模式
盒子模型运用
<!-- 仿制博客主页.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿制博客主页.html</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<h1>奋斗60天的Blog</h1>
<h4>乘风行,无惧。死磕,从容</h4>
</header>
<nav>
<ul>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
</ul>
</nav>
<div id="main">
<div id="left_side">
<article>
<h2><a href="#">午后的街头</a></h2>
<div class="entry_header">
<time>2015/7月/日</time>
by
<a href="#">十八</a>
<a class="catlink" href="#">闲谈随笔</a>
<a class="comment" href="#">8条评论</a>
</div>
<div class="entry_content">
<p>有时突然想说我爱你,<br>
有时突然慌张忧伤。</p>
<p>
像迷路的孩子,<br>
东张西望。
</p>
<p>
伸出双手想抓住,时光像泥鳅一样。
</p>
</div>
</article>
<article>
<h2><a href="#">午后的街头</a></h2>
<div class="entry_header">
<time>2015/7月/日</time>
by
<a href="#">十八</a>
<a class="catlink" href="#">闲谈随笔</a>
<a class="comment" href="#">8条评论</a>
</div>
<div class="entry_content">
<p>有时突然想说我爱你,<br>
有时突然慌张忧伤。</p>
<p>
像迷路的孩子,<br>
东张西望。
</p>
<p>
伸出双手想抓住,时光像泥鳅一样。
</p>
</div>
</article>
<article>
<h2><a href="#">午后的街头</a></h2>
<div class="entry_header">
<time>2015/7月/日</time>
by
<a href="#">十八</a>
<a class="catlink" href="#">闲谈随笔</a>
<a class="comment" href="#">8条评论</a>
</div>
<div class="entry_content">
<p>有时突然想说我爱你,<br>
有时突然慌张忧伤。</p>
<p>
像迷路的孩子,<br>
东张西望。
</p>
<p>
伸出双手想抓住,时光像泥鳅一样。
</p>
</div>
</article>
<div class="fileShow">美文目录0</div>
<div class="fileShow">美文目录1</div>
<div class="fileShow">美文目录2</div>
<div class="fileShow">美文目录3</div>
<div class="fileShow">美文目录4</div>
<div id="pagebar">
Pages:
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
</div>
</div>
<div id="right_side">
<aside>
<form action="">
<input type="text" name="search" placeholder="Search...">
</form>
</aside>
<aside>
<h4>测试标题</h4>
<ul>
<li><a href="">文章标题</a> (1)</li>
<li><a href="">文章标题</a> (3)</li>
<li><a href="">文章标题</a> (5)</li>
<li><a href="">文章标题</a> (3)</li>
</ul>
</aside>
<aside>
<h4>测试标题</h4>
<ul>
<li><a href="">文章标题</a> (1)</li>
<li><a href="">文章标题</a> (3)</li>
<li><a href="">文章标题</a> (5)</li>
<li><a href="">文章标题</a> (3)</li>
</ul>
</aside>
<aside>
<h4>测试标题</h4>
<ul>
<li><a href="">文章标题</a> (1)</li>
<li><a href="">文章标题</a> (3)</li>
<li><a href="">文章标题</a> (5)</li>
<li><a href="">文章标题</a> (3)</li>
</ul>
</aside>
<div class="fileListShow">分类目录0</div>
<div class="fileListShow">分类目录1</div>
</div>
<!-- <div class="clear"></div> -->
</div>
<footer>
Copyright © 2015 · GeneratePress · WordPress
</footer>
</body>
</html>
简单效果图:
二、还有许多要练习的
重在练习
重在练习
重在练习
总结:
简单的单页面分分钟搞定的事。
搞一个页面用了半天时间。
保持心态,明确学习方向,学习方向,学习方向。
精力,睡觉时间,睡觉时间,睡觉时间。