上机练习（实践作业）

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

陈韵涵

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

阅读量306

点赞数 8

文章标签： css javascript 前端

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

版权

<!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: 65%;
        margin: 0 auto;
    }
    
/* 按钮 */
    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:rgb(204, 204, 204);
  position:fixed;
  top: 0;
  width:65%;
}
li {
  float:left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 35px;
  text-decoration: none;
}
li a:hover{
  background-color: #888484;
}

/* 大图片 */

/* 小图片 */
.column {
  float: left;
  width: 27%;
  padding: 15px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}



  
    </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><br> 
            <img src="绿白色江南水乡照片个人分享中文明信片 - 1.png" alt="" width="500px">

            <div class="row">
            <div class="column">
              <h2>Column</h2>
              <img src="绿白色江南水乡照片个人分享中文明信片 - 2.png" alt="" width="100px">
             </div>
            
            <div class="column">
                <h2>Column</h2>
                <img src="绿白色江南水乡照片个人分享中文明信片 - 2.png" alt="" width="100px">
               </div>
            
            <div class="column">
                <h2>Column</h2>
                <img src="绿白色江南水乡照片个人分享中文明信片 - 2.png" alt="" width="100px">
               </div>
          </div>

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