最近跟着某大牛学CSS3,下面是跟着大牛做的两个实例项目,不得不说CSS3真的很强大.另外最近用SAE搭建了一个网站,把最近的实例都放到了里面,等搭建好放出,这样大家就能直观的看到演示效果了
建立HTML文件
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<meta charset="UTF-8">
<title>响应式表格设计</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSDN相关课程</h1>
<table class="responsive">
<!--表格头部-->
<thead>
<tr>
<th>课程序号</th>
<th>课程名称</th>
<th>课程操作</th>
</tr>
</thead>
<!--表格主题-->
<tbody>
<tr>
<td class="number">15004</td>
<td class="name">Android开发实战</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="number">15005</td>
<td class="name">IOS开发实战</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="number">15006</td>
<td class="name">java开发实战</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="number">15007</td>
<td class="name">Ruby开发实战</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="number">15008</td>
<td class="name">HTML开发实战</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>效果如下
配置CSS3样式
body{
margin: 0;
padding:0;
}
/*
绿色 #35B558
橙色 #ff5c00
深灰 #666666
浅灰 #F8F8F8
* */
h1{
text-align: center;
font-size: 30px;
color: #666;
}
.responsive a{
text-decoration: none;
padding: 5px;
color: #ff5c00;
}
.responsive{
width: 98%;
margin: 0 auto;
color: #000;
border-collapse: collapse;
border:1px solid #666666;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.responsive th{
background-color: #35B558;
}
.responsive th,.responsive td{
border: 1px solid #666666;
padding: 10px;
}
.responsive .number,.responsive .actions{
text-align: center;
}效果:
响应式配置
/*响应式配置*/
@media (max-width: 480px) {
/*去掉边框和阴影*/
.responsive{
border: none;
box-shadow: none;
}
/*去掉表头*/
.responsive thead{
display: none;
}
/*把各项设置为块元素分布*/
.responsive tr,.responsive td{
display: block;
}
/*设置number和name距离,使用子选择器*/
.responsive td:nth-child(1), .responsive td:nth-child(2){
padding-left: 25%;
}
/*使用伪元素添加表头*/
.responsive td:nth-child(1)::before{
content: "课程序号";
position: absolute;
left: .5em;
font-weight: bold;
}
.responsive td:nth-child(2)::before{
content: "课程名称";
position: absolute;
left: .5em;
font-weight: bold;
}
/*给表头添加框和阴影*/
.responsive tr{
position: relative;
border: 1px solid #666666;
box-shadow: 0 0 0 3px rgba(0,0,0,.4);
}
/*给表头部分添加背景色*/
.responsive .number{
text-align: left;
background-color: #35B558;
}
.responsive td.actions{
position: absolute;
right: 0;
top:0;
border: none;
}
}
响应式图片布局
这个很简单,就是不同分辨率下显示不同的图片,就直接把图片分享上来了,不写了
时间： 2024-10-13 12:47:38