已经好久没有更新文章了,最近三十年难得一遇的服务器崩溃被我们实验室的热血儿们碰上了,跟着实验室大神们学了不少服务器的知识。今晚终于腾出时间来记录一下我的小网页用到的微弱知识。本文持续更新。
10.15——“把抱怨的时间用在积极工作上吧。”
大琨近期在OJ维护平台实验室负责往平台上添加一个新的page,内容为OJ新手常见问题解析汇总。
前期工作自然是先把整体框架搭出来。至于美工、编程是后期工作。对于大琨这样的初学者,善解人意的卢老师自然留给了我很长的时间。
其实大琨也是很有执行力的。开始的时候有朋友提到了一个“框架”的概念。正好手边有本书有详细的frameset方面的知识,于是想要试着做一下。
尽管frameset是被HTML5淘汰的东西,但是之前我百度了一些关于frameset的生存现状
首先,写了一个index.html。
<frameset rows="10%,*" cols="180" frameborder="0" border="0" framespacing="0">
<frame src="huizong_top.html" name="topframe" scrolling="no" noresize="noresize" id="topframe" title="topframe" marginwidth="0" marginheight="0" align="center"/><!--头框架-->
<frameset cols="10%,14%,50%,15%,10%" frameborder="0" border="0" bordercolor="#675d5d" framespacing="0"><!--左界-->
<frame src="huizong_leftborder.html" />
<frame src="huizong_left.html" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" title="leftframe" />
<frame src="huizong_main.html" name="mainframe" scrolling="yes" id="mainframe" title="mainframe" />
<frame src="huizong_right.html" name="right_frame" scrolling="no" id="right_frame" title="right_frame" /><!--右框架-->
<frame src="huizong_rightborder.html" name="rightborder_frame" scrolling="no" noresize="noresize" id="rightborder_frame" title="rightborder_frame" /><!--右框架-->
</frameset>
</frameset>
一开始不明白如何分出多列。但是将代码排版后可以明显看懂。大致上遵循了“写到哪画到哪,需要什么画什么”的原则。
第一句是将画出一段区域,行数占了屏幕的10%,列是具体数值“180”,默认px为单位。即下图(一)区。
同理,第二句<frameset>开辟一块新的区域,即下图(二)区。紧接着cols="10%,14%,50%,15%,10%"表明以列的方式按百分比将(二)区划分成五个区域,分别占据(二)区的10%,14%,50%,15%,10%。接着在下面按照顺序用<frame>标签设置相关参数。当然列宽加起来为100%只是理想状态,这一点在后面的div中将继续提到。
好,就点到为止吧。frameset给我的感觉就是特别方便,忽略现在普遍对标签的高要求,它的优势之一就是能减少服务器与浏览器之间的流量。
接下来,就是学习div的阶段了。
我的总结就是——div是一个一个的框,或者用更为广泛的说法就是“盒子布局”。每一个div都是一个“容器”,放置相应的对象和属性(不知道这样说是否贴切,但是对于软件工程专业的大琨来说,把div理解为封装好的method还是挺生动的)。而且通过一次一次地修改自己写的小网页,从页面效果来说,我得到了最重要的一个结论,那就是——如果想用div,就必须搞清楚“参照物”。接下来,我将通过展现我那蹩脚的页面来印证我的结论。
首先,我想先挂出我那蹩脚的页面,让大家看看。
听学长的建议加上边框看看:
可以发现在最初的div不居中,明显我想要一个1-3-1的结构布局。但是以上网页存在如下几个最显著的不足:
- footer(底部)没有想要的居中效果,右边超出了整个的div容器。
- footer浮在中间行的三列之上。
- 各个div高度杂乱。
晒一下我蹩脚的代码:
CSS样式:*{margin:0;padding:0;}
html,body{
background-image:url(image/background.jpg);
height: 100%;; width:100%; margin:0; padding:0;//宽高自适应
overflow:scroll;//设置滚动条
}
#wrap { overflow:hidden ; width:85%; height: 100%; margin: 0 auto; }
#head{
<span style="white-space:pre"> </span>width: 100%;
<span style="white-space:pre"> </span>height: 15%;
}
#left{
<span style="white-space:pre"> </span>float: left;
<span style="white-space:pre"> </span>width: 20%;
<span style="white-space:pre"> </span>height: 80%;
<span style="white-space:pre"> </span>margin-top:5%;
}
#main {
<span style="white-space:pre"> </span>float: left;
<span style="white-space:pre"> </span>width: 60%;
<span style="white-space:pre"> </span>height: 80%;
<span style="white-space:pre"> </span>margin:auto;
<span style="white-space:pre"> </span>white-space:nowrap;
}
#main-inner {
<span style="white-space:pre"> </span>height: 100%;
<span style="white-space:pre"> </span>margin-left: 0;
}
#right{
<span style="white-space:pre"> </span>float:right;
<span style="white-space:pre"> </span>width:20%;
<span style="white-space:pre"> </span>height:80%;
<span style="white-space:pre"> </span>margin-left:0;
<span style="white-space:pre"> </span>margin-top:5%;
}
#footer{
<span style="white-space:pre"> </span>background-color:hsla(140,75%,95%,0.5);//透明色
<span style="white-space:pre"> </span>height:5%;
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>position:fixed;
<span style="white-space:pre"> </span>bottom:0;//始终位于底部
<span style="white-space:pre"> </span>padding:0;
}
HTML代码:
<div id="wrap">
<span style="white-space:pre"> </span><div id="head">
</div>//结束head
<div id="left">
</div>//结束left
<div id="main">
<div id="main-inner"></div>
</div> //结束main
<div id="right">
</div>//结束right
<div id="footer">
</div>//结束footer
</div>//结束wrap
进入修改阶段…..
- 参考经验博文
首先解决布局问题,如何使用div+css布局。CSDN上有一篇博文给了我很大的帮助,如何用div+css布局页面,相对讲的比较详细。一层一层嵌套,响应了“盒子”式的布局。盒子里可以有小盒子,每个小盒子都装有自己的对象和属性。(对于软件工程专业的大琨来说,将盒子结构理解为封装好的函数也是挺抽象的~.~)
2.参考建议
把自己的网页源代码交给小智哥哥看,虽然得到了一句“页面问题太多,我已无从下手”的无奈评价,但是也得到了宝贵的建议。
对于第一个问题——footer(底部)没有想要的居中效果,右边超出了整个的div容器,小智哥哥给出的建议就是,将最外层的<wrap>的position属性设置为relative(相对定位),将footer的position属性设置为absolute(绝对定位)。对于第二个问题,则应该在写完第二行三列的<div>之后,加一句<div style="clear:both"></div>,清除一下浮动设置,再写<div id="footer"></div>。使用此方法后,页面效果如下:
发现footer乖乖地呆在应该在的区域了。
设置position的定位称为“绝对定位法”,将父元素设为相对定位,子元素设置为绝对定位,则子元素的偏移量以父元素为基准。设为绝对定位的元素脱离标准流,这些元素对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。又因为
position:absolute;
bottom:0;
的设置,使得footer始终漂浮在底部。
此时第二行的左中右三个大元素分别占20,60,20,达到了100%,为了更明显地找出问题本质,我们将id="right"的元素取消上边距。页面效果如下:
这是在#right是右浮动的状态,
很明显,如果按照完全100%的比例来,系统会因为四舍五入的原因造成整体加起来超过100%,从而造成换行。对于每一列占宽度的百分比,大琨以前还用元素审查量出元素宽度,用计算器很计较地算过,的确会有误差。
因此这里,我三列都是适应宽度的,所以都是百分比,调整#main的宽度就好了,可以用小数增加精度。
-------------------------------------分割线----------------------------------------------
上面讲的都是小问题。
接下来继续强调“参照物”,即偏移基准。
由于还没有将我们小组的成员联系方式加在页面上,于是大琨想要在右边滚动字幕的下方再添加一个<div>。这样就要在原来<div id="right">的元素块中开辟两个子元素,分别是#right_top和#right_bottom.那么根据如何用div+css布局页面这篇博文,大琨又继续添加。最初代码如下图:
当时大琨没有参透“参照物”的概念,就是认为所有的百分比都是以整个body为基准的,所以,右边的框框们都应该是一样的宽度。所以都设置的20%。结果页面就变成了这样:
#right_top和#right_bottom都是右浮,所以都紧贴右边分布,的确是以20%的比例存在的 = =! 可惜,他们的参照物不是body,而是它们的父元素,即#right。这次大琨才知道了偏移基准的概念。
之前在查阅相关“屏幕宽高自适应”方面的东西时,曾看到过有人这样说,设置宽度时,可以直接使用百分比,但是在使用height时,百分比不管用了!结论就是:必须指定html和body的高度是100%,再设置其他子元素,这时高度百分比才能有效。应该也跟大琨强调的“参照物”有所关联吧!
最后再提一句 margin属性的设置,margin-right,margin-bottom,margin-left,margin-top,如果讲究细节,就分开设置。只写margin=5%代表外边距都为父元素的5%,会出现不必要的麻烦。
至此,大琨的div初试就能出一个像样一点的轮廓了。
当然,这是初步成果,接下来,导航的特效,页面配色,动态调用还要持续努力!