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

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

一、界面：背景为一组自定义图片，中间一个透明标签，标签内包含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样式设置。

简洁风个人主页（1） html 静态布局相关推荐

简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
简洁风个人简历自我介绍PPT模板
模板介绍精美PPT模板设计,简洁风个人简历自我介绍PPT模板.一套个人简历幻灯片模板,内含黑色,蓝色多种配色,精美风格设计,动态播放效果,精美实用. 一份设计精美的PPT模板,可以让你在汇报演讲时脱 ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
CSS静态布局——常规流，定位，浮动。
合理的网页布局方式合理的网页布局可以使网页内容以整洁有序的方式展示给用户.凌乱的布局则会使网页的信息无法正确传达,用户的目的没有达到等问题. 合理的网页布局应有: 1.合理地把页面切分为多个具有具体 ...
静态布局、流式布局、自适应布局、弹性布局、响应式布局
静态布局.流式布局.自适应布局.弹性布局.响应式布局前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...
风投是如何逆势布局DeFi项目的？
作者:老道来源:道说区块链前面我写文章和大家分享过传统的机构投资者比如灰度.MicroStrategy.推特CEO的CashApp等是如何投资比特币的.这类机构投资者基本上属于风格比较传统的投资者 ...
[Android]仿微信开关按钮:)扁平化简洁风
下载地址:https://github.com/ChenSiLiang/Android.git 最近在做界面,发现Android自带的开关控件有点丑,好看的一个还需要比较高的SDK版本. 所以,打算写 ...
酷黑风个人主页+引导页
简介: 专注于个人主页/团队官网引导页网盘下载地址: http://kekewl.cc/8WfMXzrgQ540 图片: 简易使用教程: MUSIC 点击页面MUSIC 会触发音乐播放,再次点击则暂 ...

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

简洁风个人主页（1） html 静态布局相关推荐

最新文章

热门文章