《第10章练习与实验答案》由会员分享,可在线阅读,更多相关《第10章练习与实验答案(5页珍藏版)》请在金锄头文库上搜索。
1、第十章练习与实验答案练习 101.选择题(1) B (2) A (3) C (4) B (5) A2 . 简答题略实验 101 . 代码Web 页面设计实例 v/title/link href= H exp_10_1 .css re stylesheet ” type= ” text/css | 博客 v/av/span | 计 v/av/span|坛 v/av/span | 关于 v/ax/spanv/li 欢度新春佳节 中 国江Copyrights 2015-2020 Web 前端开发工作室 © All rights reserved. 苏 v/pCSS 文件:/* exp_10
2、_1 .css */* 应用对象: edu_10_1 .html*/ body font-family: Verdana; font-size :16px;marginzO;text-align:center; /* 整个页面居中显示 */ p margin :2px; font-size :14px;#Container margimO auto; width:900px;#Header height:118px; border-bottom :5px; background-color :rgb(230,230,230); border-bottom:5px solid #FFFFFF;#
3、PageBody height:380px; border-bottom :5px solid #FFFFFF;#SideBar float: left;width :200px;height:380px; background :#Dff100; text-align:center;paddi ng:50px auto; border-right:5px solid #FFFFFF;#Mai nBody floatzright;width :695px;height:380px;backgrou nd :#cffOOO;#Footer height:60px;background-color
4、:rgb(230,230,230);text-alig n:ce nter;font- family/Courier New;” font-size :12px;paddi ng-top:1 Opx;imgfloat: left;spa n(width :50px ;height :30px;fon t-size :20px;font-family:华文新魏”;#Header spa npadd in g-top:40px;a width :48px;height:24px;fon t-size :20px;font-family:华文新魏”;ul list-style-type :none;
5、 marg in :0px;padd in g:0px;li width:50px;height:30px;fon t-size :20px;font-family:华文新魏”;paddi ng :10px 10px;h3text-alig n:ce nter;color:red;fo nt-size:24px;backgrou nd :#CFFOOO ;paddi ng :6px auto; a:l in k,a:visited,a:hover,a:active(text- decorati on:non e;display:block; a:hoverborder-bottom:2px s
6、olid #FFOOOO; backgrou nd :#55A0FF;color:#FFFFFF;2 .代码 DIV+CSS 布局 v/title*(font:24px/1.5em 黑体 ;margin:O auto;padding:Opx;#Containerwidth :1000px;margin:0 auto;/* 设置整个容器在浏览器中水平居中 */#Headerheight:120px; background:#093;#logo(height:80px;background :#5f5;border-bottom:2px solid white;#navheight:40px;ba
7、ckground:#3f5;border-bottom:2px solid white;#Contentbackg ro u n d: #0 E F;#Content-Leftheight:400px;width :250px;float:left;/* 设置浮动,实现多列效果, div+Css 布局中很重要的 */ background:#66ff66; border-right:2px solid white;#Content-center-Leftheight:400px;width :250px;float: left;background:#77ff66;border-right:2
8、px solid white;#Content-center-rightheight:400px;width :250px;float: left;background:#88ff66;border-right:2px solid white;#Content-right height:400px; width :250px; float: left; background: #99ff66;#Footerheight:40px;background :#6FC;border-top:2px solid white;.Clearclear :both;margin:O auto;padding :Opx;logonavContent-LeftContent-center-rightContent-right! 如何你上面用到 float, 下面布局开始前最好清除一下 Footer