精华内容
下载资源
问答
  • web前端开发大作业
    千次阅读
    2021-04-01 19:25:29

    web 前端 大作业

    没有框架 也没有后端数据交互,就是静态页面而已. 只是最简单的html css js
    https://www.kdocs.cn/l/cuFeWBp7sK5h
    [金山文档] web 报告.docx

    链接:https://pan.baidu.com/s/1TXFK37S9cl1OAHIkHg3uIA
    提取码:zwd6
    复制这段内容后打开百度网盘手机App,操作更方便哦

    http://starplatinumora.top/
    在线查看
    添加链接描述

    代码

    https://gitee.com/starplatinum111/animals-web

    如果觉得好 可以在这里下载 让我搞点下载积分(¯﹃¯)(虽然我觉得这个作业确实没什么水平…)

    https://download.csdn.net/download/jonathan_joestar/16308850

    更多相关内容
  • Web前端大作业2.0.zip

    2021-04-03 19:29:15
    首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个...
  • Web前端期末大作业

    2020-12-17 08:53:32
    大学生网页设计大作业-以下5个网页设计制作作品自己任选: ...2.web网页大作业 3.学生期末网页大作业-6页面的网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高,但交选修作业就足够了。
  • 综合本课程所学知识,设计一个综合性网站符合Web标准(Div+CSS)的静态html网站作品。 1. 需要包含个人信息,网站需包含多个子栏目链接按钮(至少3个是有效的实际链接),每个子栏目必须有文字和图片等元素,不可以...
  • Web前端大作业.zip

    2021-12-22 20:42:31
    Web前端大作业.zip,Web前端大作业,XX学院XX专业学号1姓名2,index.html,js,carousel.js,html,about.html,buisiness.html,contact.html,pic,services.jpg,about1.png,about2.png,buisiness_banner.png,banner1.jpg,...
  • 主页设计布局是在网站的左上... 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片放到pic文件夹中,背景音乐放到music文件夹中。
  • web前端设计与开发期末作品/期末大作业,共有8个静态页面,主题是中华传统美食之旅,图片非常精美且诱人噢。
  • 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个...
  • 本项目是WEB前端课程的期末课程设计,采用了HTML和CSS编程,加了少量的JAVAscript代码,网站一共包含了10个页面,网站的类型是旅游网站,颜色主题是蓝色 可分享源码示例:pandas 是基于NumPy 的一种工具,该工具是...

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    前言

    Web前端开发期末大作业设计一个网站(包含10个网页结合了CSS样式和js)
    本项目是WEB前端课程的期末课程设计,采用了HTML和CSS编程,加了少量的JAVAscript代码,网站一共包含了10个页面,网站的类型是旅游网站,颜色主题是蓝色
    可分享源码

    提示:以下是本篇文章正文内容,下面案例可供参考

    一、期末作业要求

    示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

    二、旅游网站项目设计说明

    1.作品展示

    在这里插入图片描述

    网站首页

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.页面源代码

    代码如下(示例):
    首页代码(HTML)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>网站设计</title>
    	<style type="test/css">
    	*{margin:0px;padding:0px;}
    	</style>
    <script src="js/1.1.js" type="text/javascript"></script>  
      <script src="js/1.2.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/1.3.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/1.4.js" type="text/javascript" charset="utf-8"></script>
    
    
    	<link rel="stylesheet" type="text/css" href="Css/10.1.css">
    	<link rel="shortcut icon"  href="imgs/z2.png" />
    </head>
    
    		
    		<script type="text/javascript">
            $(function(){
                $('#ChinaMap').SVGMap({
    		    mapWidth: 900,       
    		    mapHeight: 396,
    		    strokeWidth: 1,      
    		    strokeColor: 'F9FCFE',  
    		    strokeHoverColor: 'd9d9d9', 
    		    stateInitColor: '',  
    		    stateHoverColor: 'ffffff',  
    		    stateDisabledColor: 'eeeeee', 
    		    showTip: true,      
    		    tipWidth: 280,      
    		    tipHeight: 110,     
    		    tipOuterH : 30,     
    		    tipOuterW : 30,     
    		});
            });
        </script>	
    <body>
    
    <div  id="div1">
    <div class="w1">
    <img src="imgs/p1.png" alt="网站name" width="600px" height="130px" >
    </div>
    <div>
    <form action="http://www.baidu.com/baidu" target="_blank">
    <input class=i1 type=text name=word size=65>
    <input class=i2 type="submit" value="搜索">
    </form>
     <iframe class="weather" name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=52&icon=1&num=3" width="130px" height="100px" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </div>
    </div>
    <div id="div2">
    
    <ul>
        <li><a href="#">首页</a></li>
    	<li><a href="file:///E:/学习资料/yangqiuyue/10.2游记.html" target="_blank">侠客攻略</a>
    	 <ul>
    	 <li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/yangqiuyue9.html" target="_blank">出行方案</a></li>
    	 <li><a href="#">排行榜</a></li>
    	 <li><a hfer="#">装备商城</a></li>
    	 </ul>
    	</li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.4%E6%99%AF%E7%82%B9%E4%BB%8B%E7%BB%8D.html" target="_blank">出行推荐</a>
    	<ul>
    	<li><a>机票</a></li>
    	<li><a>火车票</a></li>
    	<li><a>汽车票</a></li>
    	<li><a>轮船</a></li>
    	</ul>
    	</li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.6%E9%85%92%E5%BA%97.html" target="_blank">酒店</a><ul>
    	<li><a>机票</a></li>
    	<li><a>火车票</a></li>
    	<li><a>汽车票</a></li>
    	<li><a>轮船</a></li>
    	</ul></li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.10.html" target=_blank>个人中心</a></li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.9shoux.html" target="_blank">主题游</a><ul><li>网红打卡地</li>
    	<li><a>亲子游</a></li>
    	<li><a>主题公园</a></li>
    	<li><a>冬季相约</a></li>
    	<li><a>名胜古迹</a></li></ul></li>
        <li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.7%E5%90%8D%E5%AE%BF.html" target="_blank">联系我们</li>
       </ul>
      
    </div>
    <div id="div23">
    	<ul>
    	<li><img src="imgs/phone1.png" alt="电话"></a></li>
    	<li><img src="imgs/z1.png" alt="电话" width="50px" height="30px"></li>
    	<li><img src="imgs/h16.gif" alt="QQ" width="50px" height="30px">
    	<ul class="p8">
    	<li><img src="imgs/b3.jpg" alt="QQ" width="70px" height="50px"> </li>
        </ul>
        </li>
        </ul>
       </div>
    <div class="mofang">
        <div class="cube">
            <div class="front">
                <a href="javascript:void(0);" rel="nofollow">LOOK欢迎您</a>
            </div>
            <div class="back">
                <a href="javascript:void(0);" rel="nofollow">LOOK旅游网</a>
            </div>
            <div class="right">
                <a href="javascript:void(0);" rel="nofollow">出去康康嘿</a>
            </div>
            <div class="left">
                <a href="javascript:void(0);" rel="nofollow">世界那么大</a>
            </div>
            <div class="top">
                <a href="javascript:void(0);" rel="nofollow">行万里路</a>
            </div>
            <div class="xaimian">
                <a href="javascript:void(0);" rel="nofollow">加油</a>
            </div>
        </div>
    </div>
    <div id="div21">
    <ul>
    <li>
    <a href="#">
    处境游</a>
    </li>
    <li><a href="#">
    户外游</a>
    </li>
    <li><a href="#">
    亲子游</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>
    <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 id="div3">
    <div id="div31" >
    		<a id="a1" class="num">1</a>
    		<a id="a2" class="num">2</a>
    		<a id="a3" class="num">3</a>
    		<a id="a4" class="num">4</a>
    		<div id="photos" class="play">
    			  <img src="imgs/winter.jpg" alt="四川" width="1500px" height="450px">
    			  <img src="imgs/summer.jpg" alt="四川" width="1500px" height="450px" >
    			  <img src="imgs/spring.jpg" alt="四川" width="1500px" height="450px" >
    			  <img src="imgs/fall.jpg" alt="四川" width="1500px" height="450px" >
    			 
    		</div>
    		</div>
    
    
    <script type="text/javascript">
    function long(e){
    	var e=e||window.event;
    	e.target.style.paddingLeft="30px";
    }
    function short(e){
    	var e=e||window.event;
    	e.target.style.paddingLeft="12px";
    }
    </script>
    <ul class="menu">
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.7.html" onMouseOver="long()" onMouseOut="short()" target="_blank">精品线路</a></li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.8.html" onMouseOver="long()" onMouseOut="short()" tagret="_blank">人气推荐</a></li>
    	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">热门资讯</a></li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.5%E4%BE%A0%E5%AE%A2%E4%BE%A0%E5%AE%A2%E6%91%84%E5%BD%B1.html" target="_blankonMouseOver="long()" onMouseOut="short()">侠客摄影</a></li>
    	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">中国地图</a></li>
    	<li><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.3%E7%99%BB%E5%BD%95.html" target="_blank" onMouseOver="long()" onMouseOut="short()">用户登录</a></li>
    </ul>
    
    
    
    
    
    <div id="div4">
    
    <div id="div41">
    <p class=p4>---------精品线路<img src="imgs/y6.gif" alt="冒烟的水杯" width="80px" height="45px">---------</p>
    </div>
    
    <div id="div42">
    
    <div class=p6>
    <div id="div43">
    <span class=span1>01</span><h4 class=h6>冰雪盛宴</h4><p class=p5>冰雪九寨环线12-2月,避开旺季人群纷扰,独享冬日静谧九寨黄龙,撒欢毕棚沟,登达古冰川,两晚轻享九寨沟五星度假体验,打卡抖音同款华美达温泉酒店,冬游川西7日深度游!九寨黄龙、毕棚沟、达古冰川,还有三晚奢酒满足对冬日川西的所有幻想。</p>
    </div>
    <div id="div44">
    
    <img src="imgs/y7.jpg" alt="冰雪盛宴" width="380px" height="230px">
    <div class="animate-text">
    <h3><a href="#">点击去这里</a></h3>
    </div>
    </div>
    </div>
    
    <div id="div45">
    <ul>
    <li>
    <img src="imgs/y8.jpg" alt="丽江" width="380px" height="230px">
    <div class="animate-text">
    <h3>点击去这里</h3>
    </div>
    </li>
    <li>
       <span class=span1>02</span><h4 class=h6>丽江</h4><p class=p5>
      漫游丽江古城漫游丽江古城香格里拉秘境下午茶-泸沽湖轻旅拍-普达措国家公园轻徒步-
      朝圣松赞林寺转湖拉姆央措,香巴拉秘境6/7日慢游两晚轻享九寨沟五星度假体验,打卡抖音同款华美达温泉酒店,冬游川西7日深度游!
      </p>
    </li>
    <li>
     <span class=span1>03</span><h4 class=h6>九寨沟</h4><p class=p5>
      漫游丽江古城漫游丽江古城香格里拉秘境下午茶-泸沽湖轻旅拍-普达措国家公园轻徒步-
      朝圣松赞林寺转湖拉姆央措,香巴拉秘境6/7日慢游
      </p>	
    </li>
    <li>
    <img src="imgs/y9.jpg" alt="九寨沟" width="380px" height="230px">
    <div class="animate-text">
    <h3>点击去这里</h3>
    </div>
    </li>
    
    </ul>
    </div>
    </div>
    </div>
    </div>
    
    
    <div id="div5">
    <div class=b2>
    <h3><a href="file:///E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/yangqiuyue/10.9shoux.html" target="_blank">人气推荐</a></h3>
    </div>
    <ul class="title">
    <li>
    <a>自驾游</a>
    </li>
    <li>
    <a>周边游</a>
    
    </li>
    <li>
    <a>自己游</a>
    </li>
    </ul>
    
    <div>
    <ul class="picture">
    <li>
    <div class="b1">
    <div>
    <img src="imgs/y13.jpg" alt="" height="210px" width="165px">
    </div>
    <h4>探索昆明·City Walk</h4>
    </div>
    
    </li>
    
    <li>
    <div>
    <div>
    <img src="imgs/y10.jpg" alt="" height="210px" width="165px">
    </div>
    </div>
    </li>
    
    <li>
    <div>
    <div>
    <img src="imgs/y8.jpg" alt="" height="210px" width="165px">
    </div>
    </div>
    </li>
    
    
    <div id="div7">
      <span>世</span>
      <span>界</span>
      <span>那</span>
      <span>大</span>
      <span>!</span>
      <span>一</span>
      <span>起</span>
      <span>去</span>
      <span>Look</span>
      <span>!</span>
    </div>
    <div id="div9">
    <div class="t1">
    最新资讯
    </div>
    <ul>
    <li><a>厦门首个!集美获评国家全域旅游示范区!
    </a></li>
    <li><a>冰雪节、焰火秀、音乐节……厦门跨年精彩剧透,快戳→
    </a></li>
    <li><a>厦门今天气温有所上升 最高气温将升至21℃
    </a></li>
    <li><a>中马联合申遗:一次有意义的探索
    </a></li>
    <li><a>集美获评国家全域旅游示范区
    </a></li>
    <li><a>厦鼓航线新型客船亮相,带您惬意登琴岛
    </a></li>
    <li><a>2021年铁路春运临近 厦门火车站今起开始办理务工团体票
    </a></li>
    <li><a href="#">上新了!23国219件文物亮相厦门鼓浪屿</a></li>
    <li><a>冰雪节、焰火秀、音乐节……厦门跨年精彩剧透,快戳→
    </a></li>
    <li><a href="#">厦门今天气温有所上升 最高气温将升至21℃
    </a></li>
    <li><a href="#">中马联合申遗:一次有意义的探索
    </a></li>
    <li><a href="#">集美获评国家全域旅游示范区
    </a></li>
    <li><a href="#">厦鼓航线新型客船亮相,带您惬意登琴岛
    </a></li>
    </ul>
    </div>
    <div id="div10">
    <div class="o" class="map container" style="min-width: 800px;">
            <div id="stateTip" style="position: absolute;left: 100%;text-align: left;display: inline;z-index: 9;"></div>
            <div class="row col-lg-12 col-sm-12 col-xs-12 col-md-12">
              <div class="ditu col-lg-9 col-sm-9 col-xs-9 col-md-9" style="display: block;">
                
                <div class="wrap" class="h">
                    <div class="itemCon" style="float: left">
                        <div id="ChinaMap" style="margin: 100px;"></div>
                    </div>
                    <div id="mapTipContent" style="width: 800px;margin: 0 auto;display: none">
                    </div>
                </div>
              </div>
              
            </div>
          </div>
    </div>
    
    <pre>
    中西建筑
    文化融合<a href="#"><img src="imgs/v1.png" alt="" height="20px" width="15px"></a>
    </pre>
    </h4
    </div>
    </li>
    <li>
    <div>
    <div>
    <img src="imgs/t1.jpg" alt="圆1" ">
    </div>
    <h4>
    <pre>
    中西建筑
    文化融合<a href="#"><img src="imgs/v1.png" alt="" height="20px" width="15px"></a>
    </pre>
    </h4
    </div>
    </li>
    </ul>
    </div><div id="div6">
    <div class=z1>
    <P class=z5>LOOK旅游网</P>
    <ul class=z>
    <li>
    文旅宣传推广网站
    </li>
    <li>
    全国最好的旅游网站
    </li>
    <li>
    LOOK网络科技有限公司
    </li>
    </ul>
    <div class=z2>
    <img src="imgs/y17.jpg">
    </div>
    </div>
    <div id="z3">
    <p class=z6 align="left">WWW.VISITEDLOOK.COM</p>
    <ul class=z4>
    <li>四川概况 </li>
    <li>线路</li>
    <li>美食</li>
    <li>酒店</li>
    <li>购物</li>
    <li>交通</li>
    <li>会议展览</li>
    <li>旅游资讯</li>
    <li>全域推广</li>
    <li>旅游线路</li>
    <li>发现热点</li>
    <li>旅游攻略</li>
    <li>图片视频</li>
    <li>旅游贴士</li>
    <li>文旅局官方微博</li>
    </ul>
    </div>
    <div id="z7">
    <p>联系我们</p>
    <dl>
    <dt>
    邮箱:
    </dt>
       <dd>11111
    </dd>
    <dt>电话:
    </dt>
    <dd>222222
    </dd>
    </dl>
    </div>
    </div>
    </html>
    

    CSS样式代码

    body{margin:0px;padding:0px;background:rgb(147,180,234);overflow-x:hidden;}
    #div0{width:100%;height:2500px;position:absolute;}
    #div1{width:100%;height:100px;position:static;top:0px;z-index:100;background-image:url(../imgs/y24.jpg);}
    
    #div1>div:nth-child(1){margin-top:10px;margin-left:70px;}
    .weather{width:180px; height:150px;position:absolute;top:50px;left:950px;}
    #div2{width:100%;height:80px;background-color:rgb(0,43,75);position:absolute;top:100px;z-index:1000000;}
    #div21{width:100%;height:80px;background-color:rgb(0,43,75);position:absolute;top:630px;z-index:1;}
    #div2>ul:nth-child(2){position:absolute;right:110px;top:30px;}
    #div21{width:100%;height:80px;background-color:rgb(0,43,75);position:absolute;top:630px;z-index:10000;}
    #div2>ul:nth-child(2)>li>ul>li>img:hover{opacity:1;background:white;}
    #div2>ul:nth-child(2)>li>ul>li:hover{width:100px;}
    #div21>ul>li{float:left;color:white;list-style:none;margin:20px; }
    #div21>ul>li>a:hover{color:rgb(157,226,135);}
    #div21>ul>li>a{color:white;text-decoration:none }
    #div23{position:absolute;right:100px;top:100px;z-index:1000;}
    #div23>ul li{list-style:none;float:left;margin:15px;}
    #div23>ul>li>ul>li{display:none;}
    #div23>ul>li:hover>ul>li{display:inline-block;}
    #div21>ul>li>img{margin-top:-20px;}
    #div31{width:1510px;height:450px;float:left;margin:0 auto;
    z-index:-10;overflow:hidden;border:2px #000 solid;position:absolute;z-index:10000;}
    #div3{width:1510px;height:450px;position:absolute;top:176px;float:left;z-index:1000;}
    #div41{width:100%;height:100px;float:left;position:relative;
    z-index:2;border-radius:0px 0px 30px 30px;margin-top:10px;}
    .p4{font-size:50px;text-align:center;margin-top:8px;font-weight:800;}
    #div4{background-image:url(../imgs/y24.jpg);width:100%;height:630px;position:absolute;top:520px;float:left;opacity:0.9;z-index:-1;}
    .h6{display:inline-block;font-size:30px;font-weight:700;text-align:center;}
    .span1{font-size:50px;font-weight:600;text-align:center;}
    .p5{text-align:left;font-size:15px;margin-top:-40px;font-weight:500;}
    #divx1{width:100%;height:500px;position:absolute;top:300px;background-image:url(../imgs/y24.jpg);}
    #div42{margin-left:180px;width:85%;height:460px;float:left;position:relative;top:10px;}
    #div43{width:350px;height:230px;float:left;position:relative;left:15px;}
    #div44{width:380px;height:230px;background:gray;float:left;position:relative;left:10px;}
    .p6{width:35%;height:520px;}
    .menu{
    	width:200px;/*设置元素宽度*/
    	list-style:none;/*设置列表无样式*/
    	position:fixed;/*设置定位属性*/
    	top:400px;
    	left:-38px;
    }
    .menu li{
    	margin-top:10px;/*设置元素上外边距*/
    }
    .menu li a{
    	display:block;/*设置为块级元素*/
    	background-color:rgb(0,43,75);/*设置背景颜色*/
    	width:120px;/*设置元素宽度*/
    	font-size:14px;/*设置文字大小*/
    	text-decoration:none;
    	color:white;/*设置文字颜色*/
    	padding:10px 15px 10px 12px;/*设置内边距*/
    	-webkit-border-top-right-radius:10px;/*设置上右圆角边框*/
    	-webkit-border-bottom-right-radius:10px;/*设置下右圆角边框*/
    	-webkit-transition:padding 0.5s;/*设置过渡效果*/
    }
    .menu li a:hover{
    	background:lightgreen;/*设置背景颜色*/
    	color:blue;/*设置文字颜色*/
    }#div45{width:65%;height:230px;float:left;position:absolute;top:-15px;left:350px;}
    #div45>ul>li{list-style:none;width:380px;height:230px;}
    #div45>ul>li{float:left;}
    #div45>ul>li:nth-child(1){background:black;}
    #div45>ul>li:nth-child(4){background:black;}
    #div45>ul>li:nth-child(2){margin-left:8px;}
    #div45>ul>li:nth-child(3){margin-left:5px;}
    #div44 img:hover{opacity:0.2;}
    #div45>ul>li img:hover{opacity:0.2;}
    .animate-text>h3>a{color:rgb(157,226,135);}
    .animate-text {position:absolute;top:80px;left:80px;font-size:40px;width:330px;height:200px;color:rgb(157,226,135);}
     .animate-text h3{transform: translateX(100px); font-style: italic;opacity: 0;
      } 
    .animate-text:hover h3 {transition: all 0.6s ease-in-out;
      transform: translateX(0);
      opacity: 1;}
    
    #div11{width:65%;height:180px;background:white;float:left;position:absolute;top:180px;left:400px;}
    #div5{width:1300px;height:100px;background:;position:absolute;top:1350px;margin-left:210px;}
    
    #div6{width:1515px;height:400px;background-color:rgb(40,40,40);;position:relative;top:3000px;z-index:10000;}
    .z5{color:white;font-size:40px;font-weight:800;}
    .z{color:white;list-style:none;font-size:21px;line-height:40px;}
    
    .z1{float:left;width:400px;height:200px;margin:10px;
    	position:absolute;top:30px;left:170px;
    border-right: 1px solid white;}
    .z2{position:absolute;top:25px;left:240px;}
    #z3{width:400px;height:200px;position:absolute;
    	left:620px;top:30px;margin:10px;float:left;
    	border-right: 1px solid white;}
    .z4>li{color:white;float:left;width:120px;line-height:30px; }
    .z6{color:blue;font-size:30px;font-weight:600px}
    #z7{width:400px;height:200px;position:absolute;
    	left:1100px;top:20px;margin:10px;float:left;
    	border-right: 1px solid white;}
    #z7>dl>dt{color:white;font-size:20px;line-height:35px; }
    #z7>dl>dd{color:white;}
    #z7>p{color:blue;font-size:40px;font-weight:800;}
    #z8{width:80%;height:140px;position:absolute;
    	top:300px;left:230px;margin:10px;float:left;
    	border-top: 1px solid gray;}
    .flex-container{flex-direction:column;}
    #div1>div:first-child{position:absolute;top:-20px;left:50px;}
    #div1>div:nth-child(2){position:absolute;top:-16px;left:400px;}
    .i1{opacity:0.7;position:absolute;left:-450px;top:10px;height:45px;border-radius:30px 0 0 30px;border:2px #002B4B solid;z-index:1000;}
    .i2{position:absolute;left:0px;top:10px;height:51px;width:125px;border-radius:0px 30px 30px 0px;background:#002B4B;color:white;z-index:2000;}
    #div1>div>form{position:absolute;top:30px;left:800px;}
    .p1{font-size:50px;}
    
    #div2>ul{margin-left:100px;}
    #div2>ul>li{float:left;width:100px;height:80px;margin-left:8px;margin-right:5px;margin-top:-15px;list-style:none;font-size:;}
    #div2>ul>li>a{font-size:22px;font-weight:600;color:white;text-decoration:none;line-height:80px;}
    #div2>ul>li>ul{display:none;}
    #div2>ul>li:hover>ul{display:inline-block;}
    #div2>ul>li>a{width:100px;text-align:center;display:block;list-style:none;}
    #div2>ul>li>a:hover{opacity:0.7;transform:translate(10px); }
    #div2>ul>li>ul>li{background:rgb(209,231,244);width:120px;}
    #div2>ul>li>ul>li{list-style:none;font-weight:700;text-decoration:none;text-align:center;line-height:30px;background:rgb(209,231,244);width:180px;}
    #div2>ul>li>ul>li>a{text-decoration:none;color:black;}
    #div2>ul>li>ul>li:hover{background:rgb(186,230,255);opacity:0.7;}
    
    .y2{position:absolute;top:100px;right:150px;}
    #photos{z-index:2;width:calc(1500px*5);}
    .play{animation: ma 20s ease-out infinite alternate;}
    @keyframes ma {
    			0%,25% {		margin-left: 0px;		}
    			30%,55% {		margin-left: -1500px;	}
    			60%,75% {		margin-left: -2600px;	}
    			80%,100% {		margin-left: -3700px;	}}
    	.num{
    			position:absolute;z-index:10;
    			display:inline-block;
    			right:700px;top:430px;
    			border-radius:100%;
    			background:black;
    			width:20px;height:20px;
    			line-height:20px;
    			cursor:pointer;
    			color:white;
    			text-align:center;
    			opacity:0.6;
    		}
    		.num:hover{background:#00f;}
    		.num:hover,#photos:hover{animation-play-state:paused;}
    		.num:nth-child(2){margin-right:30px}
    		.num:nth-child(3){margin-right:60px}
    		.num:nth-child(4){margin-right:90px}
    		#a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}
    		#a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}
    		#a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}
    		#a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}
    		@keyframes ma1 {0%{margin-left:-140px;}100%{margin-left:-0px;}	}
    		@keyframes ma2 {0%{margin-left:-2500px;}100%{margin-left:-1500px;}	}
    		@keyframes ma3 {100%{margin-left:-3000px;}	}
    		@keyframes ma4 {100%{margin-left:-4500px;}	}	
    		
    
    #div5 h3{
        font-size: 30px;
        display: inline-block;
         margin-top:10px;
       font-weight:bold; 
    }
    .b2{text-align:center;
    	width:200px;
    	height:60px;
    	position:absolute;top:10px;margin-left:5px;
    background-color:rgb(247,227,94);
    	border:1px solid #ccc;
    	}
    .b2:hover{
    	background-color:#f90;             
    }
    .b2>h3>a:hover {	
    	color:#FFF;             
    }
    
    .title>li>a:hover{	
    	color:#FFF;  
    	transform:translate(-100px); 
    	        
    }
    
    .title{display:inline-block;position:absolute;top:10px;margin-left:200px;}
    .title>li{margin:40px;margin-top:1px;}
    .title>li{float:left;list-style:none;}
    .title>li:nth-child(1){background-color:rgb(96,190,254);width:150px;height:40px;text-align:center;line-height:40px;}
    .title>li:nth-child(2){background-color:rgb(157,226,135);width:150px;height:40px;text-align:center;line-height:40px;}
    .title>li:nth-child(3){background-color:rgb(244,174,200);width:150px;height:40px;text-align:center;line-height:40px;}
    .picture{position:relative;top:60px;}
    .title>li:hover{background-color:#f90;}
    .b1{height:350px;background:}
    .b1 h4{margin-top:2px;}
    .picture{margin-left:-50px;color:white;}
    .picture>li{float:left;margin:14px;list-style:none;}
    .picture>li>div>div:first-child{border:2px #fff solid;padding:15px;}
    .picture>li>div>div:first-child:hover{border:2px #5f93e5 solid}
    .picture>li>div:hover{color:black;}
    .picture>li>div>div:hover{box-shadow:1px 4px 6px 8px #06C;}
    .picture>li>div>div>img:hover{transform:scale(1.1,1.1);   }
    #div7{position:absolute;top:1460px;font-size: 40px;color:black;font-weight:bold;margin-left:210px;}
    #div7 {
      display: flex;
      justify-content: center;
      margin-top: 50vh;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      text-align: center;
      transition: -webkit-transform .3s ease-in-out;
      transition: transform .3s ease-in-out;
      transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    }
    #div7:hover {
      -webkit-transform: rotateX(35deg), translateY(-50%);
              transform: rotateX(35deg), translateY(-50%);
    }
    #div7:hover span {
      color: white;
    }
    #div7:hover span:nth-child(odd) {
      -webkit-transform: skewY(15deg);
              transform: skewY(15deg);
              border:5px rgb(186,230,255) solid;
    }
    #div7 span:nth-child(even) {
      -webkit-transform: skewY(-15deg);
              transform: skewY(-15deg);
      background-color:rgb(0,43,75);
      color:white;
    
    
    }
    #div7 > span {
      display: block;
      background-color:rgb(147,180,234);
      width: 120px;
      height: 110px;
      line-height: 120px;
      transition: color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
      transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
      transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
      box-shadow: 0 40px 50px rgba(0, 0, 0, 0.1);
    }
    #div7 > span:first-child {
      border-radius: 5px 0 0 5px;
    }
    #div8>ul>li{list-style:none;float:left;margin:15px;}
    #div8{width:85%;height:400px;position:absolute;top:2450px;margin-left:210px;}
    #div8>ul>li>div{width:230px; height:230px; border-radius:50%; overflow:hidden;border:1px #fb9 solid;background:white;border:2px #5f93e5 solid}
    #div8>ul>li>div>div{width:230px; height:180px; border-radius:50% 50% 0 0; overflow:hidden;}
    #div8>ul>li>div>h4{margin-left:90px;margin-top:10px;}
    #div8>ul>li>div:hover{transform:scale(1.1,1.1); }
    
    
    .mofang {
    	width:60px;
    	height:60px;
    	margin:0 auto;
    	position:fixed;
    	z-index:999;
    	-webkit-perspective:1000px;
    	perspective:1000px;
    	right:0;
    	bottom:0;
    	-webkit-transform:translate(-80%,-80%);
    	transform:translate(-80%,-80%)
    }
    .cube {
    	width:100%;
    	height:100%;
    	position:absolute;
    	-webkit-transform-style:preserve-3d;
    	transform-style:preserve-3d;
    	-webkit-transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
    	transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
    	-webkit-transform-origin:center center -100px;
    	transform-origin:center center -100px;
    	-webkit-animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite;
    	animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite
    }
    .cube div {
    	width:80px;
    	height:80px;
    	display:block;
    	margin:0;
    	position:absolute
    }
    .cube div a {
    	color:#fff;
    	text-decoration:none;
    	text-align:center;
    	position:fixed;
    	top:50%;
    	left:50%;
    	-webkit-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    	line-height:normal;
    	font-size:16px;
    	letter-spacing:3px
    }
    .cube .front {
    	-webkit-transform:rotateY(0) translateZ(40px);
    	transform:rotateY(0) translateZ(40px);
    	background-color:rgba(0,43,75);
    	border:2px solid rgba(0,43,75)
    }
    .cube .back {
    	-webkit-transform:rotateX(180deg) translateZ(40px);
    	transform:rotateX(180deg) translateZ(40px);
    	background-color:rgba(96,190,254);
    	border:2px solid rgba(96,190,254)
    }
    .cube .left {
    	-webkit-transform:rotateY(-90deg) translateZ(40px);
    	transform:rotateY(-90deg) translateZ(40px);
    	background-color:rgba(157,226,135);
    	border:2px solid rgba(157,226,135)
    }
    .cube .right {
    	-webkit-transform:rotateY(90deg) translateZ(40px);
    	transform:rotateY(90deg) translateZ(40px);
    	background-color:rgba(81,161,224);
    	border:2px solid rgba(81,161,224)
    }
    .cube .top {
    	-webkit-transform:rotateX(90deg) translateZ(40px);
    	transform:rotateX(90deg) translateZ(40px);
    	background-color:rgba(2244,174,200);
    	border:2px solid rgba(244,174,200)
    }
    .cube .xaimian {
    	-webkit-transform:rotateX(-90deg) translateZ(40px);
    	transform:rotateX(-90deg) translateZ(40px);
    	background-color:rgba(184,111,220,.7);
    	border:2px solid rgba(184,111,220,.7)
    }
    @-webkit-keyframes around {
    	100% {
    	-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
    	transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)
    }
    }@keyframes around {
    	100% {
    	-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
    	transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)
    }
    }@media only screen and (max-width:767px) {
    	.mofang {
    	width:40px;
    	height:40px;
    	-webkit-transform:translate(-100%,-100%);
    	transform:translate(-100%,-100%);
    }
    .cube div {
    	width:60px;
    	height:60px
    }
    .cube div a {
    	font-size:12px;
    	letter-spacing:2px
    }
    .cube .front {
    	-webkit-transform:rotateY(0) translateZ(30px);
    	transform:rotateY(0) translateZ(30px);
    }
    .cube .back {
    	-webkit-transform:rotateX(180deg) translateZ(30px);
    	transform:rotateX(180deg) translateZ(30px)
    }
    .cube .left {
    	-webkit-transform:rotateY(-90deg) translateZ(30px);
    	transform:rotateY(-90deg) translateZ(30px)
    }
    .cube .right {
    	-webkit-transform:rotateY(90deg) translateZ(30px);
    	transform:rotateY(90deg) translateZ(30px)
    }
    .cube .top {
    	-webkit-transform:rotateX(90deg) translateZ(30px);
    	transform:rotateX(90deg) translateZ(30px)
    }
    .cube .xaimian {
    	-webkit-transform:rotateX(-90deg) translateZ(30px);
    	transform:rotateX(-90deg) translateZ(30px)
    }
    }
    #div9{width:500px;height:400px;position:absolute;top:1940px;
    	left:210px;margin:0 auto;background:white;}
    .t1{color:rgb(0,43,75);font-size:30px;font-weight:800;
    	border-bottom:4px #000 solid;}	
    #div9>ul>li{float:left;line-height:30px; }
    #div9>ul>li:hover{border-bottom:1px #551a8b solid;}
    #div9>ul>li>a:hover{color:#551a8b;text-decoration:solid;}
    #div9>ul>li>a{color:black;text-decoration:none; }
    #div10{position:absolute;top:1880px;left:420px;}
    #div11{position:absolute;top:2340px;left:170px;background:rgb(147,180,234);}
    
    #div11 ul {
    	margin-top:30px;
    	list-style:none;
    	line-height:50px;
    	
    	font-weight:bold;
    }
    #div11 ul li {
    	width:600px;
    	float:left;
    	margin:5px;
    	border:3px solid #ccc;
    	background-color:#f90;
    	text-align:center;
    }
    #div11 ul li:hover{
    	background-color:#999;            /* 深灰色 */
    }
    #div11 ul li a{
    	display:block;
    	padding:5px 10px;
    	color:#333;
    	text-decoration:none;
    	font-size:40px;
    }
    #div11 ul li a:hover{
    	background-color:#f90;
    	color:#FFF;
    	/* 变形方式:缩放 */
    	-webkit-transform:scale(0.8,1.5);    
    	-moz-transform:scale(0.8,1.5);        /* 兼容gecko内核 */
    	-o-transform:scale(0.8,1.5);          /* 兼容presto内核 */
    	-ms-transform:scale(0.8,1.5);         /* 兼容IE9 */
    	transform:scale(0.8,1.5);             /* 标准写法 */
    }
    
    
    
    
    
    
    
    
    

    总结

    可分享源码

    展开全文
  • web前端开发技术-------期末大作业

    千次阅读 2021-12-30 19:31:45
    本项目登录那里,没有实现交互,直接... 有视频播放、轮播、返回首页等功能,反正我们学校的要求我都实现了,做完一年了,哈哈哈 改改哦就是你的了,网盘链接放在文末了,感兴趣点个赞再拿走吧,嘿嘿嘿~~~~ ......

     本项目登录那里,没有实现交互,直接点击SIGN UP就可进入另一个html页面

    有视频播放、轮播、返回首页等功能,反正我们学校的要求我都实现了,做完一年了,哈哈哈

    改改哦就是你的了,网盘链接放在文末了,感兴趣点个赞再拿走吧,嘿嘿嘿~~~~

     

     

     

     

     

     

     


     

     

    链接:https://pan.baidu.com/s/1h3ZrVIxlB_9TYxt4-Hg7HQ 
    提取码:tym4

    展开全文
  • web前端期末大作业源码.zip
  • 期末结课大作业 html+css+javascript网页设计实例 企业网站制作,资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件,用于大学web网页课程设计参考以及相关从业人员参考学习
  • 1.网页作品简介方面:HTML期末学生结课大作业作品(HTML+CSS+JS),响应式布局网站源码!兼容pc以及移动端,内涵js交互,ui交互,页面质量高 非常适合,2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为...

    一、1000套HTML期末学生结课大作业作品(HTML+CSS+JS)

    这8年来做了1000多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平,都是div+css框架原创代码写的,有的有js,有的视频+音乐+flash的等元素的插入…

    1000多例 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载!



    作品介绍

    1.网页作品简介方面 :HTML期末学生结课大作业作品(HTML+CSS+JS),响应式布局网站源码!兼容pc以及移动端,内涵js交互,ui交互,页面质量高 非常适合,

    2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为A+学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

    3.网页作品布局方面:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

    4.网页作品技术方面:使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)

    作品演示

    ❤200套HTML期末大作业网页设计作品---->>>在线演示地址


    A电影主题

    在这里插入图片描述

    B漫画主题

    在这里插入图片描述在这里插入图片描述

    C商城主题

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    D家乡主题

    在这里插入图片描述

    E旅游主题

    在这里插入图片描述
    在这里插入图片描述

    F餐饮/美食主题

    在这里插入图片描述

    G环境主题

    在这里插入图片描述

    H游戏主题

    在这里插入图片描述

    I 个人主题

    在这里插入图片描述

    J 节日主题

    在这里插入图片描述

    K体育主题

    在这里插入图片描述

    L博客主题

    在这里插入图片描述

    M汽车主题

    在这里插入图片描述

    N文化主题

    在这里插入图片描述

    O 疫情主题

    在这里插入图片描述

    P美妆主题

    在这里插入图片描述

    Q企业主题

    在这里插入图片描述

    R教育主题

    在这里插入图片描述

    S其他主题

    在这里插入图片描述

    二、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

    web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
    适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
    在这里插入图片描述


    三、源码获取

    ❉ ~ 关注我,点赞博文~ 每天带你涨知识!

    ❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

    ❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

    ❉3.以上内容技术相关问题可以相互学习

    在这里插入图片描述

    展开全文
  • web前端期末节课大作业 ,html+css+javascript实现~HTML5大学生网上报到系统响应式模板基于Bootstrap3.3.7制作,响应式设计,自适应分辨率,兼容PC端和移动端,全套模板,包括阅读注意事项填写身份证号、大学毕业生...
  • 也有首页index、书法书体、历代名家页,分别对应有CSS和JS文件,互相用导航栏链接。含有轮播图。每页包含顶部(登录注册表单、个人头像)、头部(logo、搜索框)、导航栏、页脚、底部返回顶部按钮和背景图片。
  • java大学生编程作业web前端开发.网页用户注册,信息可选择
  • web前端设计与开发大作业(五)----期末设计报告

    万次阅读 多人点赞 2020-06-22 23:04:54
    一、实验(实训)概述: 【整体网页设计】 网站基本规划: 1、面页13左右; ... ...【基本原理】 ...【实施环境】(使用软件) HBuilder X Chrome ...【实验(实训)过程】(步骤、记录、数据、程序等) ...一....
  • web前端开发技术期末大作业 网页规划与制造,做得不深 但是还是满足期末大作业的 分享一下 题目: 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合...
  • 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个...
  • web 前端开发基础 作业考核试题题库web 前端开发基础这门课是非常重要的尤其是对 于计算机专业的同学们来说下面带来的 web 前端开发基 础作业考核试题题库大全一起看看 一单选题共 20 题 40 分 1 2 分 浮动会...
  • HTML静态网页设计作业,采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】:https://blog.csdn.net/bigwhiteshark?type=blog
  • HTML静态网页设计作业,采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】:https://blog.csdn.net/bigwhiteshark?type=blog
  • HTML静态网页设计作业,采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】:https://blog.csdn.net/bigwhiteshark?type=blog
  • 一、200套HTML期末学生结课大作业作品(HTML+CSS+JS) 这五年来做了200多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平,都是div+css框架原创代码写的,有的有js...
  • web前端开发基础作业考核试题大全.pdf
  • Web前端开发 客观题 编程题 概论 单元测试1 HTML基础 单元测试2 单元作业1 CSS样式 单元测试3 单元作业2 CSS布局与定位 单元测试4 单元作业3 CSS3 单元测试5 JavaScript基础 单元测试6 单元作业4 ...
  • HTML静态网页设计作业,采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】:https://blog.csdn.net/bigwhiteshark?type=blog
  • HTML5与CSS3web前端开发技术习题答案
  • HTML静态网页设计作业,采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】:https://blog.csdn.net/bigwhiteshark?type=blog

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,152
精华内容 8,060
关键字:

web前端开发大作业

友情链接: MFC_OpenGL.zip