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>