学习PHP第三天HELLO BLOG

PHP学习0~60 专栏收录该内容
4 篇文章 0 订阅

一、实战仿照博客网站

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 &copy; 2015 · GeneratePress · WordPress
	</footer>

</body>
</html>

简单效果图:



二、还有许多要练习的

重在练习

重在练习

重在练习


总结:

简单的单页面分分钟搞定的事。

搞一个页面用了半天时间。


保持心态,明确学习方向,学习方向,学习方向。

精力,睡觉时间,睡觉时间,睡觉时间。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值