查看“商苑电商:盒子模型的实现”的源代码
←
商苑电商:盒子模型的实现
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
[[文件:web2-100.png|600px]] ==创建盒子== index.html: <nowiki><!doctype html> <html> <head> <meta charset="utf-8"/> <link type="text/css"rel="stylesheet"href="../css/index.css"/> <title>只音音乐</title> </head> <body> <div class="header"> </div> <div class="zhuti"> </div> <div class="end"> </div> </body> </html></nowiki> ==为盒子设定样式== index.css: <nowiki>@charset "utf-8"; /* CSS Document */ body{ background-color:pink; } h2{ color:black; text-align:center; } p{ text-indent:50px; color:black; } .header{ width:100%; height:auto; background:#C00; } .zhuti{ width:80%; height:auto; background:#0C0; margin:0 auto; } .end { width:100%; height:70px; text-align:center; background:#F6F; }</nowiki> 上文中如果出现空隙,可以添加如下代码消除空隙: <nowiki> * { margin:0; padding:0; }</nowiki> ==为盒子添加内容== <nowiki><!doctype html> <html> <head> <meta charset="utf-8"/> <link type="text/css"rel="stylesheet"href="../css/index.css"/> <title>只音音乐</title> </head> <body> <div class="header"> <h2>只音音乐</h2> <hr size="5"/> <p>音乐,让你在悲伤时感到一丝快乐,让你在感动时潸然落泪。音乐让你知道,人世间的各种欢乐,各种辛酸,各种痛楚;音乐让你知道,只要有音乐,你就不会孤独,不会寂寞。音乐,为你的生命注入了无穷的动力。</p> <p>音乐带着难得的自信和微笑在旋律中绽放,伴着电子琴曲风,每一个音符都像生命在跳跃。音乐赋予了我们太多的心灵悸动。曾经的硝烟弥漫,过眼的春光烂漫,欢腾的青春畅想,都被它用干净的声线在清晨唤醒,快乐地行走在灿烂的阳光里</P> <hr size="1" > <h3 align="lift" >每日更新 音乐人 MV 音乐故事 附近听者</h3> </div> <div class="zhuti"> <hr size="1" align="center" width="100%" color="#FFA042"> <h2>心情</h2> <img src="../img/ting.jpg"/> <hr size="5" /> <h2 >娱乐</h2> <img src="../img/ting1.jpg" /> <hr size="5"/> <h2 >风景</h2> <img src="../img/ting2.jpg"/> </div> <div class="end"> <h3>创作团队:胡亚君,王成成,周方圆</h3> <p>山东商业职业技术学院 邮编:250000</p> </div> </body> </html></nowiki>
返回至
商苑电商:盒子模型的实现
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息