蓝旭工作室面试总结

作品：旅游网站模仿
用时：10h
蓝旭工作室面试总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兔子旅游官网</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
.top {
	height:80px;
}
.icon{
	float:left;}
/*.top .up-l{
	float:left;
	width:100px;
	height:80px;
	background-color:pink;
	font-size:12px;
	text-align:center;
	line-height:80px;/*垂直居中令行高等于父盒子高
	}*//*注释不可包含*/
	.nav {
	width:700px;
	background:#ECF4F7;
	margin:0 ;
	overflow:hidden;
	text-align:center;
	font-size:16px;
	font-family:"微软雅黑";
	color:#FFF;
	line-height:60px;
}
.img {
	position:absolute;
	bottom:30px;
	right:50px;
}
.icon {
	overflow:hidden;
	margin-left:200px;
}
/*.top .icon{
		float:left;
			}
	.icon a{
		display:block;
		width:60px;
		height:80px;
		color:#666;
		text-decoration:none;
		}*/
	.nav ul {
	overflow:hidden;
}
.nav ul li {
	float:left;
	width:100px;
}
.nav ul li a {
	display:block;
	width:100px;
	height:60px;
	color:#666;
	text-decoration:none;
}
.nav ul li a:hover {
	background-color:#C0E4DF;
	color:#A7ACB1;}

.content {
	height:400px;
	background:url(bg.jpg) no-repeat center center scroll;
}
/*.content .input{
		height:80px;
		width:400px;
		margin:auto;
		background-color:rgba(174 238 238}*//*背景图压盖背景色 背景色无法显露！！！*/
		/*修改如下>>>>>>>用绝对定位调整位置<<<<<<<*/
.input {
	height:80px;
	padding:5px 30px;
	background-color:#CCDBDB;
	opacity:0.8;
	position:absolute;
	left:40px;
	bottom:300px;
	border-radius:4px;
}
.main .left {
	float:left;
	width:250px;
	margin:20px 10px 0 200px;
	background-color:#ECF0EF;
}
.left .box1 {
	width:220px;
	margin:5px 10px;
}
/*.left .box1 .box1-1{
	width:317px;
	height:318px;
	margin:50px;
	background-image:url(9167f70125da53678fd537bbcbcdec67.png);
	background-repeat:no-repeat;
	background-position:-437px -438px;}*//*已学知识无法控制精灵图大小和位置*/
	/*>>>>>>解决方法-只能用图片做<<<<<<<<*/
.left .box1 .box1-1 {
	width:80px;
	height:80px;
	margin-right:10px;
	float:left;/*！！！！！！！！！用浮动让图片和文字同一排！！！！！！！！！！！*/
}
.word p {
	font-size:12px;
	color:#999;
}
.word .a {
	font-size:14px;
	color:#333;
	font-weight:bold;
}
.box1-2 {/*内墙法 清除浮动的影响*/
	height:25px;
	border-bottom:1px solid #999;
}
#box1-2 {
	border-bottom-color:#DBDBDB;
}
/*.box1-1 p {
float:left;
	/*display:tabel-cell; vertical-align:middle;
}*/
.main .right {
	float:right;
	margin-right:200px;
	margin-bottom:20px;
	width:700px;
}
.right .box-img {
	float:left;
	margin-right:20px;
}
.box1 a{
	display:block;
	text-decoration:none;
	}

.box1 a:hover .a{
	color:#018781;}
.box2-1{
	width:700px;
	margin-top:20px;
	overflow:hidden;}
.word1 {
	color:#666;}
.word1 span{
	font-size:18px;
	font-weight:bold;
	}
.box2 a{
	display:block;
	text-decoration:none;
	}
.box2 a:hover span{
	color:#4BA5FE;}
.box2 a:hover{
	background-color:#F0F7F9;}
/*.word1 a:link{
	color:#333;
	text-decoration:none;
	}
.word1 a:visited{
	color:#333;
	text-decoration:none;
	}
.word1 a:hover{
	color:#39F;
	text-decoration:none;
	background-color:#DDF1FB;
	}*/
.box-x{
	clear:both;}
.bottom{
	clear:both;
	width:1383px;
	padding:20px 0;
	line-height:150%;
	background-color:#03559E;}
.bottom .up{
	margin:0 200px;}
.bottom a{
	text-decoration:none;
	font-size:14px;
	color:#CCC;
	}
.bottom a:hover{
	color:#FFF;}
</style>
</head>
<body>
<div class="top">
  <div class="icon"><img src="兔子.jpg" width="200px"/></div>
  <div class="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>
      <li><a href="#">社区</a></li>
      <li><a href="#">APP</a></li>
    </ul>
    <!--<div class="img1"><img src="icon.png" width="70px"/></div>--> 
    
  </div>
  <!--<div class="up-l">首页</div>
<div class="up-l">目的地</div>
<div class="up-l">旅游攻略</div>
<div class="up-l">旅行商城</div>
<div class="up-l">酒店</div>
<div class="up-l">社区</div>
<div class="up-l">APP</div>--> 
</div>
<div class="content"> </div>
<div class="input">
  <input type="radio" checked="checked" name="tr"/>
  全部
  <input type="radio" checked="checked" name="tr"/>
  酒店
  <input type="radio" checked="checked" name="tr"/>
  目的地
  <input type="radio" checked="checked" name="tr"/>
  商城
  <p>
    <input type="text" value="搜索目的地/攻略/酒店/特价旅游" style="width:400px;height:40px;border-radius:4px"/>
    <input type="button" value="搜索" style="width:40px;height:30px;background:#77BDF7;color:#FFF;border-radius:8px;"/>
  </p>
</div>
<div class="main">
  <div class="left">
    <div class="box1">
      <div class="box1-2" id="box1-2">
        <a href="#"><div class="box1-1"><img src="icon2_05.gif" width="80px"/></div>
        <div class="word">
          <p class="a">&nbsp;</p>
          <p class="a">首航</p>
          <p class="b">&nbsp; </p>
          <p class="b">兔子假期 安心之旅</p></a>
        </div>
        <div class="box1-2"> </div>
        <a href="#">
        <div class="box1-1"><img src="icon2_03.gif" width="80px"/></div>
        <div class="word">
          <p class="a">&nbsp;</p>
          <p class="a">跟班</p>
          <p class="b">&nbsp; </p>
          <p class="b">专车接送 落地无忧</p>
        </div></a>
        <div class="box1-2"> </div>
        <a href="#">
        <div class="box1-1"><img src="icon2_09.gif" width="80px"/></div>
        <div class="word">
          <p class="a">&nbsp;</p>
          <p class="a">导航</p>
          <p class="b">&nbsp; </p>
          <p class="b">线上向导 随时解答</p>
        </div></a>
        <div class="box1-2"> </div>
        <a href="#">
        <div class="box1-1"><img src="icon2_11.gif" width="80px"/></div>
        <div class="word">
          <p class="a">&nbsp;</p>
          <p class="a">自由行</p>
          <p class="b">&nbsp; </p>
          <p class="b">精选套餐 自由搭配</p>
        </div></a>
        <div class="box1-2"> </div>
        <a href="#">
        <div class="box1-1"><img src="icon2_13.gif" width="80px"/></div>
        <div class="word">
          <p class="a">&nbsp;</p>
          <p class="a">天气预报</p>
          <p class="b">&nbsp;</p>
          <p class="b">1小时内精准预报</p>
        </div></a>
        <div class="box1-2"> </div>
        <a href="#">
        <div class="box1-1"><img src="icon2_15.gif" width="80px"/></div>
        <div class="word">
          <p class="a">&nbsp;</p>
          <p class="a">游记</p>
          <p class="b">&nbsp;</p>
          <p class="b">随手记录美好回忆</p>
        </div></a>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="box2"><a href="#">
      <div class="box2-1">
        <div class="box-img"> <img src="01.PNG" width="200px"/> </div>
        <div class="word1"><span>济州岛｜在做梦的年纪谈一场与阳光的恋爱</span><br /><br />让我终于想起这趟旅行，翻出照片开始整理的契机居然是最近这连绵不绝的雨和太久没有见到的太阳。 看着窗外阴沉沉的天空，我翻出了 济州岛 向日葵花圃的照片，开始拾取那段温暖的时光。 ♬ BG...</div>
      </div>     </a><a href="#">
      <div class="box2-1">
        <div class="box-img"> <img src="2.PNG"  width="200px"/></div>
        <div class="word1"><span>印度尼西亚纪行 第五天：日惹-巴厘岛 巴厘岛</span><br /><br />今天早上起的早，要去坐 日惹 到 巴厘岛 的飞机，机票在国内出发前已经订好了，航班飞行需要1小时20分钟，8:15出发，10:35到达，因为 巴厘岛 属于小巽他群岛，位于东八区(即 北京 时间)，和...</div>
      </div></a><a href="#">
      <div class="box2-1">
        <div class="box-img"><img src="3.PNG" width="200px"/></div>
        <div class="word1"><span>滑翔伞+ATV+沙巴大学+水上清真寺（纯玩两</span><br /><br />纪念第一次独自出国游游记 每次出去游玩一定会用到马蜂窝APP，我觉得它真的很赞，在这次出游中其他蜂友的攻略解答同样帮了我很多 机票 本来没有打算去 亚庇 ，但是一不小心在亚航微信公众号...</div></div>
        </a><a href="#">
        <div class="box2-1">
          <div class="box-img"><img src="4.PNG" width="200px"/></div>
          <div class="word1"><span> 南非 | 种草指【南】【非】去不可</span><br /><br />非洲的精华浓缩在这里 ▼ 这座城市风很大，孤独的人总是晚回家。 在 北京 的生活教会我与时间独处， 更加珍视自己内心的选择，不再盲从， ▲ 正如心中种草已久的这个国家，不再顺从于殖民者...</div>
        </div>
        </a><a href="#">
        <div class="box2-1">
          <div class="box-img"> <img src="5.PNG" width="200px"/></div>
      		<div class="word1"><span>沐浴阳光和爱—泰有爱 </span><br /><br />一个懒人的第一篇流水账形式的游记，终于要提笔了，也算是给自己留个纪念。 这算得上是效率最高的一次旅游计划，2月6号还在纠结走318还是去 泰国 ，最后鉴于318需耗费时间比较长，跟 川西 会...</div>
        </div>
        </a><a href="#">
        <div class="box2-1">
          <div class="box-img"><img src="6.PNG" width="200px"/></div>
          <div class="word1"><span>初访武汉，迷醉在建筑里，期待在樱花季</span><br /><br /> 初访武汉，迷醉在建筑里，期待在樱花季
            关于武汉的记忆 到现在，我的脑海里还记得那么几句古诗："故人西辞黄鹤楼，烟花三月下 扬州 。""昔人已乘黄鹤去，此地空余黄鹤楼。黄鹤一去不复返，白云千载空悠悠。""一桥飞架南北，...</div>
        </div></a></div> </div>  

<div class="bottom">
<div class="up"><a href="#">马可波罗</a>&nbsp;<a href="#">Onlylady女人志</a>&nbsp;<a href="#">艺龙旅游</a>&nbsp;<a href="#">指南欣欣旅游</a>&nbsp;<a href="#">网户外运动</a>&nbsp;<a href="#">365音乐网</a>&nbsp;<a href="#">爱问共享资料旅游网</a>&nbsp;<a href="#">小说网学习啦</a>&nbsp;<a href="#">游多多自助游问答</a>&nbsp;<a href="#">火车时刻表</a>&nbsp;<a href="#">驴妈妈旅游网</a>&nbsp;<a href="#">好豆美食网</a>&nbsp;<a href="#">二手车</a>&nbsp;<a href="#">绿野户外途牛旅游网</a>&nbsp;<a href="#">图吧</a>&nbsp;<a href="#">SUV联合越野</a>&nbsp;<a href="#">手机浏览器</a>&nbsp;<a href="#">上海地图</a>&nbsp;<a href="#">天气预报查询</a>&nbsp;<a href="#">同程旅游火车票</a>&nbsp;<a href="#">YunOS</a>&nbsp;<a href="#">携程旅游</a>&nbsp;<a href="#">锦江旅游</a>&nbsp;<a href="#">火车时刻表</a>&nbsp;<a href="#">TripAdvisor</a>&nbsp;<a href="#">天巡网</a>&nbsp;<a href="#">短租房</a>&nbsp;<a href="#">租租车</a>&nbsp;<a href="#">更多友情链接>></a></div>
</div>
</body>
</html>
缺点：
1、页面缩小出现排版错乱问题
（div用margin控制导致搜索框用绝对定位导致）
2、搜索框默认文字点击输入后没有消失功能
3、提问内容居中的方法没答对（只想着div忘记了文本的居中啊啊！！）
4、没有把样式分在另一个文件link过去不方便
解决：
1、解决排版问题 > https://blog.****.net/hongxiaoshuang/article/details/52830347
(搜索框偏离问题>父级用相对定位-子级以父级位置进行定位）
2、解决默认文字问题 > https://blog.****.net/pspgbhu/article/details/51465514
在search里的 placeholder属性里写默认文字
3、居中问题！> https://blog.****.net/mrwangweijin/article/details/79760884
蓝旭工作室面试总结

相关推荐
