网站入口页双栏对称布局实现思路
先来一张预览图。
接下来说一说这种页面布局的实现思路,因为自己是从零开始的,所以着实花了好几天功夫才实现了这么一个看起来很简单的布局,所有东西都要自己一点点摸索,不过这种经历对于自己的成长也是很有帮助的。好了,下面进入正题。
整体布局
在写这个页面的过程中,其实不管是 HTML 代码的结构,还是 CSS 的实现方式,思路一直都是在变化的,目前的布局如下:
HTML 代码结构
顶部为导航栏
.header
:包括左侧的logo,以及右侧的用户菜单;中间为左右对称的导航区
.entrance
:左右两块采用不同的背景图(background-image
),背景之上有链接,点击就会转向不同的页面;底部为包含版权信息的
.footer
。
CSS 样式设置
顶部 .header
由于这一部分需要覆盖在导航区之上,所以通过
absolute
属性来令其脱离正常的文档流,放在页面顶部。同时为了实现覆盖的效果,就需要设置
z-index
属性,该属性值大于等于 1 时,即可堆叠在普通元素之上。
有一点需要注意的就是,只有设置过
position
属性的元素(relative
、absolute
、fixed
),z-index
属性才能生效。而之前将中间区域的z-index
值设置为 -1,后来发现链接无法点击,找了一圈才发现是这里出了问题,打牢基础至关重要啊。
为了保证在不同尺寸的浏览器窗口中均能正常显示,就需要设置
min-width
及width
属性。width
属性被设置为 100%,以占满浏览器宽度,而真正用于展示顶部导航栏内容的子元素.header-container
的width
属性则被设置为 80%,这是因为顶部导航栏的内容并不多,左右两侧留白,视觉效果较好。
中间 .entrance
左右两部分区域对称显示是通过设置
position
属性实现的,所以父元素设置为position: relative;
,同时为了保证在不同尺寸的浏览器窗口中均能正常显示,宽度设置与顶部.header
相同。左右两部分对称显示,
width
属性均为50%
,position
属性均为absolute
,top
属性均为0
,left
属性则分别为0
和50%
。为了让背景正常显示,均设置
background-size: 100%
以及background-repeat: no-repeat;
,这样背景就能在水平方向上填满整个元素。
底部 .footer
此部分的样式设置与顶部导航栏的类似,只是需要将版权信息相关的文字在水平和垂直两个方向上均居中对齐即可。版权文字为
.footer
内的.copyright
之中的<p>
标签,所以对.footer
设置flex
属性,以便让其中的.copyright
在两个方向上均居中对齐。
display: flex;
justify-content: center;
align-items: center;
样式调整
根据窗口大小重设背景
为了保证用户调整浏览器窗口之后,背景图片能够适应新的窗口尺寸,所以用 JS 来设置包含背景图的元素的高度属性,代码如下。
<script type="text/javascript">$(window).resize(function() {var viewPortHeight = window.innerHeight - 90;$('.entrance > div').css("height", viewPortHeight + 'px');$('.entrance > div').css("line-height", viewPortHeight + 'px');$('.entrance > div').css("min-height", viewPortHeight + 'px');});
</script>
上面的代码中,viewPortHeight
之所以还要减去 90,是因为底部 .footer
高度为 90,如果不减去这个高度值,在底部 .footer
下方还会多出来一小块空白区域,所以就加了这么一句。
后记
目前做出来的页面依然有小 bug,不过入口页只是作为展示,现有的 bug 对页面功能影响很小,所以这个 bug 先放一边。毕竟需要做的事情还有很多,总要分一个轻重缓急,这也是工作中需要时常注意的一件事。
网站入口页双栏对称布局实现思路相关推荐
- Slog42_支配vue框架初阶项目之博客网站-单页-默认头像的布局和定位
ArthurSlog SLog-42 Year·1 Guangzhou·China Aug 19th 2018 GitHub 掘金主页 简书主页 segmentfault 从业之路不同 机缘也不同 人 ...
- Word双栏和单栏的转换
原来是跨页双栏的状态(也就是两页),可以先将第二页中所有的文字选中, 然后在点击'页面布局-单栏'(将其变为单栏),然后在第二页的最上方添加进表格或图片. 然后再选中表格或图片下方的文字,将其再变为双 ...
- 在双栏文档中插入图片(或者表格)使其占据两栏的大小位置
方法1 (不太推荐,因为文档修改后格式就完全变了.见下面方法2吧) 在写期刊时需要用到双栏的布局,当要插入大图片时若是双栏显示则会看不清楚,此时就需要将图片设置为单栏显示. 在选择插入图片的位置时,选 ...
- DIV布局——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 w
HTML5期末大作业:网页制作代码 网站设计--人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计 ...
- dux主题页面添加html,DUX主题文章页相关推荐双栏显示
DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气 ,多设备支持.优化SEO,适用于垂直站点.科技博客.个人站,目前我 ...
- 写论文——设置word双栏排版中第一页下面的作者简介
场景: 设置word双栏排版中第一页下面的作者简介 解决方案: 1.首先将首页中和其它页面的正文选中排版成双栏,方法选中正文,页面布局-分栏-双栏, 排版成双栏后 2.回到首页,找到正文双栏的左边的一 ...
- 好看清新的双栏博客模板,可以用来做工作室官网,自媒体官网,个人博客,产品展示等网站。
介绍: 模板描述 JPress 博客主题,响应式设计,自适应移动端设备浏览,适用于自媒体,新闻,杂志,博客等类型站点. 模板特点 舒适双栏设计风格: 采用HTML5和CSS3编写: 采用Bootstr ...
- 跨栏表格位置跑到了下一页_LaTeX双栏模板插入通栏公式(跨栏插图)
双栏模板下插入通栏公式 很多人在投稿杂志的时候经常碰到杂志所给的论文模板书双栏的,双栏模板有个比较麻烦的问题就是公式一般不能写的太长,否则就会跨栏使得文字互相覆盖,比如下面的爱思唯尔官方模板中的公式就 ...
- LaTeX之双栏模板表格布局(单双栏满宽+不满宽)
引言 跟Microsoft word一样,LaTex也是一套排版系统.二者的区别是前者排版属于富文本编辑,后者排版更像是写程序.LaTeX的使用者只要调用模板即可,完全不用去处理字体样大小.位置.目录 ...
最新文章
- 立体匹配算法实现之:AdaptWeight
- Flask发送邮件,最基础
- C++ Primer 5th笔记(chap 12 动态内存)allocator类
- SharePoint Designer 2007发布WorkFlow的小bug
- Spring Batch示例教程
- ros怎么跑小车_ROS坐标转换讲解 | Autolabor Simulation
- poj 2828 线段树
- php api接口安全设计 sign
- 计算机管理如何格式化u盘,优盘格式化,教您如何格式化u盘
- 四川多多开店:拼多多如何检查聊天记录
- curl命令查询IP和运营商
- 胡歌官宣生女,胡椒粉们真为他高兴,人生最顶级的能力是【涅槃重生】的力量
- 单片机第四次实验课——外部中断实验
- 《软件工程导论》考研复试整理
- 【单片机笔记】基于STM32的8通道的开源无线遥控器手柄
- UNI-APP隐私政策问题无法上架
- Django Migration Error with MySQL: BLOB/TEXT column *** used in key specification without a key leng
- XSY1659 [HNOI2012]永无乡
- RSS阅读——在繁杂的社会接受纯粹的信息 RSS介绍与RSS订阅源分享
- 表白技巧升级,大神程序员表白代码泄露(内含彩蛋)!