精华内容
下载资源
问答
  • html+css+js之20个练手小项目(一)
    千次阅读
    2021-11-07 16:09:42

    html+css+js之20个练手小项目(一)——Hangman


    前言

    前端新手练习,记录不迷失。
    主要练习html和CSS布局以及JS。
    来源github,参考链接:使用html+css和纯js实现小项目
    Hangman是一个单词拼写的小游戏,主要功能包括:
    (1)利用svg画小人图
    (2)生成随机单词并展示
    (3)单词正确与错误提醒
    Hangman单词拼写小游戏


    一、HTML

    HTML结构比较简单,主要使用了SVG构造小人。学习一下标签svg中的line,circle。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hangman</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="action.js"></script>
    </head>
    <body>
        <h1>Hangman</h1>
        <p>Find the hidden word - Enter a letter</p>
        <div class="game-wrapper">
            <svg height="250" width="200">
                <!-- Rod -->
                <line x1="60" y1="20" x2="140" y2="20"></line>
                <line x1="140" y1="20" x2="140" y2="50"></line>
                <line x1="60" y1="20" x2="60" y2="230"></line>
                <line x1="20" y1="230" x2="100" y2="230"></line>
                <!-- Head -->
                <circle cx="140" cy="70" r="20" class="figure-part"></circle>
                <!-- Body -->
                <line x1="140" y1="90" x2="140" y2="150" class="figure-part"></line>
                <!-- Arms -->
                <line x1="140" y1="120" x2="120" y2="100" class="figure-part"></line>
                <line x1="140" y1="120" x2="160" y2="100" class="figure-part"></line>
                <!-- Arms -->
                <line x1="140" y1="150" x2="120" y2="180" class="figure-part"></line>
                <line x1="140" y1="150" x2="160" y2="180" class="figure-part"></line>
            </svg>
            <div class="wrong-letters-wrapper">
                <div class="wrong-letters">
                    
                </div>
            </div>
            <div class="enter-letters">
    
            </div>
        </div>
       
        <div class="pop">
            <h2 class="final-message"></h2>
            <h3 class="reval-word-message"></h3>
            <button id="play-button">Play Again</button>
        </div>
        <div class="notification">
            <p>You have already entered this letter</p>
        </div>
    </body>
    </html>
    

    二、CSS

    原文主要是使用flex进行布局,在这为了练习,删去了一些flex布局。

    *{
        box-sizing: border-box;/* 设置的宽高包括content+padding+border */
    }
    body{
        margin:0;
        padding:0;
        background-color:#34495e;
        color:#fff;
        font-family:Arial, Helvetica, sans-serif;
        /* text-align:center;居中 */
        display: flex;
        align-items: center;/* 这两行可以设置居中 */
        overflow: hidden;
        flex-direction:column;/*  作为列,垂直地显示弹性项目。*/ 
        height:80vh;
    }
    h1{
        margin:20px 0 0;
    }
    .game-wrapper{
        padding:20px 30px;
        position: relative;
        margin:auto;
        height:350px;
        width:450px;
     
    }
    svg{
        stroke:#fff;
        stroke-width:4px;
        fill:transparent;
        stroke-linecap: round;
    }
    .wrong-letters-wrapper{
       
        position: absolute;
        top:20px;
        right:20px;
        text-align:right;
    }
    .wrong-letters-wrapper p{
        margin:0 0 5px;
    }
    .wrong-letters-wrapper span{
        font-size:24px;
    }
    .enter-letters{
        display:block;
        position: absolute;
        bottom:10px;
        left:50%;
        transform: translateX(-50%);/* 虽然设置了居中,但仍然占用原来的位置 */
        white-space: nowrap;/* 这一行很重要,防止换行 */
    }
    .enter-letters .letter{
        display:inline-block;
        border-bottom:3px solid #2980b9;
        font-size:30px;
        margin:0 3px;
        height:50px;
        width:20px;
        vertical-align: bottom;
    }
    .notification{
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 10px 10px 0 0;
        padding: 15px 20px;
        position: absolute;
        bottom: -80px;
    }
    .pop{
        display: none;
        background-color:#2980b9;
        border-radius:5px;
        box-shadow:0 15px 10px 3px rgb(0, 0, 0, 10%);
        padding:20px;
        text-align: center;
        z-index:1;
        position:fixed;
        top:50%;
        left:50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .pop button{
        cursor:pointer;
        background-color: #fff;
        border:0;
        margin-top:20px;
        padding:12px 20px;
        font-size:16px;
        color:#2980b9;
    }
    .figure-part{
        display: none;
    }
    

    三、JS

    原文作者全部使用原生JS 实现。为了练习,在这主要是通过Jquery实现。代码简单+简陋,大佬请指教。主要逻辑:基于游戏等级,生成随机单词,监听键盘输入。

    $(document).ready(function () {
        //定义一个单词数组,三种长度
        let wordArr_easy = ['return', 'double', 'static']; //长度为6
        let wordArr_normal = ['underline', 'transform', 'arguments']; //长度为9
        let wordArr_difficult = ['application', 'programming', 'constructor']; //长度为11
        let wordAll=[wordArr_easy,wordArr_normal,wordArr_difficult];
    
        let stars=0;//记录游戏level
        let output;//随机生成的单词
        let trueCount=0;//记录正确字母输入次数
        let falCount=0;//记录错误字母输入次数
        let saveinput=[];//记录所有输入
        let flag=true;//控制字母是否重复输入
        
        gamelistener();
        $("#play-button").click(intial);
    
        //清除所有样式
        function intial(){
            $('.enter-letters').html("");
            $('.wrong-letters').html("");
            $(".pop").css("display","none");
            $(".pop .final-message").text("");
            $(".pop .reval-word-message").text("");
            $(".figure-part").css("display","none");
            trueCount=0;
            falCount=0;
            saveinput=[];
            output = randon_word(wordAll[stars]);
            //写入,html() 函数的作用原理是先移除匹配元素内部的html代码,然后将新的html添加到匹配元素
            //append() 方法向匹配元素集合中的每个元素结尾插入由参数指定的内容
            for (let i = 0; i < output.length; i++) {
                $('.enter-letters').append("<span class='letter'></span>");
            } 
        }
       
        //监听键盘输入
        function gamelistener() {
            intial();
            $(document).keyup(function(e){
                flag=true;
                var value=e.key;
                var re = /[A-z]/; //查找从大写 A 到小写 z 范围内的字符,即所有大小写的字母。
                //判断是否是字母
                if (re.test(value)) {
                    //判断是否是数组中的单词字母
                    value = value.toLowerCase();
                    saveinput.forEach(e =>{
                        if(value==e){
                            notify();
                            flag=false;
                        }
                    });
                    if(flag){
                        saveinput.push(value);
                        let infer = findall(output, value);
                        if (infer.length > 0) {
                            trueCount+=infer.length;
                            //是,对应位置输出
                            infer.forEach(event => {
                                $('.enter-letters').children().eq(event).text(value);
                            });
                            if(trueCount==output.length){
                                stars++;
                                if(stars>2){
                                    stars=0;
                                }
                                playAgain(output,1);
                                
                            }
                        } else {
                            mancontrol(falCount);
                            falCount++;
                            if(falCount>1){
                                $('.wrong-letters').append(",");
                            }
                            else{
                                $('.wrong-letters').append("<p>Wrong</p>");
                            }
                            $('.wrong-letters').append("<span>"+value+"</sapn>");
                            if(falCount>5){
                                //再玩一次
                                playAgain(output,0);
                            }
                            
        
                        }
                    }
                    
                }
            })
        }
        //在数组中查找所有出现的x,并返回一个包含匹配索引的数组
        function findall(a, x) {
            var results = [],
                len = a.length,
                pos = 0;
            while (pos < len) {
                pos = a.indexOf(x, pos);
                if (pos === -1) {
                    //未找到就退出循环完成搜索
                    break;
                }
                results.push(pos); //找到就存储索引
                pos += 1; //并从下个位置开始搜索
            }
            return results;
        }
        //功能1,产生随机单词
        function randon_word(Arr) {
            let infer = Math.round(Math.random() * Arr.length);
            return Arr[infer];
        }
        //功能2,控制小人
        function mancontrol(falsec){
            $(".figure-part").eq(falsec).css("display","block");
        }
        //功能3,字母重复输入提醒
        function notify(){
            $(".notification").animate({"bottom":"-20px"},500);
            setTimeout(function(){
                $(".notification").animate({"bottom":"-80px"},500);
            },2000);
        }
        //功能4,通关成功与失败提醒
        function playAgain(word,flag){
            $(".pop").css("display","block");
            if(flag){
                $(".pop .final-message").text("Congratulation you win. 👍");
            }
            else{
                $(".pop .final-message").text("Unfortunately you lost. 😢");
                $(".pop .reval-word-message").text("...the word was:"+word);
            }
        }
    });
    
    
    更多相关内容
  • 个人博客,基于html+css+JavaScript的完整代码,内容全面可以直接使用。
  • html+css网页设计源码(简洁),前端基础代码,拿来就用 评分: ⭐⭐⭐⭐⭐
  • html+css+js新手练习项目,里面包含例子源码,还有单独文件夹分类。适合新手练习用
  • 157个HTML+CSS+JavaScript前端开发24实例
  • 静态网页模板html+css

    2017-12-05 19:28:03
    里面包含129套案例集合,html静态网页模板合集,html+css模板,可以选择自己喜欢的样式模板
  • Html+Css+js+jquery实现简单页面的登录
  • 这是一个div+css布局方式设计的一个完整的网站源代码,可用于教学或自学。
  • 一个漂亮的个人主页,支持音乐跨界面播放,支持网页背景主题五种样式切换
  • 1.html班级网页设计模板 2.html动漫网页设计模板 3.html个人网页设计模板 4.html化妆品网页设计模板 5.html咖啡网页设计模板 6.html旅游网页设计模板 7.html商城网页设计模板 8.html书店网页设计模板 9.html公司网页...
  • HTML+CSS网页设计与布局从入门到精通(PDF+源码) 【作 者】温谦编著 【出版发行】 北京市:人民邮电出版社 【ISBN号】978-7-115-18339-2 【页 数】 424 【丛书名】网页制作从入门到精通系列 【主题词】超文本...
  • 使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框
  • HTML+CSS+JavaScript网页制作案例教程

    千次阅读 2021-06-14 02:42:46
    《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》以DreamweerCS5软件和FlashCS5软件的使用为基础,以AscentSys医药商务系统项目案例的贯穿为主线,围绕AscentSys医药...

    url_none.png

    《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》以DreamweerCS5软件和FlashCS5软件的使用为基础,以AscentSys医药商务系统项目案例的贯穿为主线,围绕AscentSys医药商务系统实际项目,详细全面系统地介绍了网页制作、设计、规划的基本知识以及网站设计、开发、发布的完整流程。全书共14章,分5大部分,内容包括网页制作基础,HTML语言基础及网页元素设计和网页布局规划,CSS技术及布局设计,JaScript技术及网页应用,网页Flash制作、网站服务器的创建以及网站系统的发布与维护。《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》每一章结合内容知识都给出了相应的项目案例,方便读者进行实训练习,力求由浅入深,使读者快速掌握网页制作及网站设计、开发的相关技术。《高

    ¥25.85定价:¥190.67(1.36折)

    /2000-01-01

    url_none.png

    本书当前实时库存为: 本 书名:HTML+CSS+JavaScript网页制作案例教程 ISBN:9787115296580 出版社:人民邮电出版社 作者:本书编委会 页数:340 出版日期:2015年09月 参考重量:0.550Kg 定价: 49.80 元 图书编号: 3642590 温馨提示:亲!旧书库存变动比较快,有时难免会有断货的情况,为保证您的利益,拍前请务必联系卖家咨询库存情况!谢谢!。

    ¥12.00定价:¥49.80(2.41折)

    本书编委会/2015-09-01

    url_none.png

    《网页设计与制作案例教程》把介绍知识与实例制作融于一体,以爱家商城网站(包括主页、栏目页、内容页、会员管理等页面)作为案例讲解,配以宇宙商务网站的实训练习,两条主线互相结合、相辅相成,自始至终贯穿于本书的主题之中。

    ¥32.40定价:¥49.80(6.51折)

    url_none.png

    《网页设计与制作案例教程》把介绍知识与实例制作融于一体,以爱家商城括主页、栏目页、内容页、会员管理等页面)作为案例讲解,配以宇宙商务的实训练条主线互相结合、相辅相成,自始至终贯穿于本书的主题之中。

    ¥34.90定价:¥49.80(7.01折)

    /2018-02-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥15.00定价:¥133.50(1.13折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥15.00定价:¥64.96(2.31折)

    url_none.png

    本书当前实时库存为: 本 书名:网页设计与制作案例教程(HTML+CSS+DIV+JavaScript) ISBN:9787115442727 出版社:人民邮电出版社 作者:李志云 页数:278 出版日期:2017年01月 参考重量:0.460Kg 定价: 49.80 元 图书编号: 3982320 书友好,二手书采购呢比较困难,然后又很好卖,所以有时候会出现缺货的情况,建议您下单前呐,咨询下咱们的客服库存情况哈。

    ¥9.90定价:¥49.80(1.99折)

    /2017-01-01

    url_none.png

    本书当前实时库存为: 本 书名:网页制作案例教程(HTML+CSS+JavaScript) ISBN:9787302262220 出版社:清华大学出版社 作者:毋建军 页数:458 出版日期:2011年09月 参考重量:0.750Kg 定价: 45.00 元 图书编号: 2838348 书友好,二手书采购呢比较困难,然后又很好卖,所以有时候会出现缺货的情况,建议您下单前呐,咨询下咱们的客服库存情况哈。

    ¥6.70定价:¥45.00(1.49折)

    /2011-09-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.27(9.22折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.77(9.13折)

    url_none.png

    《网页设计与制作案例教程》把介绍知识与实例制作融于一体,以爱家商城网站(包括主页、栏目页、内容页、会员管理等页面)作为案例讲解,配以宇宙商务网站的实训练习,两条主线互相结合、相辅相成,自始至终贯穿于本书的主题之中。

    ¥37.40定价:¥50.86(7.36折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥36.39定价:¥173.08(2.11折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.54(9.17折)

    url_none.png

    《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》以DreamweerCS5软件和FlashCS5软件的使用为基础,以AscentSys医药商务系统项目案例的贯穿为主线,围绕AscentSys医药商务系统实际项目,详细全面系统地介绍了网页制作、设计、规划的基本知识以及网站设计、开发、发布的完整流程。全书共14章,分5大部分,内容包括网页制作基础,HTML语言基础及网页元素设计和网页布局规划,CSS技术及布局设计,JaScript技术及网页应用,网页Flash制作、网站服务器的创建以及网站系统的发布与维护。《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》每一章结合内容知识都给出了相应的项目案例,方便读者进行实训练习,力求由浅入深,使读者快速掌握网页制作及网站设计、开发的相关技术。《高

    ¥18.04定价:¥250.19(0.73折)

    /2011-09-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.64(9.15折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥13.49定价:¥114.92(1.18折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥26.35定价:¥78.14(3.38折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥7.49定价:¥110.69(0.68折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥19.05定价:¥168.52(1.14折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥49.80定价:¥49.80

    url_none.png

    《网页设计与制作案例教程》面向学习网页制作的读者,采用全新流行的Web标准,以HTML技术为基础,由浅入深地介绍了HTML、CSS及JaScript网页制作的内容。本书把介绍知识与实例制作融于一体,以爱家商城网站(包括主页、栏目页、内容页、会员管理等页面)作为案例进行讲解,配以宇宙商务网站的实训练习,两者相辅相成,自始至终贯穿于本书的主题中。本书采用案例驱动的教学方法,以案例为引导,结构上采用点面结合的方式,引导读者学习网页规划、设计、制作的基本知识以及项目开发、测试的完整流程。本书适合作为高职高专院校计算机及相关专业的教材,也可以作为培训网站开发与网页制作的教材。

    ¥46.06定价:¥294.00(1.57折)

    /2018-02-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥26.90定价:¥49.80(5.41折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥13.39定价:¥139.93(0.96折)

    展开全文
  • 京东首页HTML+CSS源码

    2016-02-26 10:10:48
    京东首页HTML+CSS源码实现 WEB前端开发初学者参考源码
  • springboot+css+js+html Demo

    2018-01-20 17:03:32
    springboot+css+js+html 入门例子,希望能对你提供帮助。
  • 此网站是特别适合初学PHP人员入门使用,含前后台,增删改查,配接mysql数据库,有建库建表sql脚本。希望能对希望入门Web开发的你有所帮助。
  • HTML+CSS经典案例

    热门讨论 2012-09-12 22:53:45
    想学好这块的朋友,可以去看看,很适合初学者,希望对你 有所帮助
  • HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?...
    HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面)

    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

    原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

    作品介绍

    1.网页作品简介方面 :绿色古典的旅游度假景区,旅行社服务公司,旅游景区规划项目管理公司网站html模板下载。包含:景区概况、文苑之旅、舒雅住宅、新闻动态、联系我们等6个页面

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

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

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

    一、作品演示

    1.首页

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_大一实训网页制作大作业

    2.景区概况

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_绿色古典的旅游度假景区HTML_02

    3.文苑之旅

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_web课程设计网页规划与设计_03

    4.联系我们

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_个人设计web前端大作业_04

    5. 新闻动态

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_绿色古典的旅游度假景区HTML_05

    二、代码目录

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_个人设计web前端大作业_06

    三、代码实现
    <!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" />
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <link type="text/css" rel="stylesheet" href="css/animate.css" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/banner.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
      $("ul.nav li").hover(function () {
    		$(this).find(".navtwo").toggle();
    	})	
    })
    </script>
    </head>
    
    <body>
    <div class="header">
      <ul class="nav">
        <li>
          <a href="index.html">首页</a>
        </li>
        <li>
          <a href="about.html">景区概况</a>
        </li>
        <li>
          <a href="piclist.html">文苑之旅</a>
          <div class="navtwo">
            <a href="piclist.html">文苑之旅</a>
            <a href="piclist.html">文苑之旅</a>
            <a href="piclist.html">文苑之旅</a>
          </div>
        </li>
        <li>
          <a href="piclist.html">舒雅住宅</a>
        </li>
        <li>
          <a href="list.html">新闻动态</a>
          <div class="navtwo">
            <a href="list.html">公司新闻</a>
            <a href="list.html">行业新闻</a>
          </div>
        </li>
        <li>
          <a href="about.html">联系我们</a>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="banner">
      <div class="b-img">
          <img src="images/banner1.jpg" width="100%"/>
          <img src="images/banner1.jpg" width="100%" />
      </div>
      <div class="clear"></div>
      <div class="b-list"> </div>
    </div>
    <div class="clear"></div>
    <div class="part1">
      <div class="main">
        <div class="contitbox">
          <p><a href="about.html" class="ccsl">景区概况</a></p>
          <span class="ccsl">SCENIC OVERVIEW</span>
        </div>
        <div class="conbox">
          石家庄飞天益游天下旅行社有限公司是首批专注于精品民宿的新型创业连锁平台。<br>公司成立于2017年2月,注册资金1000万元。益游使命在于构筑"万众创新、大众创业"的新型平台,建立一个为历史和未来负责的、"留得住浓浓的乡愁"的城镇化村落服务体系,<br>为中国城镇化进程中的美丽乡村建设贡献一份力量。
        </div>
        <div class="morebox">
          <span class="img"></span>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="part2">
      <div class="contitbox">
        <p><a href="piclist.html" class="ccsl">文苑之旅</a></p>
        <span class="ccsl">COURT TRAVEL</span>
      </div>
      <ul>
        <li>
          <div class="kug"></div>
          <div class="proimg">
            <a href="picdetail.html"><img src="images/1.png" /></a>
          </div>
          <a href="picdetail.html"><p class="ccsl">万竹林海(一)</p></a>
        </li>
        <li>
          <div class="kug"></div>
          <div class="proimg">
            <a href="picdetail.html"><img src="images/1.png" /></a>
          </div>
          <a href="picdetail.html"><p class="ccsl">万竹林海(一)</p></a>
        </li>
        <li>
          <div class="kug"></div>
          <div class="proimg">
            <a href="picdetail.html"><img src="images/1.png" /></a>
          </div>
          <a href="picdetail.html"><p class="ccsl">万竹林海(一)</p></a>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="part3">
      <div class="contitbox">
        <p><a href="piclist.html" class="ccsl">舒雅住宅</a></p>
        <span class="ccsl">COURT TRAVEL</span>
      </div>
      <div class="p3con">
        <div class="p3conL">
          <div class="subBox0">
            <ul style="margin-left: 0px; overflow: hidden">
              <li><a href="picdetail.html"><img src="images/2.png" /></a></li>
              <li><a href="picdetail.html"><img src="images/2.png" /></a></li>
              <li><a href="picdetail.html"><img src="images/2.png" /></a></li>
            </ul>
          </div>
        </div>
        <div class="p3conR">
          <img src="images/3.png" />
          <div class="tit ccsl">客 | 房 | 介 | 绍</div>
          <div class="sub">桃花林苑中有各式客房100套,房型分为中式、现代两个类型,以满足客人的不同需求…</div>
          <div class="updowm">
            <p class="up">上一个</p>
            <p class="down">下一个</p>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        $(function () {
            var left = $(".up");
            var right = $(".down");
            var obj = $(".subBox0 ul");
            var w = obj.find("li").innerWidth();
    
            left.click(function () {
                obj.find("li:last").prependTo(obj);
                obj.css("margin-left", -w);
                obj.animate({ "margin-left": 0 });
            });
    
            right.click(function () {
                obj.animate({ "margin-left": -w }, function () {
                    obj.find("li:first").appendTo(obj);
                    obj.css("margin-left", "0");
                });
            });
            var moving = setInterval(function () { right.click() }, 3000);
            obj.hover(function () {
                clearInterval(moving);
            }, function () {
                moving = setInterval(function () { right.click() }, 3000);
            })
        });
       </script>
       <div class="morebox">
        <span class="img"></span>
       </div>
    </div>
    <div class="clear"></div>
    <div class="part4">
      <div class="main">
        <div class="contitbox">
          <p><a href="list.html" class="ccsl">新闻动态</a></p>
          <span class="ccsl">NEWS</span>
        </div>
        <ul>
          <li>
            <div class="newl">
              <a href="detail.html" class="ccsl">暑假去哪玩?桃花苑天地避暑甚好!</a>
              <div class="sub">暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。</div>
            </div>
            <div class="newr">
              <span>07.21</span>
              <time>2016</time>
            </div>
            <div class="clear"></div>
          </li>
          <li>
            <div class="newl">
              <a href="detail.html" class="ccsl">暑假去哪玩?桃花苑天地避暑甚好!</a>
              <div class="sub">暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。</div>
            </div>
            <div class="newr">
              <span>07.21</span>
              <time>2016</time>
            </div>
            <div class="clear"></div>
          </li>
          <li>
            <div class="newl">
              <a href="detail.html" class="ccsl">暑假去哪玩?桃花苑天地避暑甚好!</a>
              <div class="sub">暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。</div>
            </div>
            <div class="newr">
              <span>07.21</span>
              <time>2016</time>
            </div>
            <div class="clear"></div>
          </li>
          <li>
            <div class="newl">
              <a href="detail.html" class="ccsl">暑假去哪玩?桃花苑天地避暑甚好!</a>
              <div class="sub">暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。</div>
            </div>
            <div class="newr">
              <span>07.21</span>
              <time>2016</time>
            </div>
            <div class="clear"></div>
          </li>
        </ul>
        <div class="more2">
          <a href="list.html">MORE</a>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="footer">
      <div class="main">
        <div class="foot">
          <div class="fnav">
            <a href="index.html">首页</a>
            <a href="about.html">景区概况</a>
            <a href="piclist.html">文苑之旅</a>
            <a href="piclist.html">舒雅住宅</a>
            <a href="list.html">新闻动态</a>
            <a href="about.html">联系我们</a>
          </div>
          <div class="clear"></div>
          <div class="fot">
            <div>电话:0311-12345678<br />邮箱:123.sjz@456.com<br />手机:123 4560 7890<br />地址:河北省石家庄市裕华区西湾子镇旅游商贸新区胜利大街香雪A区11号 </div>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>
    
    
    
    

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

    web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_绿色古典的旅游度假景区HTML_07


    五、源码获取

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

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

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

    ❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

    HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)_旅游网页设计实现HTML源码_08

    六、更多HTML期末大作业作品文章

    1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

    2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

    3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

    4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

    5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

    6.HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)

    7.HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)

    8.HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)

    9.HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

    10.大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)

    11.HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)

    12.web前端大一实训~制作卡布漫画网站设计与实现(HTML+CSS+JavaScript)

    13.web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)

    14.HTML期末大作业~酒店网站模板(HTML+CSS+JavaScript)

    15.HTML学生网页设计作业源码~开心旅游网站设计与实现(HTML期末大作业)

    16.HTML奥运网页5页面文化 ~ 体育学生网页设计作业

    17.HTML我的家乡杭州网页设计作业源码(div+css)

    18.HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码

    19.HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面

    20.HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

    21.一套完整仿拉勾网HTML静态网页模板(含38个独立HTML)

    22.HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)

    23 Web大学生网页作业成品~美食餐饮网站设计与实现(HTML+CSS+JavaScript)

    24.HTML期末大作业~绿色农产品食品类网站设计与实现(HTML+CSS+JavaScript)

    25.HTML期末大作业~花店鲜花商城网站模板设计与实现(HTML+CSS+JavaScript)

    26.HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)

    27.HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品

    28.HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)

    29.HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)

    30.HTML期末大作业 ~ 凤阳智慧旅游官方旗舰店(我的家乡)(HTML+CSS+JavaScript)

    31.HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)

    32.HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)

    33.HTML期末大作业课程设计~动漫游戏官网10个页面(HTML+CSS+JavaScript)

    34.个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)

    35.HTML期末大作业~个人图片资源网页设计共5个页面(HTML+CSS+JavaScript)

    36.web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)

    37.HTML期末大作业~清新手工肥皂网站展示4个页面(HTML+CSS+JavaScript+Bootstrap)

    38.学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)

    39.HTML期末大作业~棋牌游戏静态网站(6个页面) HTML+CSS+JavaScript

    40.HTML期末大作业~速鲜站餐饮食品html网页(共6个页面)HTML+CSS+JavaScript

    41.HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(8个页面)(HTML+CSS)

    42.HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)

    43.HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)

    44.web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)

    45.web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)

    46.HTML期末大作业~节日礼品购物商城网站html模板 11个页面 (HTML+CSS+JavaScript)

    47.学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)

    48.HTML期末大作业~学生个人博客静态页面模板6个页面(HTML+CSS+JavaScript)

    49.HTML期末大作业~web前端开发个人博客HTML整站模板

    50.期末学生HTML个人网页作业作品蓝色的异清轩响应式个人博客模板源码(6个页面)bootstrap响应式博客网站模板html

    51.HTML期末大作业~简单的程序员个人博客网站模板源码(7个页面)(HTML+CSS)

    52.HTML期末大作业~简洁的个人博客网站前台页面HTML模板7个页面(html+css+js)

    53.HTML+CSS大学生个人网站作业模板~黑色的html5个人博客网站模板整站下载(5个页面)

    54.用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品

    55.HTML期末大作业~ 仿新浪微博个人主页html网站模板4个页面(HTML+CSS+JavaScript)

    56.HTML网页设计制作大作业(div+css)~ 环境保护(5个页面)

    57.HTML网页设计制作大作业 - 绿色环境保护HTML5网站模板(4个页面)

    58.web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)

    59.web前端期末大作业 html+css+javascript大学生体育运动网页设计模板代码 校园篮球网页作业成品

    60.HTML静态网页作业-餐饮美食网页8个页面(HTML+CSS+JavaScript)

    61.HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)

    62.个人设计web前端大作业~ 酒店网页设计(瑞豪国际酒店)(HTML5+CSS3+Bootstrap)

    63.大一实训网页制作大作业 ~ 农业产品网页2个页面(div+css)

    七、更多表白源码

    ❤100款 html+css+JavaScript 表白源码演示地址

    展开全文
  • 《网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》主要内容分为7个部分。第1部分是网页设计基础与HTML篇,包括网页设计基础知识、HTML基础。第2部分是Dreamweaver CS6网页制作篇,包括...
  • Html+Css+Javascript从入门到精通.pdf

    千次下载 热门讨论 2011-09-27 21:40:24
    Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
  • HTML+CSS网页设计与布局从入门到精通

    千次下载 热门讨论 2013-03-18 19:28:53
    HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTMLCSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
  • 用js+css+html+jsp编写的一个小系统
  • HTML静态网页作业-花店商城(如意花店)4个页面 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?...原始HTML+CSS...
    HTML静态网页作业-花店商城(如意花店)4个页面

    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

    原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

    作品介绍

    1.网页作品简介方面 :简洁网上花店模板html。喜欢的可以下载,文章页支持手机PC响应式布局。主要有:登录、注册、首页、留言板、全部商品 等总共4个页面html下载。

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

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

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

    一、作品演示

    1.花店首页

    HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_HTML静态网页作业

    2.全部商品

    HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_HTML静态网页作业_02

    3.留言板

    HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_HTML期末大学生网页设计作业_03

    4.登录、注册

    HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_web网页设计期末课程大作业_04

    二、代码目录

    HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_网上花店网页设计HTML_05

    三、代码实现
    <!doctype html>
    <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!-->
    <html lang="en">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <title>如意花店-留言板</title>
    
    <!--js-->
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/ddsmoothmenu.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script src="js/jquery.elastislide.js"></script>
    <script src="js/jquery.jcarousel.min.js"></script>
    <script src="js/jquery.accordion.js"></script>
    <script src="js/light_box.js"></script>
    <script type="text/javascript">$(document).ready(function(){$(".inline").colorbox({inline:true, width:"50%"});});</script>
    <!--end js-->
    
    <!-- Mobile Specific Metas ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS ================================================== -->
    
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/orange.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/ddsmoothmenu.css"/>
    <link rel="stylesheet" href="css/elastislide.css"/>
    <link rel="stylesheet" href="css/home_flexslider.css"/>
    
    <link rel="stylesheet" href="css/light_box.css"/>
    <script src="js/html5.js"></script>
    
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--[if lt IE 9]>
    			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    		<![endif]-->
    
    </head>
    <body>
    	<div class="mainContainer sixteen container">
                <!--Header Block-->
                <div class="header-wrapper">
                  <header class="container">
                    <div class="head-right">
                          <ul class="top-nav">
                                <li class=""><a href="#" title="我的账户">我的账户</a></li>
                                <li class="my-wishlist"><a href="#" title="购物清单">购物清单</a></li>
            
                                <li class="checkout"><a href="#" title="结算">结算</a></li>
                                <li class="log-in"><a href="account_login.html" title="登录">登录</a></li>
                          </ul>
                        
                      <section class="header-bottom">
                        <div class="cart-block">
    					<ul>
    						<li>(2)</li>
    						<li><a href="cart.html" title="Cart"><img title="Item" alt="Item" src="images/item_icon.png" /></a></li>
    						<li>购物车</li>
    					</ul>
    					<div id="minicart" class="remain_cart" style="display: none;">
    						 <p class="empty">您的购物车中有2件商品</p>
    						 <ol>
    						 	<li>
    								<div class="img-block"><img src="images/small_img.png" title="" alt="" /></div>
    								<div class="detail-block">
    									<h4><a href="#" title="玫瑰">玫瑰</a></h4>
    									<p>
    										<strong>1</strong> x ¥99.00
    									</p>
    									<a href="#">细节展示</a>
    								</div>
    								<div class="edit-delete-block">
    									<a href="#" title="Edit"><img src="images/edit_icon.png" alt="Edit" title="Edit" /></a>
    									<a href="#" title="Remove"><img src="images/delete_item_btn.png" alt="Remove" title="Remove" /></a>
    								</div>
    							</li>
    							<li>
    								<div class="img-block"><img src="images/small_img.png" title="" alt="" /></div>
    								<div class="detail-block">
    									<h4><a href="#" title="玫瑰">玫瑰</a></h4>
    									<p>
    										<strong>1</strong> x ¥99.00
    									</p>
    									<a href="#">细节展示</a>
    								</div>
    								<div class="edit-delete-block">
    									<a href="#" title="Edit"><img src="images/edit_icon.png" alt="Edit" title="Edit" /></a>
    									<a href="#" title="Remove"><img src="images/delete_item_btn.png" alt="Remove" title="Remove" /></a>
    								</div>
    							</li>
    							<li>
    								<div class="total-block">共计:<span>¥ 198.00</span></div>
    								<a href="cart.html" title="结算" class="orange-btn">结算</a>
    								<div class="clear"></div>
    							</li>
    						 </ol>
    					</div>
    				</div>
                        <div class="search-block">
                          <input type="text" value="搜索" />
                          <input type="submit" value="Search" title="Search" />
                        </div>
                      </section>
                    </div>
                    <h1 class="logo"><a href="index.html" title="Logo">
                      <img title="Logo" alt="Logo" src="images/logo.png" />
                      </a></h1>
                    <nav id="smoothmenu1" class="ddsmoothmenu mainMenu">
                      <ul id="nav">
                        <li class=""><a href="index.html">首页</a></li>
                        <li class=""><a href="category.html">全部商品</a></li>
                        
                        <li class="active"><a href="contact_us.html" title="Footwear">留言板</a></li>
                      </ul>
                    </nav>
                    
                    <div class="mobMenu">
                <h1>
                <span>菜单</span>
                <a class="menuBox highlight" href="javascript:void(0);">ccc</a>
                <span class="clearfix"></span>
                </h1>
                <div id="menuInnner" style="display:none;">
                       <ul class="accordion">
                           <li class=""><a href="index-2.html" title="Home">首页</a></li>
                        <li class="parent"><a href="category.html" title="Shop by">全部商品</a>
                          
                        </li>
                        <li class=""><a href="blog.html" title="Blog">Blog</a></li>
                        <li class=""><a href="faq.html" title="Faq">Faq</a></li>
                        <li class=""><a href="about_us.html" title="About us">About us</a></li>
                        <li class=""><a href="#" title="Pages">Pages</a></li>
                        <li class=""><a href="contact_us.html" title="Footwear">留言板</a></li>
                          <span class="clearfix"></span>
                       </ul>
                      
                 </div>      
                </div>
                    
                  </header>
                </div>
    <!--联系模块-->
    <section class="content-wrapper">
    	<div class="content-container container">
    		<div class="col-left">
    			<div class="block compare-block">
    				<div class="block-title">请把您的意见告诉我们</div>
    				
    			</div>
    			
    		</div>
    		<div  class="col-main">
    			<h1 class="page-title">请留言</h1>
    			<div class="contact-form-container">
    				<div  class="form-title">请填写您的联系方式</div>
    				<ul class="form-fields">
    					<li class="left">
    						<label>用户名<em>*</em></label>
    						<input type="text" />
    					</li>
    					<li class="left">
    						<label>邮箱<em>*</em></label>
    						<input type="text" />
    					</li>
    					<li class="left">
    						<label>电话</label>
    						<input type="text" />
    					</li>
    					<li class="full-row">
    						<label>您的建议<em>*</em></label>
    						<textarea></textarea>
    					</li>
    				</ul>
    				<div class="button-set">
    					<p class="required">* 必填项</p>
    					<button type="submit" class="form-button"><span>提交</span></button>
    				</div>
    			</div>
    		</div>
    		<div class="clearfix"></div>
    		<div class="news-letter-container">
    			<div class="free-shipping-block">
    				<h1>享受免费送货服务</h1>
    				<p>我们把所有的订单当做节日礼物送给你!</p>
    			</div>
    			<div class="news-letter-block">
    				<h2>免费送货电话</h2>
    				<input type="text" value="手机号"/>
    				<input class="submit-btn" type="submit" value="提交" />
    			</div>
    		</div>	
    	</div>
    </section>
    </div>
    <!--页尾模块-->
    <section class="footer-wrapper">
                  <footer class="container">
                    <div class="link-block">
                      <ul>
                        <li class="link-title"><a href="about_us.html">关于我们 </a></li>
                        <li><a href="#">售后政策 </a></li>
                        <li><a href="#">客户服务</a></li>
                        <li><a href="#">隐私权政策</a></li>
                      </ul>
                      <ul>
                        <li class="link-title"><a href="#">客户服务</a></li>
                        <li><a href="#">退换货</a></li>
                        <li><a href="#">购物保障</a></li>
                        <li><a href="contact_us.html">留言板</a></li>
                      </ul>
                      <ul>
                        <li class="link-title"><a href="#">服务条款</a></li>
                        <li><a href="#">新闻中心</a></li>
                        <li><a href="#">帮助</a></li>
                        <li><a href="#">服务条款</a></li>
                      </ul>
                      <ul>
                        <li class="link-title"><a href="#">我们的实力</a></li>
                        <li class="aboutus-block">本店商品已向全国2603个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务,让您购物无忧!<a href="#">更多</a> </li>
                      </ul>
                     
                             
                        </li>
                      </ul>
                    </div>
                    <div class="footer-bottom-block">
                      <ul class="bottom-links">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="contact_us.html">留言板</a></li>
                      </ul>
                      <p class="copyright-block">Copyright &copy; 2016.如意花店 All rights reserved.</p>
                    </div>
                  </footer>
                </section>
    </body>
    </html>
    
    

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

    web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_HTML期末大学生网页设计作业_06


    五、源码获取

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

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

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

    ❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

    HTML静态网页作业-网上花店4个页面(HTML+CSS+JS)_花店页面HTML_07

    六、更多HTML期末大作业作品文章

    1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

    2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

    3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

    4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

    5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

    6.HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)

    7.HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)

    8.HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)

    9.HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

    10.大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)

    11.HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)

    12.web前端大一实训~制作卡布漫画网站设计与实现(HTML+CSS+JavaScript)

    13.web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)

    14.HTML期末大作业~酒店网站模板(HTML+CSS+JavaScript)

    15.HTML学生网页设计作业源码~开心旅游网站设计与实现(HTML期末大作业)

    16.HTML奥运网页5页面文化 ~ 体育学生网页设计作业

    17.HTML我的家乡杭州网页设计作业源码(div+css)

    18.HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码

    19.HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面

    20.HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

    21.一套完整仿拉勾网HTML静态网页模板(含38个独立HTML)

    22.HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)

    23 Web大学生网页作业成品~美食餐饮网站设计与实现(HTML+CSS+JavaScript)

    24.HTML期末大作业~绿色农产品食品类网站设计与实现(HTML+CSS+JavaScript)

    25.HTML期末大作业~花店鲜花商城网站模板设计与实现(HTML+CSS+JavaScript)

    26.HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)

    27.HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品

    28.HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)

    29.HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)

    30.HTML期末大作业 ~ 凤阳智慧旅游官方旗舰店(我的家乡)(HTML+CSS+JavaScript)

    31.HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)

    32.HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)

    33.HTML期末大作业课程设计~动漫游戏官网10个页面(HTML+CSS+JavaScript)

    34.个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)

    35.HTML期末大作业~个人图片资源网页设计共5个页面(HTML+CSS+JavaScript)

    36.web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)

    37.HTML期末大作业~清新手工肥皂网站展示4个页面(HTML+CSS+JavaScript+Bootstrap)

    38.学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)

    39.HTML期末大作业~棋牌游戏静态网站(6个页面) HTML+CSS+JavaScript

    40.HTML期末大作业~速鲜站餐饮食品html网页(共6个页面)HTML+CSS+JavaScript

    41.HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(8个页面)(HTML+CSS)

    42.HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)

    43.HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)

    44.web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)

    45.web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)

    46.HTML期末大作业~节日礼品购物商城网站html模板 11个页面 (HTML+CSS+JavaScript)

    47.学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)

    48.HTML期末大作业~学生个人博客静态页面模板6个页面(HTML+CSS+JavaScript)

    49.HTML期末大作业~web前端开发个人博客HTML整站模板

    50.期末学生HTML个人网页作业作品蓝色的异清轩响应式个人博客模板源码(6个页面)bootstrap响应式博客网站模板html

    51.HTML期末大作业~简单的程序员个人博客网站模板源码(7个页面)(HTML+CSS)

    52.HTML期末大作业~简洁的个人博客网站前台页面HTML模板7个页面(html+css+js)

    53.HTML+CSS大学生个人网站作业模板~黑色的html5个人博客网站模板整站下载(5个页面)

    54.用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品

    55.HTML期末大作业~ 仿新浪微博个人主页html网站模板4个页面(HTML+CSS+JavaScript)

    56.HTML网页设计制作大作业(div+css)~ 环境保护(5个页面)

    57.HTML网页设计制作大作业 - 绿色环境保护HTML5网站模板(4个页面)

    58.web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)

    59.web前端期末大作业 html+css+javascript大学生体育运动网页设计模板代码 校园篮球网页作业成品

    60.HTML静态网页作业-餐饮美食网页8个页面(HTML+CSS+JavaScript)

    七、更多表白源码

    ❤100款 html+css+JavaScript 表白源码演示地址

    展开全文
  • HTML+CSS+JS详解

    千次阅读 2021-02-13 19:44:01
    **HTML工作原理:**HTML是部署在服务器上的文本文件,根据HTTP协议浏览器发出请求给服务器,服务器做出响应给浏览器返回一个HTML,浏览器解释执行HTML,从而显示内容 什么是HTMLHTML是超文本标记语言(Hyper Text...
  • html+css实现简单分页页码效果

    热门讨论 2015-04-19 17:59:37
    html+css实现简单分页页码效果源码,尚且没有复杂的后台,给前端新手学习之用
  • HTML+CSS实现轮播图效果

    千次阅读 热门讨论 2020-12-29 17:57:24
    HTML+CSS实现轮播图效果 效果图如下(想要源码或者感兴趣的小伙伴可以评论区留言哦!) HTML部分源代码如下: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta ...
  • 使用HTML+CSS+JS 实现贪吃蛇游戏

    千次阅读 2022-04-08 11:41:03
    使用HTML+CSS+JS 实现贪吃蛇游戏
  • HTML+CSS+JAVASCRIPT简介

    千次阅读 2020-02-25 21:17:52
    一、HTML HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。...CSS不仅可以静态地修饰网页,还可...
  • 【网页设计】期末大作业html+css(个人网站)写在前面代码 写在前面 这个作业呢使用的是html5+css3布局,用了一些jquery做交互效果。调用了百度地图的api。这是小萌新第一次发作业,请各位大佬凑合着看看哈。 先放几...
  • html+css做一个网页设计

    千次阅读 2021-06-07 00:29:29
    这个大一时候的网页作业,技术可能没那么高级,用的技术都是基础易懂的。 (li'mian'hai'yon) 图片

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,854,843
精华内容 741,937
关键字:

html+css

友情链接: index.zip