原网站:【小红书】https://www.xiaohongshu.com/?_at=1553870493015
模仿网页(码云):https://gitee.com/cytcoding/codes/saq29lf8yto4ewr36chxp19
模仿网页链接:
一、作业内容
1.原网页截图
2.模仿网页实现
3.注释:
(1)原网页导航栏有较多的关联页,模仿网页中只写了一个
(2)借鉴了原网页中的布局格式
原网页通过div标签进行网页的修饰,模仿页面也借鉴了这种方式修饰
(3)原网页中图片滚动,模仿的则是选择了文字的滑动
二、代码具体分析
1.亮点:
(1)因为做的是旅游相关网页,添加了搜索栏,直接跳转到百度
(2)添加了 <div> 元素中滚动条的水平偏移:
(3)实现了简单动画:自动幻灯片
(4)弥补上次简历中没添加地图的遗憾
这次添加了地图的链接等
2.不足之处:
(1)没有实现将搜索框中键入的数据传输到百度
(2)对于鼠标经过图标时想展示图片没能成功,只是改变了背景颜色
三、作业要求实现
1.实现其中的不同终端下的响应式布局效果:
以及相关css文件
2.实现简单的动画效果:
(1)添加了 <div> 元素中滚动条的水平移动
(2)自动幻灯片播放
3.兼容Chrome、Safari、Firefox等主流浏览器:
(1)不同浏览器对HTML标记所具有的内外边距属性具有不同的定义,应该在相应的CSS部分加入以下CSS代码:
*{margin:0px;padding:0px;}因此,所有标记的内外边距被统一起来。
(2)当有多张图片需要排在一行时,如果浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display:inline”项即可。
四、HTML代码:
<!DOCTYPE HTML> <html> <head> <title>QingHai</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="css/slider.css" /> <script type="text/javascript" src="js/modernizr.custom.28468.js"></script> <script type="text/javascript" src="js/jquery.cslider.js"></script> <script type="text/javascript"> $(function() { $('#da-slider').cslider({autoplay : true,bgincrement : 450}); } ); </script> <!---//strat-slider----> <!-- start top_js_button --> <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> </head> <body> <div class="header_btm"> <div class="wrap"> <div class="header_sub"> <div class="h_menu"> <ul> <li class="active"><a href="index.html">首页</a></li> <li><a href="index1.html">联系我们</a></li> </ul> </div> <div class="h_search"> <form action="http://www.baidu.com"method="get"> <input type="text" value="" placeholder="search something..."> <input type="submit" value=""> </form> </div> <script type="text/javascript"> $(".menu,.search").hide(); $("#menu").click(function(){ $(".menu").toggle(); $(".search").hide(); $("#search").removeClass("active"); $("#menu").toggleClass("active"); }); $("#search").click(function(){ $(".search").toggle(); $(".menu").hide(); $("#menu").removeClass("active"); $("#search").toggleClass("active"); $(".text").focus(); }); </script> <script type="text/javascript" src="js/script.js"></script> <div class="clear"></div> <div class="clear"></div> </div> </div> </div> <!-- start slider --> <div class="slider_bg"> <div class="wrap"> <div class="slider"> <!---start-da-slider-----> <div id="da-slider" class="da-slider"> <div class="da-slide"> <h2>欢迎来到大美青海</h2> <p>青海有太多梦中的景象,金黄的花海、耀眼的雪山、似海的碧水,恍然间,以为自己走进一场梦境。</p> </div> <div class="da-slide"> <h2>QingHai</h2> <p>一个水天一色高颜值的高原圣湖,一个被称为中国最美湖泊的地方</p> </div> <div class="da-slide"> <h2>青海湖</h2> <p>牛羊成群,水草丰美,放眼望去那延绵近百公里黄灿灿的油菜花伴随着碧蓝的湖面,在高原深蓝的天空映衬下美得太不像话。</p> </div> <div class="da-slide"> <h2>Hoh Xil</h2> <p>可 可 西 里——在蒙语中意为 “青色的山梁”,音译为“美 丽 的 少 女”</p> </div> <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> </div> <!---//End-da-slider-----> </div> </div> </div> <!-- start main --> <div class="wrap"> <div class="main"> <div class="main_text"> <h2>在“世界屋脊”上看天边云卷云舒</h2> <p class="para">在天气炎热的7月,门源的油菜花刚刚绚烂绽放,唐古拉山脉刚迎来第一缕曙光,可可西里的藏羚羊在自由奔跑....</p> </div> </div> </div> <!-- start main_bg --> <div class="main_bg"> <div class="wrap"> <div class="main content_top"> <!-- start span_of_3 --> <div class="span_of_3"> <div class="span1_of_3"> <!--<a href="details.html">--><img src="images/pic01.gif" alt=""/></a> <div class="span1_of_3_text"> <h3>出行建议选择火车哦</h3> <p>青海,一面时冰川雪岭、一面是草原花海;这里有湖畔的宁静,还有草原的牧歌。沿途的风光总给你无限遐想!而且, 每年的7月中旬,正是青海油菜花的最佳开放时期,此时去青海,大片绚烂夺目的金黄色花海就在眼前!青海有着金黄的花海、耀眼的雪山、似海的碧水。 同时青海也是多民族聚居区,生活着汉族、藏族、回族、蒙古族等民族,民俗风情也别具一格。 </p> </div> <div class="ser_btn"> <a class="button ser_btn1" href="http://www.sohu.com/a/153551877_99926124"> More</a> </div> </div> <div class="span1_of_3"> <!--<a href="details.html">--><img src="images/pic02.jpg" alt=""></a> <div class="span1_of_3_text"> <h3>诱人爽口——羊肠面</h3> <p>它以羊肠为主料,并伴以热汤切面共食。做法是将羊的大小肠管洗净,肠壁油不剔剥,装入佐料的糊状豆面粉,扎口煮熟,并在煮羊肠的汤内投入已煮熟的萝卜小丁、葱蒜丁混合的梢子汤。羊肠面面条悠长爽口,夏天吃凉冬日可吃热,实属实惠之小吃。 </p> </div> <div class="ser_btn"> <a class="button ser_btn1" href="https://baike.sogou.com/v72284721.htm?fromTitle=羊肠面">More</a> </div> </div> <div class="span1_of_3"> <!-- <a href="details.html">--><img src="images/pic03.jpg" alt=""></a> <div class="span1_of_3_text"> <h3><!--<a href="details.html">-->“黄金泄千里”</h3> <p>门源的油菜花种植范围西起浩门河畔的青石嘴,东到大通河畔的玉隆滩,北到与甘肃省交界的冷龙岭,南至高峻的大坂山, 绵延数十公里。夏日时节,走进青海门源回族自治县,恰如走进一幅浑然天成的油画。远处的祁连雪山、近处的蓝天白云与地上的金黄形成鲜明对比,耀眼夺目。</p> </div> <div class="ser_btn"> <a class="button ser_btn1" href="http://www.mafengwo.cn/poi/6328088.html">More</a> </div> </div> <div class="clear"></div> </div> <!-- --> <div class="span_of_3"> <div class="span1_of_3"> <!--<a href="details.html">--><img src="images/pic04.jpg" alt=""></a> <div class="span1_of_3_text"> <h3>酿皮子</h3> <p>是西北独特的风味小吃之一,这种小吃味美爽口。既有菜又有饭,同时又是“快餐”。食用时,要将涮好的一张张酿皮子切成细条,上面再放上几块蒸熟的,切成薄片的面筋, 浇上佐料,其色悦目,香味诱人,其特点是色泽橙黄而透明,吃起来柔软又有韧劲,风味特佳。</p> </div> <div class="ser_btn"> <a class="button ser_btn1" href="https://baike.sogou.com/v329267.htm?fromTitle=酿皮子">More</a> </div> </div> <div class="span1_of_3"> <img src="images/pic05.jpg" alt=""> <!--<a href="details.html"><img src="images/pic5.jpg" alt=""></a>--> <div class="span1_of_3_text"> <h3>在那人迹罕至的地方</h3> <p>蒙语意为“美丽的少女”,是目前世界上原始生态环境保存最完美的地区之一,也是目前我们建成的面积最大,海拔最高,野生动物资源最为丰富的自然保护区之一。可可西里气候严酷,自然条件恶劣,人类无法长期居住,被誉为“生命的禁区”。然而正因为如此,给高原野生动物创造了得天独厚的生存条件,成为“野生动物的乐园”。 </p> </div> <div class="ser_btn"> <a class="button ser_btn1" href="http://www.mayi.com/all_sengl/t_419700/">More</a> </div> </div> <div class="span1_of_3"> <img src="images/pic06.jpg" alt=""> <div class="span1_of_3_text"> <h3>手抓羊肉</h3> <p>是西北菜中一道具有特色的菜品,相传有近千年的历史,原以手抓食用而得名。 它的吃法有三种,即热吃(切片后上笼蒸热蘸三合油)、冷吃(切片后直接蘸精盐)、煎吃(用平底锅煎热,边煎边吃)。 西宁手抓羊肉肉赤膘白,肥而不腻,油润肉酥,质嫩滑软,平常不是特别喜欢羊肉的也可以尝试一下,没有很重的羊膻味。 </p> </div> <div class="ser_btn"> <a class="button ser_btn1" href="https://baike.sogou.com/v251786.htm?fromTitle=手抓羊肉">More</a> </div> </div> <div class="clear"></div> </div> <!-- end grids_of_3 --> </div> </div> </div> <div class="wrap"> <ul id="flexiselDemo3"> <li><img src="images/client0.jpg" /></li> <li><img src="images/c11.jpg" /></li> <li><img src="images/c12.jpg" /></li> <li><img src="images/c13.jpg" /></li> <li><img src="images/c14.jpg" /></li> <li><img src="images/c15.jpg" /></li> <li><img src="images/c16.jpg" /></li> </ul> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo1").flexisel(); $("#flexiselDemo2").flexisel({ enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); $("#flexiselDemo3").flexisel({ visibleItems: 5, animationSpeed: 1000, autoPlay: true, autoPlaySpeed: 3000, pauseOnHover: true, enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); }); </script> <script type="text/javascript" src="js/jquery.flexisel.js"></script> </div> <!-- start footer --> <div class="footer_bg"> <div class="wrap"> <div class="footer"> <!-- start span_of_4 --> <div class="span_of_4"> <div class="span1_of_4"> <p class="btm1 pin"><a href="http://map.sogou.com/#lq=%u9752%u6D77&where=12904375,4798687.5,13007625,4851062.5,0&page=1,10&c=11330796,4360375,6">QH, CN</a></p> </div> <div class="span1_of_4"> <p class="btm1 mail"><a href="https://www.cnblogs.com/cytcoding/">[email protected] </a></p> </div> <div class="span1_of_4"> <p class="call">0971-123456</p> </div> <div class="span1_of_4"> <p class="btm1 pin1"> <a:hover { background: url('../images/pic02.jpg') ;width:30px; height:30px}> QHUniversity</a:hover></p> </div> <div class="clear"></div> </div> </div> </div> </div> <!-- start footer --> <div class="footer_bg1"> <div class="wrap"> <div class="footer1"> <!-- scroll_top_btn --> <script type="text/javascript"> $(document).ready(function() { var defaults = { containerID: 'toTop', containerHoverID: 'toTopHover', scrollSpeed: 1200, easingType: 'linear' }; $().UItoTop({ easingType: 'easeOutQuart' }); }); </script> <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a> </div> </div> </body> </html>
ps.
其他代码过长,改日上传百度云