如何制作一个简单的个人博客网页

编程小助手

2024-04-23 23:37

短信预约 -IT技能 免费直播动态提醒

　　其实，我们简单地来说一下，网页是怎样构成的，那么呢，网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。

　　网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一"页"，是超文本标记语言格式(标准通用标记语言的一个应用，文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

　　今天呢，我们就来做一个比较简答的个人博客网页，这个网页制作起来非常简单的，代码也是非常简单的，主要用到了HTML的代码来制作，软件，建议使用sublime，这个是比较方便的。那么，现在就来开始我们的个人网页制作吧。

如何制作一个简单的个人博客网页_web开发_web_个人博客_编程学习网

　　第一步，确定网页的主题，以及布局。那么我们的布局是很简单的，有主题区，导航框，小标题，评论区，日期区等等。

　　首先制作标题，这个标题是非常简单的，可以看一下这个源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人博客</title>
<!--[if lte IE 8]>
<script>
  document.createElement("nav");
  document.createElement("header");
  document.createElement("footer");
  document.createElement("section");
  document.createElement("aside");
  document.createElement("article");
</script>
<![endif]-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="page_header">
    <h1>app开发入门</h1>

第二步，就是制作设计导航栏，导航对网站是至关重要的，并且是访客在难以找到所需信息，他们就不会在网站停留，所以必须要导航栏。

　　源代码：

<nav>
        <ul>
            <li><a href="#">最新文档</a></li>
            <li><a href="#">精选文档</a></li>
            <li><a href="#">技术支持</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
<section id="posts">
    <article class="post">
        <header>
            <h2>移动前端开发之viewport的深入理解 </h2>
            <p>小李子发布于
                <time datetime="2015-10-01T14:39">October 1st, 2015 at 2:39PM</time>
            </p>
        </header>
        <aside>
            <p> &ldquo;本博客文章如无特别注明，均为原创，欢迎转载、传阅，共同交流~&rdquo; </p>
        </aside>
        <p>在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。</p>
        <p>通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。</p>
        <footer>
            <p><a href="comments"><i>14 评论</i></a> ...</p>
        </footer>
    </article>
</section>
<section id="sidebar">

　　并且为其添加CSS样式：

p, li { line-height: 20px; }
#page_header { width: 100%; }
#page_header > nav > ul, #page_footer > nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#page_header > nav > ul > li, #page_footer nav > ul > li {
    margin: 0 20px 0 0;
    padding: 0;
    display: inline;
}

第三步，为其设计尾部，我们将会使用footer元素，用来作为文档或区段定义尾部信息，这就意味着即使在博文中也能使用footer元素了。

　　源代码：

<nav>
        <h3>归档</h3>
        <ul>
            <li><a href="2015/10">October 2015</a></li>
            <li><a href="2015/09">September 2015</a></li>
            <li><a href="2015/08">August 2015</a></li>
            <li><a href="2015/07">July 2015</a></li>
            <li><a href="2015/06">June 2015</a></li>
            <li><a href="2015/05">May 2015</a></li>
            <li><a href="2015/04">April 2015</a></li>
            <li><a href="2015/03">March 2015</a></li>
            <li><a href="2015/02">February 2015</a></li>
            <li><a href="2015/01">January 2015</a></li>
            <li><a href="all">更多</a></li>
        </ul>
    </nav>
</section>
<footer id="page_footer">
    <p>Copyright © 2015 APP开发.</p>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">团队</a></li>
            <li><a href="#">隐私</a></li>
        </ul>
    </nav>
</footer>
</body>
</html>

　　最后添加样式以及浮边栏

#posts {
    float: left;
    width: 74%;
}
#posts aside {
    float: right;
    font-size: 20px;
    line-height: 40px;
    margin-left: 5%;
    width: 35%;
}
#sidebar {
    float: left;
    width: 25%;
}
#page_footer {
    clear: both;
    display: block;
    text-align: center;
    width: 100%;