实验指导书(八).doc

《实验指导书(八).doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、实验指导书(八)　　实验八两列浮动布局　　一、实验目的1．掌握固定宽度网页布局的方法。　　2．深入理解浮动的概念。　　3．掌握两列布局网页的典型逻辑结构。　　4．熟练掌握CSS两列浮动布局的方法。　　5.掌握圆角框的制作方法。　　二、实验内容制作“信息与网络中心”网页。　　三、操作步骤1．将myweb文件夹复制到D盘，并创建站点。　　2．打开index.html和style.css。　　3．在style.css中补充网页样式。　　说明headersidebarsearchdownloadserviceconte

2、ntnewsintroductionsitebuildfooternav参考答案#container{width:780px;margin:auto;background-color:#fff;}#header{height:130px;background:url(images/header-bg.jpg)}#headerh1,#headerh2{display:none;}#nav{background:#99cdff;overflow:hidden;/*迫使父元素包含浮动的子元素*/zoom:1;/*在I

3、E6中，迫使父元素包含浮动的子元素*/780px250px530px230px510px130pxborder-bottom:5pxsolid#fc6;}#navli{float:left;/*连续向左浮动，形成水平导航条*/}#nava{display:block;/*让行内元素以块元素的方式显示*/width:80px;padding:5px0;text-align:center;}#nava:hover{background:#eee;}#content{width:510px;float:right;p

4、adding:010px;margin-bottom:30px;}#sidebar{width:230px;float:left;padding:010px;margin-bottom:30px;}#footer{clear:both;height:36px;background:url(images/footer-bg.jpg);text-align:center;}#footerp{line-height:36px;/*使#footer中的文字垂直居中*/}#sidebarh3{background:url

5、(images/box-1.jpg)no-repeatlefttop;/*圆角框的顶部图像*/padding-top:15px;text-align:center;}#sidebarul,#sidebarform{background:url(images/box-2.jpg)repeat-y;/*圆角框的中部图像*/padding:1px20px;/*上下1像素填充是为了防止父子垂直边界重叠*/}#sidebardiv{background:url(images/box-3.jpg)no-repeatleft

6、bottom;/*圆角框的底部图像*/padding-bottom:20px;margin:10px0;}#sidebarulli{background:url(images/bullet.gif)no-repeatleftcenter;padding-left:25px;border-bottom:1pxdashed#fff;margin:10px0;}#searchp{text-align:center;margin-top:10px;}#contenth3{border-bottom:1pxsolid#9

7、99;padding:10px0;margin:10px0;background:url(images/h3-bg.jpg)no-repeatleftcenter;padding-left:40px;}#contentp{text-indent:2em;padding:010px;}.fltlt{/*这个类样式应用在网页中的图片上，使图片向左浮动*/float:left;margin-right:10px;}#contentdiv{clear:both;/*清除前面图片元素浮动产生的影响*/}.pic{/*这个

8、类样式应用在网页中的图片上，使图片具有填充和边框*/border:#9991pxsolid;padding:3px;}#sitebuildli{width:170px;float:left;/*#sitebuild中的li连续向左浮动，水平排列*/text-align:center;}#sitebuild{overflow:hidden;zoom:1;}。　　　　内容仅供参考