软工第二次作业-模仿网页

原网站：【小红书】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.

其他代码过长，改日上传百度云

软工第二次作业-模仿网页

猜你喜欢