CSS实例【四】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css_4_list.css"/>
		<style>
/* 		ul{
			list-style-type:none;
			padding: 0rem;
			margin: 0px;
		}
		ul li{
			background-image:url(./11.png);
			background-repeat: no-repeat;
			background-position: 0rem 0.3125rem;
			padding-left: 1.975rem;
		} */
		
		table{
			/* 合并边 */
			/* border-collapse: collapse; */
			width: 100%;
		}
		table,th,td{
			border: 0.0625rem solid gold;
			/* 文本水平对齐:居中 */
			text-align: center;
		}
		th{
			height: 3.125rem;
			color: white;
			background-color: #66CFAE;
			border:0.15rem solid #4d9e85;
		}
		td{
			height: 2.125rem;
			/* 垂直对齐:底部 */
			vertical-align: bottom;
			/* 盒子模型:content,padding,border,margin */
			padding: 0.9375rem;
			border: 0.1875rem solid #86b6f9;
		}
		caption{caption-side: bottom;}
		
		#user
		{
			font-family: "trebuchet ms",arial,helvetica;
			width: 100%;
			border-collapse: collapse;
		}
		#user td,#user th
		{
			font-size: 1em;
			border: 1px solid #85a81f;
			padding: 3px 7px 2px 7px;
			/* vertical-align: middle; */
		}
		#user th
		{
			background-color: #98c133;
			font-size: 1.1em;
			text-align: left;
			padding-top: 0.3125rem;
			padding-bottom: 0.25rem;
			color: #FFFFFF;
		}
		#user tr.alt td
		{
			color: #000000;
			background-color: #EAF2D3;
		}
		</style>
	</head>
	<body>
		<ul>
			<li>coffee</li>
			<li>Tea</li>
			<li>Coco Cola</li>
		</ul>
		<p>删除默认样式</p>
		<ul class="demo">
			<li>coffee</li>
			<li>Tea</li>
			<li>Coco Cola</li>
		</ul>
		
		<table>
			<caption>Table 1.1 Customers</caption>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
		</table>
		<table id="user">
			<tr>
				<th>name</th>
				<th>country</th>
				<th>age</th>
			</tr>
			<tr>
				<td>Ana</td>
				<td>US</td>
				<td>13</td>
			</tr>
			<tr class="alt">
				<td>Cino</td>
				<td>UK</td>
				<td>15</td>
			</tr>
		</table>
	</body>
</html>

上面内容都是在.html文件的哦,以下内容属于.css文件的

ul.demo{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

不行不行,饿死了,要下班回去找吃的了,饿~
喜欢的点赞关注哦

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值