初探页面布局

最新推荐文章于 2023-03-27 14:16:49 发布

原创最新推荐文章于 2023-03-27 14:16:49 发布 · 843 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

学习网页布局，参考网站：http://www.xjtj.gov.cn/，第一次学习，理解不对之处还望指教。

前记：第一次写div+css可能是2年前刚毕业的时候，现在2年后再回头来看看div+css，还是太菜，但是个不错的开始，因为成长还在继续。

模仿页面的效果先看一下截图：

首先，布局网页的第一步就是分模块。看网页中还是分为头部(header)，导航(navigation)，正文(container)，页尾(footer)，所以，在body里面就先写几个div，class依次为header、navigation、container、footer，然后在css文件中进行布局。

第二步，就是依次规划头部、导航、正文、页尾。正文比较麻烦，是页面的主要内容，那就先说说其他部分。

头部：第一次看动态的字，以为是js写的，把html弄下来一看，不是js，就是gif，动态图片。那主要的工作量就是制作动态图片。统计图标，统计局这几个字，右侧动态的字，就是在gif中制作的。我现在就是把原来的字擦掉，换成其他的字,在ps中用文本工具重新写的字，加上投影.gif是在ps cs6中的时间轴里加入处理好的每帧的图片制作好的动态图片。素材准备好了，放到网页上吧。头部的背景是跟动态图片里的背景是一个颜色，还需要头部背景的图片，就是头部的高度取1px宽度的背景repeat-x 横铺，然后，用css把gif放到页面中间background：url(.gif) no-repeat center。

导航：导航就是ul li里面继续嵌套ul li 标签，第一层ul li里就是页面看到导航项。里面嵌套的ul li 就是当鼠标移动到当前li上，让下一层ul的display：none变为display:block.

页尾：就是这部分内容放到页面底部，最主要的就是padding-bottom:15px; 居中：text-align:center;

说正文布局之前，先说一下页面背景。

body的背景设置成灰色(#ebebeb)，页面底部加上一个图片：

body{
background:#ebebeb url(../images/wwsy_footer_bg.jpg) no-repeat center bottom;
}

正文container的背景是白色的，宽度1000px，页面居中，居中是用的margin：0 auto(备注：margin：1 1 1 1，顺时针依次为上右下左，若margin：1 2，则表示上下1左右2，所以margin:0 auto 表示上下外边距为0，左右auto，默认居中)：

.container {
   width:1000px;
   margin:0 auto;
   background:#fff;
overflow:hidden;
}

接下来说一下正文的布局。

正文除去搜索行，算是4行。第一行是新闻图片展示和最新公告。第二行是文件通知和政务动态。第三行是统计分析和数据查询。第四行是信息公开和政民互动。

第一行，动态图片展示，html中在ul li放所有的图片，再放一个div，ul li 里面放右下角的小图片，html如下：

	<div class="left wwsy_pic">
				<div class="kinslideshow_pic"> 
					  <ul class="AD-pic">
						<li><a href="1"><img src="images/news/news01.jpg" alt="" /></a></li>
						<li><a href="2"><img src="images/news/news02.jpg" alt="" /></a></li>
						<li><a href="3"><img src="images/news/news03.jpg" alt="" /></a></li>
						<li><a href="4"><img src="images/news/news04.jpg" alt="" /></a></li>
					  </ul>
					  <div class="count">
						<ul>
							<li><img class="abc" src="" alt="" /></li>
							<li><img src="" alt="" /></li>
							<li><img src="" alt="" /></li>
							<li><img src="" alt="" /></li>
						</ul>
					  </div>
				</div>
			</div>

用jquery实现的图片切换，需要在页面头部引用jquery的包

另外加上如下代码script代码：

<!--jQuery方法-->
<script type="text/javascript">
	//新闻图片切换
	$(function(){
			$(".AD-pic").zj_ppt({
			"src":"images/count02.png",			//切换小图片路径
			"src_cur":"images/count01.png",		//当前切换小图片路径
			"count":".count",				//切换小图的父级class名字	
			"time":3000                         	  	//间隔变化动画时间 3s
		})
	})
</script>

.AD-pic 就是页面上写的所有的图片，.zj_ppt 是扩展的jquery方法，需要还在页面引用扩展的方法，在页面头部加上

jQuery.fn.extend({object}) 是给jQuery对象添加方法，jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。看一下zj_PPT.js里的部分内容。

$.fn.extend({
  "zj_ppt":function(value){
   
   //默认参数定义
   var $this = $(this);
   value = $.extend({
    "time":2000,  //间隔变化动画时间2s
    "con":0,
    "sto":true,
    "count":"count", //切换小图的父级class名字
    "src":"src",  //切换小图片路径
    "src_cur":"src_cur" //当前切换小图片路径
    },value); 
   //其他代码
  }
});

zj_ppt 就是给jquery添加的新的方法，方法的参数就有

time(自动切换的时间)，

con(当前图片的index，超过图片的数量时值就为0)，

sto(为true时超过time规定的时间就切换图片，为false时就停止切换)，

count(小图片父类class名称)，

src(鼠标未经过时小图片的路径)，

src_cur(鼠标经过时切换的小图片)

下面的其他方法

切换图片autopic():将所有大图片隐藏，当大图片是第con个图片时候，显示该图片。更改小图片的源src为src，当小图片是第con个图片的时候，更改小图片的src为src_cur.最后，con++

sett():当sto为true的时候，再次调用autopic方法，进行切换。当time到了，也调用set()方法，进行切换。

当鼠标放到小图片上时，立即调用autopic切换图片，并记录con为小图片的当前index，设置sto为false；当鼠标移开时，不调用autopic，但是记录con为当前index，设置sto为true。

至此，图片切换结束。

第一行的右侧的"最新发布"的文字的样式跟下面的"文件通知"，"政务动态"，"统计分析"类似，就是分别设置标题和下面列表的样式，"更多>>" 就是float：right，列表左侧是小图片。需要说明的就是背景颜色的设置，标题-最新发布，下面是个横向的图片，放在这个模块的最上面。纵向的1px的图片还是repeat-x横铺，只保留渐变高度即可，这个模块的div设置背景颜色。

"数据查询","信息公开","在线办事"模块下的灰色背景都是图片，数据查询是dl，dt，其他用的ul li，中间的分割线一般用的border-bottom:1px dashed #ccc;

"政名互动":蓝色背景，依次设置小图片，文字设置位于图片的下边还是右边的，是通过position:relative;

主页的正文部分到此结束。