博主信息
博文 48
粉丝 3
评论 1
访问量 46237
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
什么是css盒模型——2018年3月22日
JackBlog
原创
641人浏览过

在html中,所有元素都被描述成矩形盒子。盒模型通过4个属性来描述:padding,margin,content,border。

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>会员管理</title>
		<style type="text/css">
			body{
				background-color:  floralwhite;
			}
			table,td,th{
				border: 1px solid darkgray;
			}
			table{
				border-collapse: collapse;
				width: 600px;
				margin: 0 auto;
				background-image: url("https://img.php.cn//upload/image/543/183/884/1521734800901827.jpg");
				background-repeat: no-repeat;
				background-size: cover;
				box-shadow: 3px 3px 5px  #A9A9A9;
				
			}
			table img{
				width: 30px;
				border-radius: 50%;
				box-shadow: 2px 2px 2px  #A9A9A9;
			}
			table td{
				text-align: center;
			}
			table caption {
				text-align: center;
				color: darksalmon;
				font-size: 2em;
				font-weight: bolder;
				margin-top: 50px;
			}
			table th{
				color: cornflowerblue;
			}
			.id{
				color: crimson;
				font-weight: bolder;
			}
		</style>
	</head>
	<body>
		<table>
			<caption>会员管理</caption>
			<tr>
				<th>id</th>
				<th>用户名</th>
				<th>昵称</th>
				<th>头像</th>
				<th>等级</th>
				<th>经验</th>
				<th>积分</th>
			</tr>
			<tr>
				<td class="id">10001</td>
				<td>md394845</td>
				<td>一只大鸟</td>
				<td><img src="https://img.php.cn//upload/image/263/349/466/1521734807614318.jpg" alt="头像" /></td>
				<td>7</td>
				<td>676</td>
				<td>3465</td>
			</tr>
			<tr>
				<td class="id">10002</td>
				<td>ff4333ff</td>
				<td>爱爱</td>
				<td><img src="https://img.php.cn//upload/image/184/409/479/1521734810902468.jpg" alt="头像" /></td>
				<td>5</td>
				<td>654</td>
				<td>634</td>
			</tr>
			<tr>
				<td class="id">10003</td>
				<td>gfsazxc22</td>
				<td>JACK</td>
				<td><img src="https://img.php.cn//upload/image/401/469/372/1521734812780507.jpg" alt="头像" /></td>
				<td>6</td>
				<td>734</td>
				<td>855</td>
			</tr>
			<tr>
				<td class="id">10004</td>
				<td>qweasdzxc</td>
				<td>黑人</td>
				<td><img src="https://img.php.cn//upload/image/146/139/453/1521734814361085.jpg" alt="头像" /></td>
				<td>4</td>
				<td>537</td>
				<td>234</td>
			</tr>
			<tr>
				<td class="id">10005</td>
				<td>zzre332</td>
				<td>赵日天</td>
				<td><img src="https://img.php.cn//upload/image/279/404/983/1521734816367857.jpg" alt="头像" /></td>
				<td>5</td>
				<td>231</td>
				<td>534</td>
			</tr>
		</table>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

images图片bg.jpg

1.jpg2.jpg3.jpg4.jpg5.jpg


批改状态:合格

老师批语:这两天的作业已检查!! 完成的很出色!继续保持!!
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学