练习 | css页面练习案例

快乐的高兴的学习代码中

已于 2023-12-12 12:00:54 修改

阅读量703

点赞数

分类专栏：练习文章标签： css css3

于 2021-06-09 19:55:01 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/117753041

版权

纸质卡片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div.card{
				width:250px;
				text-align: center;
				box-shadow: 0 4px 8px 0 rgba(0,0),0 6px 20px 0 rgba(0,0,0,0.3); 
				border:3px solid gold ;
				margin:30px 40px;
			}
			div.header{
				background-color: darkgreen;
				color:white;
				padding:10px;
				font-size: 40px;
			}
			div.container{
				padding:10px;
			}
		</style>
	</head>
	<body>
		<div class="card">
			<div class="header">
				<h1>9</h1>
			</div>
		
		<div class="container">
			<p>June 9,2021</p>
		</div>
		</div>
	</body>
</html>

随便练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#square{
				width:400px;
				height:400px;
				background-color:green;
			}
			#circle{
				width:200px;
				height: 200px;
				border-radius:50%;
				background-color:white;
				margin:100px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="square">
			<div id="circle"></div>
		</div>
	</body>
</html>

页面布局

菜鸟教程在线编辑器

疯了，代码不小心删了

响应式表格练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		table th{
			width:140px;
			border-collapse: collapse;
		}
		table,th,tr,td{
			border:1px solid #000000;
		    text-align: center;
			border-spacing: 0px;
		}
		/* 屏幕宽度和表格宽度不一致，加上滑动出现的效果 */
	 	@media screen and (max-width:500px){
				.table-container{
				    overflow-x: scroll; 
				}
				table {
					width:800px;
				}	
		} 
		</style>
	</head>
	<body>
		<div class="table-container">
		<table>
			<th>姓名</th>
			<th>年龄</th>
			<th>爱好</th>
			<th>月薪</th>
			<th>大学学校</th>
			<th>最高学历</th>
			<th>是否入党</th>
			<th>健康码</th>
			<th>是否需要核酸检测</th>
			<th>最近活动轨迹</th>
	    <tr>
			<td>王小二</td>
			<td>12</td>
			<td>放牛</td>
			<td>5元</td>
			<td>暂时没有</td>
			<td>小学</td>
			<td>少先队员</td>
			<td>黄码</td>
			<td>需要</td>
			<td>家-学校-家-放牛</td>
		</tr>
	    <tr>
	 	   <td>李小明</td>
		   <td>15</td>
		   <td>跟小樱一起念书</td>
		   <td>4000元</td>
		   <td>暂时没有</td>
		   <td>初中</td>
		   <td>团员</td>
		   <td>绿码</td>
		   <td>不需要</td>
		   <td>家-学校-家 其他地方等&l