实践作业（第一页）

最新推荐文章于 2024-07-11 21:11:19 发布

陈韵涵

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量361

点赞数 7

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/cyh20040921/article/details/135210284

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hometown</title>
    <style>
     #center{
        width:1000px;
        height: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    



/* 按钮 */
    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:rgb(204, 204, 204);
  top: 0;
  width:80%;
  padding-left: 10%;
  padding-right: 10%;
}
li {
  width: 25%;
  float:left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 35px;
  text-decoration: none;
}
li a:hover{
  background-color: #888484;
}




/* 大图片 */
.img_{
  border: 1px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  width: 100%;
  height: auto;

  
}
.div00{
  width: auto;
}




/* 小图片 */
.img__{
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 2%;
}
.div0{
  width: 70%;
  display:flex;
  flex-direction:row;
  padding:5px;
  overflow: hidden;
  position: relative;
  
  padding-left:15% ;
  padding-right: 15%;
  padding-top: 0%;

}
.div1{
  width: 28.33%;
  height: 310px;
  border: 1px solid rgb(165, 162, 162);
  margin:3%;
  float:left;
}
.div2{
  width: 28.33%;
  height: 310px;
  border: 1px solid rgb(165, 162, 162);
  margin:3%;
  float:left;
  
}
.div3{
  width: 28.33%;
  height: 310px;
  border: 1px solid rgb(165, 162, 162);
  margin:3%;
  float:left;
}
p{
            text-indent: 35px;/* 首行缩进 */
            line-height: 30px;/* 设置行高 */
            padding-left: 2%;
            padding-right: 2%;
            color:gray;
            
        }



.div4{
  width: 100%px;
  border: 1px solid #888484;
}
video{
  width: 100%;
}

h2{
  text-align: center;
  color: #888484;
}

.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}


</style>
</head>









<body bgcolor="#F1F1F1">
    <div id="center">
        <div>
            <ul>
                <li><a href="#news">首页</a></li>
                <li><a href="#news">美景</a></li>
                <li><a href="#contact">特产</a></li>
                <li><a href="#about">旅游</a></li>
              </ul>
        </div>

<div class="div00">
  <img class="img_" src="绿白色江南水乡照片个人分享中文明信片 - 1.png" alt="" height="450px" >

</div><br>

<h2>宜昌简介</h2>
<div class="div0">
<div class="div1">
<img class="img__" src="宜昌1.jpg" alt="">
<p>宜昌市，湖北省域副中心城市、长江中游城市群重要成员、宜荆荆都市圈核心重要成员、“世界水电之都”，古称夷陵。</p>
</div>  
<div class="div2">
  <img class="img__" src="宜昌2.jpg" alt="">
  <p>宜昌市连续四届全国文明城市，是国务院批复确定的中部地区区域性中心城市。2023年，被评为三线城市。</p>
  </div>  
  <div class="div3">
    <img class="img__" src="宜昌3.jpeg" alt="">
    <p>宜昌市是湖北省重要的综合交通枢纽，境内三峡机场是国家航空一类口岸、鄂西渝东国际门户机场。</p>
    </div>  
  </div><br><br>

  <h2>我们的城————宜昌</h2>
  <div class="div4">
    <video src="视频.mov" controls></video>
  </div>     
<br><br>
  <div class="footer">
    <p>·宜居宜旅宜昌情，游都净都文明都·</p>
  </div>
            
    
        
       
          
          
        

</div> 
</body>
</html>