当然，我说的前提是要去手写HTML 和 CSS.
像用DW那样用DIV拼出来的网页，我真的会很担心而且怀疑是否会在实际的浏览器中错位，这是我坚持一直不用Dreamweaver软件来设计网页的主要原因，虽然有人告诉我Dreamweaver在不停的新版本中都有改进，也有老师给我说，新的Dreamweaver将HTML文档和CSS样式文件结合的更紧密，但对那些在所见所得的环境下机器所生成的代码下，我依然不信任，而对自己手写的代码抱更大的好感。
当然还有一点，我们拼图的过程中要尽量少量的用到<table>，而大部分的布局框架都是用div来完成的。
当我们在开始拼图的时候，我们还需要准备和了解一些东西。
这样一切就变的简单起来。
我要将一个图片作为网站的底部，直接在body 的backgroud 中写成bottom 属性显然是达不到我的要求的，因为我的页面在浏览器高度比较高的情况下内容是无法撑满整个浏览器的，所以在body 的background 将图片写成bottom属性在这种情况下面会显示一片空白，像这样：
很容易看到页面下面是一片空白。
这个时候想到用一个层来让他浮动在底部来放置这张图片，但要适应浏览器高度让层在底部，所以CSS这样写。
1 2 3 4 5 6 7 8 | #foot{ width:100%; height:500px; position:absolute; top:100%; margin-top:-500px; background:url(footer.jpg) center bottom no-repeat; } |
刷新页面后，咋一看，好像已经得到了想要的效果：
这几天终于有心情静下来做一些小的页面。
这学期成了社团的社长，反正还需要在学校待完这学期，所以打算这学期注重于社团文化的建设和社团的管理。
做了一个成员页面，就是一个静态的页面，不过jQuery越写越顺手了。
整个页面的色调取暖色调，是从一款wordpress的主题仿制的。
关于一些jQuery
—-
因为为了做左右浮动的效果，为了方便，我是将浮动用jQuery来处理的，但因为有各个不同的层级的内容，所以jQuery不能用最基本的选择器。
第二是全部收起的部分，因为最上面的不需要收起，但都是同样class 的DIV，所以在第一个div中不光有一个class 还多做了个id 用来判断jQuery筛选。像这样：<div class=”member” id=”ganbu”> 而其他同级的只是 <div class=”member”>
这两个部分的jQuery是这样：
1 2 3 4 5 6 7 8 9 10 | #浮动部分 $(".member .mem:nth-child(odd)").addClass("left"); $(".member .mem:nth-child(even)").addClass("right"); #全部收起的选择器 $(".shouqi").click(function(){ $(".member:not(#ganbu)").slideUp("slow"); }) |
页面打算用PHP来完善，能个实现管理的功能，以及评论，个人展示之类。
Tags:CSS jQuery 15 views With 1 Comments
先上图。
所谓横向的平铺就像上面那样的内容模型那样，首先是一个容器，也就是途中的半透明的部分，然后里面的内容用类似矩形的形状进行平铺，内容由PHP脚本的循环进行输出。
其实在之前的外卖网站制作的过程中就考虑的是这样的布局方式，只是当时对这种方式模型理解的不够透彻，所以在布局中存在一定的bug，虽然用其他的办法进行弥补和掩饰，但问题始终是问题，是依然存在的。
这次的布局中，思路比较清晰，所以理解上比之前的布局要透彻一些。
这几天在做一个报名系统的时候，写到后台菜单栏时调整后的一种样式，颜色搭配是他们后来建议我进行修改的。
这几天对于导航条和菜单栏制作想到了很多的方法，待我整理好代码后将会一一放出，并做出专门的演示页面进行演示。
刚开学，这段时间有很多的事情需要忙，筹划很久的项目也要正式的退出了，如果细心的人可能已经发现我博客的“我管理的网站”里面多添加上了两个链接，但是里面一个没有内容，而另一个的内容还在完善之中。
关于这个，暂时不作过多的说明。
内容将会逐渐的添加上去。
下面是竖形菜单栏的CSS样式之一，至于用法，不需要多说了吧，如果实在不知道，在评论中回复吧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #menu li{ border-bottom:1px solid #ed9f9f; } #menu li a{ display:block; padding:5px 5px 5px 1.5em; text-decoration:none; border-left:12px solid #711515; border-right:1px solid #711515; } #menu li a:link, #menu li a:visited{ background-color:#c11136; color:#ffffff; } #menu li a:hover{ background-color:#990020; color:#ffff00; } |
