一个响应式布局的网页
2019-04-30 本文已影响0人
笑才
一、效果
1.jpg
2.jpg
3.jpg
二、代码
2.1、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仁何会计</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
height:98vh;
}
/* 头部标题 */
.header {
padding: 0px;
height:8%;
text-align: center;
background: #4877FB;
}
.header .header_left{
margin:0;
float: left;
width: 15%;
height:100%;
background: #4877FB;
}
.header .header_right{
margin:0;
float: left;
width: 85%;
height:100%;
background: #4877FB;
}
.header .header_right_1{
margin:0;
float: right;
width: 127px;
height:100%;
background: #4877FB;
padding-left: 0px;
}
.header .header_right_2{
margin:0;
float: right;
width: 64px;
height:100%;
background: #4877FB;
}
.header .header_right_3{
margin:0;
float: right;
width: 48px;
height:100%;
background: #4877FB;
}
.header .header_right_4{
margin:0;
float: right;
width: 48px;
height:100%;
background: #4877FB;
}
.header .header_right_5{
margin:0;
float: right;
width: 250px;
height:100%;
background: #4877FB;
}
.header .header_right_5 .header_right_5_1{
margin-top:1.5vh;
width: 245px;
height:35px;
background:url(../images/seach.png) no-repeat 4px 5px;
}
.header h1 {
font-size: 50px;
}
/* 创建三列 */
/* Left column */
.leftcolumn {
float: left;
width: 10%;
height:100%;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
height:100%;
background-color:#4877FB;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#4877FB;
width:100%;
height:50px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#305CD7;
}
a img {
margin-left:-20px;
margin-right:15px;
margin-top:12px;
}
/* 中间栏 */
.centercolumn {
float: left;
width: 70%;
height:100%;
background-color: #f1f1f1;
padding-left: 20px;
padding-top: 40px;
}
.centerBox {
background-color: white;
width: 100%;
height:100%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 20%;
height:100%;
background-color: #f1f1f1;
padding-left: 20px;
padding-top: 40px;
}
.rightBox {
background-color: white;
width: 100%;
height:100%;
}
.rightBox h4 {
font-family: "Microsoft YaHei";
font-style:normal;
font-weight:normal;
font-size:20px;
margin:0;
padding-left: 40px;
padding-top: 20px;
}
th,td
{
border:0px solid black;
}
table {
border:0px solid black;
padding-left: 20px;
padding: 20px 0px 20px 20px;
}
td .td_up {
width:130px;
height:50px;
color:#21b0f3;
padding-top: 20px;
font-weight:200;
font-size:50px;
text-align:center;
}
td .td_down {
width:130px;
height:30px;
color:#666666;
padding-top: 5px;
font-family: "Microsoft YaHei";
font-size:14px;
text-align:center;
}
img.bottom {vertical-align:text-bottom;}
.row{
height:92%
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
height:100%
}
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 1600px) {
.leftcolumn {
float: left;
width: 15%;
height:100%;
}
.centercolumn {
float: left;
width: 60%;
height:100%;
background-color: #f1f1f1;
padding-left: 20px;
padding-top: 40px;
}
.rightcolumn {
float: left;
width: 25%;
height:100%;
background-color: #f1f1f1;
padding-left: 20px;
padding-top: 40px;
}
}
@media screen and (max-width: 1200px) {
.leftcolumn {
float: left;
width: 15%;
height:100%;
}
.centercolumn {
float: left;
width: 50%;
height:100%;
background-color: #f1f1f1;
padding-left: 20px;
padding-top: 40px;
}
.rightcolumn {
float: left;
width: 35%;
height:100%;
background-color: #f1f1f1;
padding-left: 20px;
padding-top: 40px;
}
.header .header_left{
margin:0;
float: left;
width: 20%;
height:100%;
background: #4877FB;
}
.header .header_right{
margin:0;
float: left;
width: 80%;
height:100%;
background: #4877FB;
}
}
@media screen and (max-width: 800px) {
.header .header_left{
margin:0;
float: left;
width: 25%;
height:100%;
background: #4877FB;
}
.header .header_right{
margin:0;
float: left;
width: 75%;
height:100%;
background: #4877FB;
}
.leftcolumn,.centercolumn, .rightcolumn {
width: 100%;
padding: 0;
}
.leftcolumn {
float: left;
height:150px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
height:10%;
background-color:#4877FB;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
@media screen and (max-height: 800px) {
.header {
padding: 0px;
height:10%;
text-align: center;
background: #4877FB;
}
.row{
height:90%；
}
@media screen and (max-height: 700px) {
.header {
padding: 0px;
height:12%;
text-align: center;
background: #4877FB;
}
.row{
height:88%；
}
@media screen and (max-height: 600px) {
.header {
padding: 0px;
height:14%;
text-align: center;
background: #4877FB;
}
.row{
height:86%；
}
@media screen and (max-height: 400px) {
.header {
padding: 0px;
height:16%;
text-align: center;
background: #4877FB;
}
.row{
height:84%；
}
</style>
</head>
<body>
<div class="header">
<div class="header_left">
<img src="../images/logo.png" width="80%" height="45" style="margin-left:0px;margin-top:2vh;margin-left:0px;" >
</div>
<div class="header_right">
<div class="header_right_1">
<img src="../images/login_out.png" width="22" height="22" style="margin-left:0px;margin-top:2vh;margin-left:0px;" >
</div>
<div class="header_right_2">
<div style="color:#FFFFFF;margin-top: 2.5vh;font-family: "Microsoft YaHei";font-size:14px;text-align:center;">admin</div>
</div>
<div class="header_right_3">
<img src="../images/user.jpg" width="35" height="35" style="border-radius:50%;margin-left:0px;margin-top:1.6vh;margin-left:0px;" >
</div>
<div class="header_right_4">
<img src="../images/warn.png" width="20" height="20" style="margin-left:0px;margin-top:2.5vh;margin-left:0px;" >
</div>
<div class="header_right_5">
<div class="header_right_5_1">
<div>
<img src="../images/seach2.png" width="25" height="25" style="float:left;margin-left:10px;margin-top:8px;" >
</div>
<div>
<input type="text" id="fname" placeholder="搜索" style="margin-top:12px;BACKGROUND-COLOR: transparent;border:0px solid black;">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="leftcolumn">
<ul>
<li><a href="#news"><img src="../images/营销管理.png" width="16" height="16" style="" >营销管理</a></li>
<li><a href="#contact"><img src="../images/营销统计.png" width="16" height="16" style="" >营销统计</a></li>
<li><a href="#about"><img src="../images/工作流程.png" width="16" height="16" style="" >工作流程</a></li>
</ul>
</div>
<div class="centercolumn">
<div class="centerBox">
<h1 style="margin:0px;text-align:center;font-size:50px;">主体区域</h1>
</div>
</div>
<div class="rightcolumn">
<div class="rightBox">
<h4>本月招生统计</h4>
<table>
<tr>
<td><div class="td_up">26</div><br><div class="td_down">新增资源</div></td>
<td><div class="td_up">12</div><br><div class="td_down">入学生源</div></td>
</tr>
<tr>
<td><div class="td_up">4</div><br><div class="td_down">执行跟踪</div></td>
<td><div class="td_up">0</div><br><div class="td_down">丢单数量</div></td>
</tr>
</table>
<h4>本年课销统计</h4>
<table>
<tr>
<td><div class="td_up">820</div><br><div class="td_down">应消课数</div></td>
<td><div class="td_up">566</div><br><div class="td_down">实消课数</div></td>
</tr>
<tr>
<td><div class="td_up">254</div><br><div class="td_down">欠费课时</div></td>
<td><div class="td_up">50600</div><br><div class="td_down">欠费金额</div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
三、项目结构
image.png
四、总结
4.1、“height:98vh;”中vh表示浏览器的高度，98vh表示98%的浏览器高度，vw表示浏览器的宽度
4.2、@media screen and (max-width: 1600px) { }，这个表示响应式布局 - 屏幕尺寸宽度小于1600px 时，会发生的布局变化，同理@media screen and (max-height: 1600px) { }表示响应式布局 - 屏幕尺寸高度小于1600px 时，会发生的布局变化
4.3、要显示圆形图片，只需要在图片上加“border-radius:50%;”属性
4.4、背景透明：BACKGROUND-COLOR: transparent;
4.5、字体设置：font-family: "Microsoft YaHei";微软雅体；font-style:normal;字体风格；font-weight:normal;字体粗细；font-size:20px;字体大小
