1讲项目实战banner和nav布局
2015-06-06 13:12
459 查看
#1讲项目实战banner和nav布局
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<meta name="author" content="李明杰">
<meta name="keywords" content="湖南海外旅游有限公司 湖南长沙最好旅行社 湖南海外旅行社 长沙旅行社排名">
<meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社，连续三年评为全国百强旅行社，国家特许经营出境 游组团社，长沙从事旅游业务最早、综合实力最强的旅游公司，主营出境旅游、国内旅游、入 境旅游、会议展览。">
<title>湖南海外旅游</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#Top{width:100%;height:149px;background:url("images/headbg.jpg");}/*背景图片headbg平铺满整个Top盒子*/
#Top .head{width:1000px;height:30px;margin:0px auto;/*head水平居中*/font-size:13px;font-family:"微软雅黑";color:#666;line-height:30px;}
#Top .head span{color:#e20076;font-weight:bold;padding:0px 4px;}
#Top .head a{color:#666;text-decoration:none;font-weight:bold;padding:0px 5px;}
#Top .head a:hover{color:#e20076;}
#header {height:70px;width:1000px;margin:0px auto;}
#header .banner{width:221px;height:44px;float:left;padding-top:14px;}
#header .logo{width:510px;height:70px;float:left;line-height:70px;font-size:16px;font-family:"微软雅黑";padding-left:80px;}
#header .logo a{font-weight:bold;text-decoration:none;color:#000;padding:0px 20px;float:left}
#header .logo a:hover{color:#e20076;}
#header .search{width:180px;height:35px;float:right;padding-top:18px;position:relative;}
#header .search input.txt{width:140px;height:23px;border:1px solid #e1e1e1;font-size:12px;color:#999;text-indent:10px;position:absolute;left:0px;top:20px;}
#header .search input.but{width:26px;height:25px;background:url('images/sosoh.jpg');border:0px;position:absolute;left:141px;top:20px;}
</style>
</head>
<body>
<div id="Top">
<!-- 头部信息开始 -->
<div class="head"><img src="images/cart.png" align="absmiddle"/> 全省免费服务热线： <span>96556</span> <span>0731-84635555</span>旅行社同行热线：<span>0731-84402588</span> <a href="#">登陆</a><a href="#">注册</a>
</div>
<!-- 头部信息结束 -->
<!-- banner开始 -->
<div id="header">
<div class="banner"><a href="#"><img src="images/logo.png"/></a></div>
<div class="logo">
<a href="#">首 页</a>
<a href="#">出境游</a>
<a href="#">国内游</a>
<a href="#">特价游</a>
<a href="#">签 证</a>
</div>
<div class="search">
<form>
<input type="text" class="txt" value="输入目的地" />
<input type="submit" class="but" value=""/>
</form>
</div>
</div>
<!-- banner结束 -->
</div>
<!--整站建设步骤如下：
1.构建一个宽度100% 高度149px 这样一个长方形，为了保证浏览器的兼容，我们加了*｛margin:0px;padding:0px;｝Top样式中的宽度100%也可以不写，因为浏览器已给出默认为100%宽。
2.给个长方形盒子，添加一个背景图片，背景图片默认的会沿着水平方向平铺
3.Top盒子里头部信息的构建 head里假如图片标签cart图像
4.如何控制图片和文字对齐方式在垂直方向居中，控制文字的样式。单独控制某些文字可以加span标准单独控制样式。
5.a标签特性，如何控制a标签的样式，去除标签自身的样式并重新定义，a标签的一个伪类a：hover。
6.构建header盒子，设置居中，在里面构建三个盒子，设置三个盒子的浮动定位，
7.制作导航，提到了a标签做导航布局时候各个标签间会有一个空隙的兼容问题（浮动）来解决。
8.制作站内搜索部分，构建两个盒子 ，
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
var d_Value=$(".search input.txt").val();// 获取到它的默认值
//获取焦点时，即鼠标点击到输入框时，将文本框清空内容
$(".search input.txt").focus(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点
//$(this)等同于我们的$(".search input.txt")
if($(this).val()==d_Value){//如果文本框值为默认值"输入目的地点"，则重新赋值文本框内容为空
$(this).val("");
}
});
//失去焦点时
$(".search input.txt").blur(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点
//$(this)等同于我们的$(".search input.txt")
if($(this).val()==""){//如果值为空，则赋值为默认值"输入目的地点"
$(this).val(d_Value);
}
});
</script>
</body>
</html>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<meta name="author" content="李明杰">
<meta name="keywords" content="湖南海外旅游有限公司 湖南长沙最好旅行社 湖南海外旅行社 长沙旅行社排名">
<meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社，连续三年评为全国百强旅行社，国家特许经营出境 游组团社，长沙从事旅游业务最早、综合实力最强的旅游公司，主营出境旅游、国内旅游、入 境旅游、会议展览。">
<title>湖南海外旅游</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#Top{width:100%;height:149px;background:url("images/headbg.jpg");}/*背景图片headbg平铺满整个Top盒子*/
#Top .head{width:1000px;height:30px;margin:0px auto;/*head水平居中*/font-size:13px;font-family:"微软雅黑";color:#666;line-height:30px;}
#Top .head span{color:#e20076;font-weight:bold;padding:0px 4px;}
#Top .head a{color:#666;text-decoration:none;font-weight:bold;padding:0px 5px;}
#Top .head a:hover{color:#e20076;}
#header {height:70px;width:1000px;margin:0px auto;}
#header .banner{width:221px;height:44px;float:left;padding-top:14px;}
#header .logo{width:510px;height:70px;float:left;line-height:70px;font-size:16px;font-family:"微软雅黑";padding-left:80px;}
#header .logo a{font-weight:bold;text-decoration:none;color:#000;padding:0px 20px;float:left}
#header .logo a:hover{color:#e20076;}
#header .search{width:180px;height:35px;float:right;padding-top:18px;position:relative;}
#header .search input.txt{width:140px;height:23px;border:1px solid #e1e1e1;font-size:12px;color:#999;text-indent:10px;position:absolute;left:0px;top:20px;}
#header .search input.but{width:26px;height:25px;background:url('images/sosoh.jpg');border:0px;position:absolute;left:141px;top:20px;}
</style>
</head>
<body>
<div id="Top">
<!-- 头部信息开始 -->
<div class="head"><img src="images/cart.png" align="absmiddle"/> 全省免费服务热线： <span>96556</span> <span>0731-84635555</span>旅行社同行热线：<span>0731-84402588</span> <a href="#">登陆</a><a href="#">注册</a>
</div>
<!-- 头部信息结束 -->
<!-- banner开始 -->
<div id="header">
<div class="banner"><a href="#"><img src="images/logo.png"/></a></div>
<div class="logo">
<a href="#">首 页</a>
<a href="#">出境游</a>
<a href="#">国内游</a>
<a href="#">特价游</a>
<a href="#">签 证</a>
</div>
<div class="search">
<form>
<input type="text" class="txt" value="输入目的地" />
<input type="submit" class="but" value=""/>
</form>
</div>
</div>
<!-- banner结束 -->
</div>
<!--整站建设步骤如下：
1.构建一个宽度100% 高度149px 这样一个长方形，为了保证浏览器的兼容，我们加了*｛margin:0px;padding:0px;｝Top样式中的宽度100%也可以不写，因为浏览器已给出默认为100%宽。
2.给个长方形盒子，添加一个背景图片，背景图片默认的会沿着水平方向平铺
3.Top盒子里头部信息的构建 head里假如图片标签cart图像
4.如何控制图片和文字对齐方式在垂直方向居中，控制文字的样式。单独控制某些文字可以加span标准单独控制样式。
5.a标签特性，如何控制a标签的样式，去除标签自身的样式并重新定义，a标签的一个伪类a：hover。
6.构建header盒子，设置居中，在里面构建三个盒子，设置三个盒子的浮动定位，
7.制作导航，提到了a标签做导航布局时候各个标签间会有一个空隙的兼容问题（浮动）来解决。
8.制作站内搜索部分，构建两个盒子 ，
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
var d_Value=$(".search input.txt").val();// 获取到它的默认值
//获取焦点时，即鼠标点击到输入框时，将文本框清空内容
$(".search input.txt").focus(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点
//$(this)等同于我们的$(".search input.txt")
if($(this).val()==d_Value){//如果文本框值为默认值"输入目的地点"，则重新赋值文本框内容为空
$(this).val("");
}
});
//失去焦点时
$(".search input.txt").blur(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点
//$(this)等同于我们的$(".search input.txt")
if($(this).val()==""){//如果值为空，则赋值为默认值"输入目的地点"
$(this).val(d_Value);
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐