查看“基础综合项目(一)”的源代码
←
基础综合项目(一)
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
该页面已被保护以防止编辑和其他操作。
您可以查看与复制此页面的源代码。
==盒子的流式布局== *盒子的上下方向的边距根据具体需求来设置,左右方向的边距则设置为auto, 即margin:值1 auto 值2;,或者margin:值1 auto; *水平方向边距auto的意义说明: *使用浏览器窗口宽度或者使用父元素盒子的宽度减去当前盒子的宽度,将差值除以2之后得到的结果作为当前元素的左右边距。 *效果图: *[[文件:w2-18.png|500px]] *试一试:在[http://www.w3school.com.cn/tiy/t.asp?f=html_basic W3C编辑器]上粘贴以下代码,查看效果。 *然后在代码描述layer2的CSS属性中加入如下属性:margin:0px auto; <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> h2{text-align:center;} p{text-align:left;} #layer1{width:100%; height:100px; background:blue;color:white;text-align:center;} #layer2{width:70%; height:300px;margin:0px auto;color:black;} #layer3{width:100%; height:30px; background:blue;color:white;text-align:center;} </style> </head> <body> <div id="layer1"><h1>山东商业职业技术学院</h1></div> <div id="layer2"> <h2>信艺学院开展教师结对子活动<h2/> <p>为让年轻教师更好地适应高职教育教学工作,进一步提高教学能力水平,提高教育教学质量,信息与艺术学院组织了教师“老带新”结对子活动,9月19日下午,活动的启动仪式举行。 </p> </div> <div id="layer3">底部</div> </body> </html> </nowiki> *如果不加水平居中的属性,页面内容会偏向一侧 *加了之后,页面内容水平居中 ==盒子的嵌套布局== ==给页面添加图片和链接== ==添加导航菜单==
返回至
基础综合项目(一)
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息