简洁风个人主页（1） html 静态布局

来源：互联网发布：怎么找淘宝直播合作编辑：程序博客网时间：2024/06/05 16:07

最近做了一个简洁风个人网站主页，和大家分享一下。界面如图，（换了两张背景图片）：
这里写图片描述

一、界面：背景为一组自定义图片，中间一个透明标签，标签内包含header，content，footer三部分；

二、基础功能：点击header部分“个人网站”链接可以随机切换背景图片；
点击content部分“CSDN博客日志(blog)”链接跳转至我的csdn博客主页；“more”是一个按钮链接，据个人情况可以链接至自己想展示的内容网页。

本篇博客先介绍一下页面的静态布局:
首先分析一下该页面的构成。该页面由背景图片和中间的标签组成。那么，中间的标签为主要的刻画对象。

<body>  <div id="container">      <div id="container-inner">          <!-->中间标签<-->      <div>  </div></body>

标签又分为上中下三部分，分别是header,content,footer.

1.header部分：有一个链接（h1标签，a标签）和一个文本显示（p标签），横线（hr标签）；
2.content部分：链接（p标签，a标签），横线（hr标签）；
3.footer部分：“more”按钮链接（button标签，a标签）。

完整的静态布局为：

<!--标签整体容器-->        <div id="container">            <!--内容-->            <div id="container-inner">                <!--页头 -->                <div id="header">                    <div id="header-content"  >                    <h1 id="change"><a href="js:bgImage();">个人网站</a></h1>                    <p>Zheng XiaoXue's Personal Website</p>                    <hr class="hr1"/>                    </div>                  </div>                <!-- 中间部分-->                <div id="content">                    <div id="main-content">                        <div id="main-content">                            <p><a href="http://blog.csdn.net/qq_38177305">CSDN博客日志(blog)</a></p>                        </div>                    <div>                </div>                <!--页脚-->                <div id="footer">                    <div id="footer-container">                        <div id="footer-content">                            <hr class="hr2"/>                            <button><a href="#">more</a></button>                        </div>                    </div>                 </div>            </div>        </div>

效果如下：
这里写图片描述
静态布局完成，下一篇更CSS样式设置。

阅读全文

0 0