HTML 静态网页作业 - 关于我的家乡 介绍安庆景点

@charset "utf-8";
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
body{
background-color: #fafafa;
font-size: 12px;
color: #333;
}
.page{
width: 1000px;
margin: 0 auto;
background-color: #FFF;
}
.banner{
width: 100%;
height: 400px;
overflow: hidden;
}
.banner img{
width: 100%;
height: 100%;
object-fit: cover;
}
.nav{
width: 100%;
background-color: #77488b;
}
.nav ul{
width: 994px;
margin: 0 auto;
overflow: hidden;
}
.nav li{
width: 142px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #FFF;
float: left;
}

.nav li:hover{
background-color: #6b407d;
}

.mid{
width: 100%;
padding: 20px;
box-sizing: border-box;
}
h1.title{
font-size: 36px;
line-height: 50px;
font-weight: 400;
text-align: center;
margin-bottom: 20px;
}
.wz{
width: 100%;
padding: 15px;
box-sizing: border-box;
overflow: hidden;
}

.wz b{
display: block;
margin-top: 10px;
margin-bottom: 20px;
font-size: 16px;
font-weight: normal;
}

.wz p{
text-indent: 2em;
line-height: 35px;
margin-bottom: 10px;
}

.wz>img{
display: block;
margin: 10px auto;
}

.wz p.tu{
text-align: center;
}

.wz p.tu>img{
margin: 5px;
}

.wz p>img{
margin: 10px;
}

.bg1{
background-color: #e0c8d1;
border-radius: 10px;
margin-top: 15px;
}

a.more{
display: inline-block;
width: 80px;
text-align: center;
line-height: 36px;
border: 1px solid #fefefe;
border-radius: 5px;
background-color: #fefefe;
margin-left: 20px;
margin-top: 10px;
transition: border-color .3s,background-color .3s;
}

a.more:hover{
border-color: #333;
background-color: transparent;
}

h2.title{
font-size:22px ;
font-weight: 400;
line-height: 24px;
border-bottom: 1px solid #77488b;
padding-bottom: 10px;
}
.foot{
width: 100%;
background-color: #77488b;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #FFF;
}

.fj{
width: 100%;
margin-top: 20px;
}

.fj li{
width: 300px;
height: 300px;
margin: 0 10px 20px;
float: left;
cursor: pointer;
}

.fj li img{
display: block;
width: 100%;
height: 220px;
object-fit: cover;
margin-bottom: 10px;
}
.fj li h2{
text-align: center;
line-height: 36px;
font-size: 18px;
font-weight: 500;
}
.fj li p{
width: 100%;
line-height: 26px;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
white-space:nowrap;
padding: 5px;
}

.fj li p:hover{
overflow: visible;
white-space: normal;
color: #FFF;
background-color: rgba(0,0,0,.7);
position: relative;
border-radius: 5px;
z-index: 999;
}