html，css实现呼吸灯、课程表、个人简历

于 2020-11-17 21:21:58 发布
阅读量440 收藏 2
点赞数 1
CC 4.0 BY-SA版权
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Azhangbiny/article/details/109753811
博客展示了HTML和CSS的应用实例，包括实现呼吸灯效果、制作课程表表格以及设计美观简洁的个人简历，并给出了相应代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、html+css实现呼吸灯效果，如下图：
在这里插入图片描述
代码如下：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>圆</title>
		<style>
			div {
				box-sizing: border-box;
			}
			.content {
				width: 400px;
				height: 600px;
				background-color: #333;
				margin: 0 auto;
			}
			.content > .box {
				height: 400px;
				padding: 40px;	
				/*当正方形的padding增大，外圆变小*/
				animation-name: outer;
				animation-duration: 5s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}
			.content > .box > .outer {
				height: 100%;
				border: 5px solid #ccc;
				border-radius: 50%;
				padding: 20px;
				/*当外圆的padding增大，内圆变小*/
				animation-name: inner;
				animation-duration: 5s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}
			.content > .box > .outer >.inner {
				height: 100%;
				border: 10px solid #ffffff;
				border-radius: 50%;
			}
			@keyframes outer {
				25%{
					padding: 30px;
				}
				50%{
					padding: 40px;
				}
			}
			@keyframes inner {
				25%{
					padding: 30px;
				}
				50%{
					padding: 20px;
				}
				75%{
					padding: 32px;
				}
				100%{
					padding: 20px;
				}
			}
		</style>
	</head>
	<body>

2、html+css实现表格制作课程表，如下图：

在这里插入图片描述
代码如下：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>课表制作</title>
	    <style>
	         
	    body{margin:0;}
	    header{
	        margin:30px auto;
	        text-align: center;
	    }
	    .container{
	        width:80%;
	        margin:0 auto;
	    }
	    .xueqi_head{
	        margin: 30px 0 10px;
	    }
	    .xueqi_btn{
	        width: 80px;
	        padding: 6px;
	        float: left;
	        background-color: cornflowerblue;
	        border: none;
	        color: #fff;
	    }
	    .xueqi_sel{
	        width:180px;
	        padding:5px
	    }
	    tr,td{
	        border:1px solid #ccc;
	        text-align: center;
	    }
	    th{color:#fff;}
	    td{font-size:12px;padding:10px}
	    tr>th:nth-child(1){
	        background-color: #69A4E0;
	        border-color:#69A4E0;
	    }
	    tr>th:nth-child(2){
	    background-color: #3CC051;
	    border-color:#3CC051;
	    }
	    tr>th:nth-child(3){
	    background-color: #ED4E2A;
	    border-color:#ED4E2A;
	    }
	    tr>th:nth-child(4){
	    background-color: #57B5E3;
	    border-color:#57B5E3;
	    }
	    tr>th:nth-child(5){
	    background-color: #FCB322;
	    border-color:#FCB322;
	    }
	    tr>th:nth-child(6){
	    background-color: #4ad8e4;
	    border-color:#4ad8e4;
	    }
	    tr>th:nth-child(7){
	    background-color: #852B99;
	    border-color:#852B99;
	    }
	    tr>th:nth-child(8){
	    background-color: #999;
	    border-color:#999;
	    }
	    </style>
	</head>
	<body>
	    <header>
	        <h2>学生课表</h2>
	    </header>
	    <div class="container">
	        <div class="xueqi_head">
	            <button type="button" class="xueqi_btn">学期</button>
	            <select class="xueqi_sel">
	                <option value="">2020-2021第一学期</option>
	                <option value="">2020-2021第二学期</option>
	                <option value="">2021-2022第一学期</option>
	                <option value="">2021-2022第二学期</option>
	            </select>
	        </div>
	        <table cellspacing="0" align="center" width="100%" cellpadding="8px">
	            <tbody>
	            <tr>
	                <th>节次</th>
	                <th>星期一</th>
	                <th>星期二</th>
	                <th>星期三</th>
	                <th>星期四</th>
	                <th>星期五</th>
	                <th>星期六</th>
	                <th>星期日</th>
	            </tr>
	            <tr>
	                <td>1-2</td>
	                <td>高等数学</td>
	                <td>大学英语</td>
	                <td>软件工程</td>
	                <td>Java程序设计</td>
	                <td>PHP开发实践</td>
	                <td>微信小程序</td>
	                <td>移动App</td>
	            </tr>
	            <tr>
	                <td>3-4</td>
	                <td>H5+CSS3</td>
	                <td>JavaScript</td>
	                <td>Jquery</td>
	                <td>Ajax</td>
	                <td>Canvas</td>
	                <td>Vue</td>
	                <td>Axios</td>
	            </tr>
	            <tr>
	                <td>5-6</td>
	                <td>Vue全家桶实战</td>
	                <td>Node</td>
	                <td>express框架开发</td>
	                <td>koa框架</td>
	                <td>webpack</td>
	                <td>React</td>
	                <td>JSX</td>
	            </tr>
	            <tr>
	                <td>7-8</td>
	                <td>React全家桶</td>
	                <td>Angular</td>
	                <td>Python</td>
	                <td>BUI框架</td>
	                <td>git</td>
	                <td>Linux</td>
	                <td>VueX</td>
	            </tr>
	            <tr>
	                <td>9-10</td>
	                <td>vue-router</td>
	                <td>vue-loader</td>
	                <td>vue-cli脚手架</td>
	                <td>vue-SSR服务端渲染</td>
	                <td>vue生命周期</td>
	                <td>vue-指令系统</td>
	                <td>vue-组件通信</td>
	            </tr>
	            <tr>
	                <td>11-12</td>
	                <td>vue-动画</td>
	                <td>vue-插槽</td>
	                <td>vue-路由传参</td>
	                <td>vue-命名视图</td>
	                <td>vue-watch监听</td>
	                <td>vue-render渲染</td>
	                <td>vue-设计模式MVVM</td>
	            </tr>
	            </tbody>
	        </table>
	    </div>
	</body>
	</html>

3、html+css实现美观简洁的个人简历，如下图：

在这里插入图片描述
代码如下：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>个人简介</title>
	    <style>
	        .title{
	            text-align: center;
	            font-weight: bold;
	            font-size: 22px;
	        }
	        th{
	            font-size: 14px;
	            background-color: #f0f0f0;
	        }
	        td{
	            min-width: 80px;
	            height: 30px;
	        }
	    </style>
	</head>
	<body>
	    <table  border="1px" align="center" cellspacing="0" cellpadding="10px">
	        <colgroup>
	            <col>
	        </colgroup>
	        <thead>
	            <tr>
	                <td class="title" colspan="8">个人简介</td>
	            </tr>
	        </thead>
	        <tbody>
	            <tr>
	                <th>姓名</th>
	                <td></td>
	                <th>性别</th>
	                <td></td>
	                <th>出生年月</th>
	                <td></td>
	                <td colspan="2" rowspan="5" style="width: 160px"></td>
	            </tr>
	            <tr>
	                <th>祖籍</th>
	                <td></td>
	                <th>民族</th>
	                <td></td>
	                <th>政治面貌</th>
	                <td></td>
	            </tr>
	            <tr>
	                <th>身体状况</th>
	                <td></td>
	                <th>婚姻状况</th>
	                <td></td>
	                <th>学历</th>
	                <td></td>
	            </tr>
	            <tr>
	                <th>所学专业</th>
	                <td colspan="2"></td>
	                <th>毕业学校</th>
	                <td colspan="2"></td>
	 
	            </tr>
	            <tr>
	                <th>专业能力</th>
	                <td colspan="5"></td>
	            </tr>
	            <tr style="height: 80px;">
	                <th>求职意向</th>
	                <td colspan="7"></td>
	            </tr>
	            <tr style="height: 80px;">
	                <th>专业课程</th>
	                <td colspan="7"></td>
	            </tr>
	            <tr style="height: 120px;">
	                <th>实践经历</th>
	                <td colspan="7"></td>
	            </tr>
	            <tr style="height: 80px;">
	                <th>获奖经历</th>
	                <td colspan="7"></td>
	            </tr>
	            <tr style="height: 80px;">
	                <th>自我评价</th>
	                <td colspan="7"></td>
	            </tr>
	        </tbody>
	    </table>
	</body>
	</html>
A. 张彬
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值