李老师作业2-3页面布局 - 小浣熊博客

李老师作业2-3页面布局

发布者: 小浣熊

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这篇文章总字数为:3031 字,有 1 张图存于本站服务器

实图预览:

TIM图片20200323131724.png

实现代码:

!DOCTYPE html>
<html>
<head>
	<title>110120130小浣熊页面布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		/*清除所有默认边距*/
		*{margin: 0;padding: 0;}
		/*第一种页面布局父标记样式参数*/
		.one{height: 300px;width: 500px;background-color: rgb(255,255,205);position: absolute;left: 10px;right: 10px;top: 10px;border: 1px solid;}
		/*第二种页面布局父标记样式参数*/
		.two{height: 300px;width: 500px;background-color: rgb(255,255,205);position: absolute;left: 10px;right: 10px;top: 320px;border: 1px solid;}
		/*第一种页面布局顶部子标记样式参数*/
		.top1{height: 48px;background-color: rgb(205,237,255);margin: 10px 10px;text-align: center;line-height: 50px;border: 1px solid;}
		/*第一种页面布局内容父标记样式参数*/
		.middle1{position: absolute;top: 60px;bottom:40px;}
		/*第一种页面布局内容左边子标记样式参数*/
		.left1{height: 168px;width: 98px;background-color: rgb(205,255,205);float: left; margin: 10px 10px;text-align: center;line-height: 170px;border: 1px solid;}
		/*第一种页面布局内容右边子标记样式参数*/
		.right1{height: 168px;width: 368px;background-color: rgb(255,205,205);float: right; margin: 10px 10px 10px 0;text-align: center;line-height: 168px;border: 1px solid;}
		/*第一种页面布局底部子标记样式参数*/
		.bottom1{height: 38px;background-color: rgb(255,205,255);position: absolute;bottom: 10px;left: 10px;right: 10px;text-align: center;line-height: 40px;border: 1px solid;}
		/*第二种页面布局顶部子标记样式参数*/
		.top2{height: 48px;background-color: rgb(205,237,255);margin: 10px 10px;text-align: center;line-height: 50px;border: 1px solid;}
		/*第二种页面布局内容父标记样式参数*/
		.middle2{position: absolute;top: 60px;bottom:40px;}
		/*第二种页面布局内容左边子标记样式参数*/
		.left2{height: 168px;width: 98px;background-color: rgb(205,255,205);float: left; margin: 10px 10px;text-align: center;line-height: 170px;border: 1px solid;}
		/*第二种页面布局内容中间子标记样式参数*/
		.center2{height: 168px;width:258px;background-color: rgb(255,205,205);float:left;margin: 10px 0;text-align: center;line-height: 170px;border: 1px solid;}
		/*第二种页面布局内容右边子标记样式参数*/
		.right2{height: 168px;width: 98px;background-color: rgb(205,255,205);float: right;margin: 10px 10px;text-align: center;line-height: 170px;border: 1px solid;}
		/*第二种页面布局底部子标记样式参数*/
		.bottom2{height: 38px;background-color: rgb(255,205,255);position: absolute;bottom: 10px;left: 10px;right: 10px;text-align: center;line-height: 38px;border: 1px solid;}
		/*超链接加下划线属性。并让它与第二个页面和浏览器左边保持10px距离*/
		#last{position: absolute;left:10px;top: 630px;}
	</style>
</head>
<body>
	<div class="one">
		<div class="top1">#banner</div>
		<div class="middle1">
		<div class="left1">#links</div>
		<div class="right1">#content</div>
	    </div>
		<div class="bottom1">#footer</div>
	</div>
	<div class="two">
		<div class="top2">#banner</div>
		<div class="middle2">
		<div class="left2">#links</div>
		<div class="center2">#content</div>
		<div class="right2">#right</div>
		</div>
		<div class="bottom2">#footer</div>
	</div>
	<div id="last">
		点击右侧进入<a style="text-decoration:underline" href="http://homework.cctni.cn/myform.html" target="_blank">查看上次作业</a>
	</div>
	
</body>
</html>
文件下载

附件:作业2-3页面布局

文件大小:1.1k

更新时间:2020/03/23 13:21

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享到:
打赏
-版权声明-

阅读时间:  发布于:2020-3-23
文章标题:《李老师作业2-3页面布局》
本文链接:https://www.mua222.cn/144.html
本文编辑: 小浣熊,转载请注明超链接和出处小浣熊博客
收录状态:[百度已收录][360未收录][搜狗已收录]

评论

     快速回复: 支持 感谢 学习 不错 高兴 给力 加油 惊喜
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

李老师作业2-3页面布局

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏