西湖闲游

公园2007年九月一日,出差于杭州,闲暇之余,游玩于西湖之畔。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的关于西湖旅游路线的网页代码模板,供您参考: ```html <!DOCTYPE html> <html> <head> <title>西湖旅游路线</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 样式表 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f2f2f2; padding: 20px; text-align: center; } h1 { margin: 0; font-size: 36px; color: #333; } nav { background-color: #333; color: #fff; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; font-size: 18px; padding: 10px; border-radius: 5px; } nav a:hover { background-color: #fff; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } .card { max-width: 350px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.8s; cursor: pointer; } .card:hover { transform: scale(1.05); } .card img { width: 100%; height: 200px; object-fit: cover; } .card h2 { margin: 10px 0; font-size: 24px; color: #333; } .card p { margin: 0; font-size: 16px; color: #666; line-height: 1.5; padding: 10px; background-color: #f2f2f2; } .card a { display: block; margin-top: 10px; padding: 10px; background-color: #333; color: #fff; text-align: center; text-decoration: none; border-radius: 5px; } .card a:hover { background-color: #fff; color: #333; } </style> </head> <body> <header> <h1>西湖旅游路线</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">西湖简介</a></li> <li><a href="#">旅游路线</a></li> <li><a href="#">交通指南</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <div class="container"> <div class="card"> <img src="img/1.jpg" alt="景点1"> <h2>景点1</h2> <p>这里是景点1的介绍,可以包括历史背景、地理特点、文化内涵等内容。</p> <a href="#">查看详情</a> </div> <div class="card"> <img src="img/2.jpg" alt="景点2"> <h2>景点2</h2> <p>这里是景点2的介绍,可以包括历史背景、地理特点、文化内涵等内容。</p> <a href="#">查看详情</a> </div> <div class="card"> <img src="img/3.jpg" alt="景点3"> <h2>景点3</h2> <p>这里是景点3的介绍,可以包括历史背景、地理特点、文化内涵等内容。</p> <a href="#">查看详情</a> </div> <div class="card"> <img src="img/4.jpg" alt="景点4"> <h2>景点4</h2> <p>这里是景点4的介绍,可以包括历史背景、地理特点、文化内涵等内容。</p> <a href="#">查看详情</a> </div> <div class="card"> <img src="img/5.jpg" alt="景点5"> <h2>景点5</h2> <p>这里是景点5的介绍,可以包括历史背景、地理特点、文化内涵等内容。</p> <a href="#">查看详情</a> </div> <div class="card"> <img src="img/6.jpg" alt="景点6"> <h2>景点6</h2> <p>这里是景点6的介绍,可以包括历史背景、地理特点、文化内涵等内容。</p> <a href="#">查看详情</a> </div> </div> </body> </html> ``` 注意,这只是一个基础模板,您还需要根据您的需要进行修改和调整。另外,您需要将模板中的图片路径和链接地址替换为您自己的实际路径和地址。希望这个模板能够对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值