<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>美图·视频</title>
<link rel="stylesheet" type="text/css" href="css/video_img.css"/>
</head>
<body>
<!-- 第一行 -->
<div class="line-1">
<!-- 第一行左侧写logo -->
<div class="line-1-left">
<img src="img/logo.png"/>
</div>
<div class="line-1-right">
<!-- 右侧的顶部 -->
<form action="#" method="">
<div class="right-top">
<div class="links">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
</div>
<div class="input-search">
<input type="text" name="key" id="search-key" placeholder="请输入你要搜索的内容"/>
<button type="button" id="search-btn">搜索</button>
</div>
</div>
</form>
<div class="right-bottom">
<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>
<li>
<a href="#">游玩贴士</a>
</li>
<li>
<a href="#">帮助中心</a>
</li>
<li>
<a href="#">在线调查</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 第二行 放图片-->
<div class="line-2">
<div class="line-2-box">
<div class="line-2-box-info">
<h1>视频·美图</h1>
<p>通过视频和美丽的图片了解南龛山风景区</p>
</div>
</div>
</div>
<!-- 第三行 -->
<div class="line-3">
<span>当前位置:</span>
<a href="#">首页</a>
>
<a href="#" class="current">视频·美图</a>
</div>
<!-- 第四行 -->
<div class="line-4">
<span id="xian">|</span>
<span id="title">视频·美图</span>
</div>
<!-- 第五行 -->
<div class="line-5">
<div class="line-5-left">
<div class="line-5-list">
<ul>
<li class="aa">
<a href="#">美图欣赏</a>
</li>
<li>
<a href="#">视频欣赏</a>
</li>
</ul>
</div>
</div>
<div class="line-5-right">
<ul class="video_list">
<li>
<a href="#">
<img src="img/v_img1.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img2.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img3.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img4.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img5.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img6.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img7.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img8.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
<li>
<a href="#">
<img src="img/v_img9.png" class="hover"/>
<span class="shadowbox">下龙</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
刚学完html5和css
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
