精华内容
下载资源
问答
  • Web前端静态页面.zip

    2019-05-11 14:37:39
    只包涵前端静态页面,包括html,css和js,有一整套的页面,包括首页,搜索,订单,个人主页,商标,注册,登陆和秒杀团购页面等。
  • web静态网站页面

    2018-04-03 17:21:05
    web前端编写的一个小型网站,能实现动态交互。主要用到了HTML、CSS和js以及JQuery等,还包括一些插件。
  • 前端的几个静态网页代码和效果

    千次阅读 2019-08-28 20:12:06
    前端的案例 1.html的form表单的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的操作符</title> </head> <body> <form ...

    前端的案例

    1.html的form表单的使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js的操作符</title>
    
    </head>
    <body>
        <form action ="" method="get" enctype="multipart/form-data">
            <p><label for = "1">用户名:<input type="text" name="user" id = "1"></p>
            <p>密&emsp;码:<input type="password" name="psw"></p>
    
            <p>
                性&emsp;别:
                <input type="radio" name="lalal1" value="male"> 男
                <input type="radio" name="lalal2" value="female"> 女
                <input type="radio" name="lalal3" value="secret"> 保密
            </p>
            <p>
                爱&emsp;好:
                <input type="checkbox" name="hobby" value="singing"> 唱歌
                <input type="checkbox" name="hobby" value="dance"> 跳舞
                <input type="checkbox" name = "hobby" value="rap"> rap
    
            </p>
            <p>
                上传文件:<input type="file">
            </p>
            <p>
                地&emsp;址:
                <select name="attr" id="">
                    <optgroup label="黑龙江省">
                        <option value="jms" selected>佳木斯</option>
                        <option value="hr">哈尔滨</option>
                    </optgroup>
                    <optgroup label="吉林省">
                        <option value="cc">长春</option>
                        <option value="sy">松原</option>
                    </optgroup>
                </select>
            </p>
            <p>
                个人简介:
                <textarea name="profile" rows = "10" cols = "20"></textarea>
            <p>
                 <input type="submit" value="提交">
                <input type="reset" value="重置">
            </p>
        </form>
    </body>
    </html>
    
    

    在这里插入图片描述

    2.背景样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景样式</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            } /*使你的页面能全部的契合浏览器*/
            .top{
                width: 100%;
                height: 64px;
                background: black;
            }
            .top .menu{
                width: 1200px;
                height: 100%;
                background: #6fa026;
                margin: 0 auto;
            } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin:0 auto是使子标签居中*/
            .middle{
                width: 100%;
                height: 500px;
                background: wheat;
            }
            .middle .content{
                width:1200px;
                height:100%;
                background: #3d3c75;
                margin:0 auto;
            }
            .bottom1{
                width: 100%;
                height: 100px;
                background: #775522;
            }
            .bottom1 .bot-top1{
                width: 1200px;
                height: 100%;
                background: gold;
                margin:0 auto;
            }
            .bottom2{
                width: 100%;
                height: 60px;
                background: black;
            }
            .bottom2 .bot-top2{
                width: 1200px;
                height:100%;
                background: coral;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="menu"></div>
        </div>
        <div class="middle">
            <div class="content"></div>
        </div>
        <div class="bottom1">
            <div class="bot-top1"></div>
        </div>
        <div class="bottom2">
            <div class="bot-top2"></div>
        </div>
    
    </body>
    </html>
    

    在这里插入图片描述
    这里为了截图方便而且能解全面所以我用的500px,如果调成800px会更好看一些。

    3.静态轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>静态轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                /*text-align: center;*/
            }
            .top{
                width: 100%;
                height: 64px;
                background: black;
            }
            .top .menu{
                width: 1200px;
                height: 100%;
                background: #6fa026;
                margin: 0 auto;
            } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin:0 auto是使子标签居中*/
            .middle{
                width: 100%;
                height: 800px;
                background: wheat;
            }
            .middle .content{
                width:1200px;
                height:100%;
                background:white;
                margin:0 auto;
            }
            .middle .content .con-left{
                height:100%;
                width: 850px;
                background: darkviolet;
                float: left;
            }
            .middle .content .con-left .banner{
                height: 200px;
                width:850px;
                background: cyan;
                position: relative;
            }
            .middle .content .con-left .banner .cir{
                /*height: 17px;*/
                /*width: 118px;*/
                /*background: #754e22;*/
                bottom: 20px;
                position: absolute;
                left: 50%;
                margin-left: -59px;
    
            }
            .middle .content .con-left .banner .cir li{
                height: 15px;
                width: 15px;
                float: left;
                border: 1px solid red;
                margin-left: 10px;
                border-radius: 50%;
                /*position: absolute;*/
            }
            .middle .content .con-left .banner .btn{
                font-size: 50px;
                color: white;
                height:200px;
                line-height: 200px;
            }
            .middle .content .con-left .banner .btn #left{
                position: absolute;
                left: 20px;
            }
            .middle .content .con-left .banner .btn #right{
                position: absolute;
                right: 20px;
            }
            .middle .content .con-left .banner img{
                height: 200px;
                width: 850px;
                position: absolute;
            }
            .middle .content .con-right{
                height:100%;
                width: 300px;
                background: #754e22;
                float: right;
            }
            .bottom1{
                width: 100%;
                height: 100px;
                background: #775522;
            }
            .bottom1 .bot-top1{
                width: 1200px;
                height: 100%;
                background: gold;
                margin:0 auto;
            }
            .bottom2{
                width: 100%;
                height: 60px;
                background: black;
            }
            .bottom2 .bot-top2{
                width: 1200px;
                height:100%;
                background: coral;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="menu"></div>
        </div>
        <div class="middle">
            <div class="content">
                <div class="con-left">
                    <div class="banner">
                        <ul class="pic">
                            <li><img src="D:\pathfinder\untitled1\8.jpeg" alt=""></li>
                            <li><img src="D:\pathfinder\untitled1\7.png" alt=""></li>
                            <li><img src="D:\pathfinder\untitled1\9.png" alt=""></li>
                            <li><img src="D:\pathfinder\untitled1\4.jpeg" alt=""></li>
                        </ul>
                        <ul class="btn">
                            <li id="left">&lt;</li>
                            <li id="right">&gt;</li>
                        </ul>
                        <ul class="cir">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="con-right"></div>
            </div>
        </div>
        <div class="bottom1">
            <div class="bot-top1"></div>
        </div>
        <div class="bottom2">
            <div class="bot-top2"></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述
    这个暂时还不能导入功能,动态的轮播图可以实现点击的事件。

    4.点击事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js事件操作</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background: cyan;
                text-align: center;
                line-height: 300px;
            }
            .wo{
                font-size: 30px;
                font-family: 华文楷体;
            }
            .set{
                width: 80px;
                height: 30px;
                background: gold;
                margin-left: 20px;
            }
        </style>
    
    </head>
    <body>
        <p>
            <label for="attr">样&emsp;式:</label>
            <input type="text" id="attr" placeholder="请输入css样式">
        </p>
        <p>
            <label for="attv">样式值:</label>
            <input type="text" id="attv" placeholder="请输入样式值">
        </p>
        <p>
            <input class="set" type="button" value="设置">
        </p>
        <div class="wo">我就是我</div>
    <script>
        var obj = document.querySelector("div");
        obj.onmouseenter = function () {
            obj.innerText ="我其实不是我"
        };
        obj.onmouseleave = function () {
            obj.innerText = "我就是我"
        };
        var input = document.querySelectorAll("input");
        input[2].onclick = function () {
          var attr = input[0].value;
          var attv = input[1].value;
          obj.style[attr] = attv;
          obj[attr] = attv;
        }
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述
    这个还是很好玩的,你可以直接通过在上面填充指令,下面就可以直接出现。

    5.动态轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                /*text-align: center;*/
            }
            .top{
                width: 100%;
                height: 64px;
                background: black;
            }
            .top .menu{
                width: 1200px;
                height: 100%;
                background: #6fa026;
                margin: 0 auto;
            } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin:0 auto是使子标签居中*/
            .middle{
                width: 100%;
                height: 800px;
                background: wheat;
            }
            .middle .content{
                width:1200px;
                height:100%;
                background:white;
                margin:0 auto;
            }
            .middle .content .con-left{
                height:100%;
                width: 850px;
                background: darkviolet;
                float: left;
            }
            .middle .content .con-left .banner{
                height: 200px;
                width:850px;
                background: cyan;
                position: relative;
            }
            .middle .content .con-left .banner .cir{
                /*height: 17px;*/
                /*width: 118px;*/
                /*background: #754e22;*/
                bottom: 20px;
                position: absolute;
                left: 50%;
                margin-left: -59px;
    
            }
            .middle .content .con-left .banner .cir li{
                height: 15px;
                width: 15px;
                float: left;
                border: 1px solid red;
                margin-left: 10px;
                border-radius: 50%;
                cursor: pointer;
                /*position: absolute;*/
            }
            .middle .content .con-left .banner .cir li:hover{
                background: white;
            }
            .middle .content .con-left .banner .btn{
                font-size: 50px;
                color: white;
                height:200px;
                line-height: 200px;
                display: none;
                cursor: pointer;
            }
            .middle .content .con-left .banner:hover .btn{
                display: block;
            }
            .middle .content .con-left .banner .btn #left{
                position: absolute;
                left: 20px;
            }
            .middle .content .con-left .banner .btn #right{
                position: absolute;
                right: 20px;
            }
            .middle .content .con-left .banner img{
                height: 200px;
                width: 850px;
                position: absolute;
                display: none;
            }
            .middle .content .con-left .banner .pic .show
            {
                display: block;
            }
            .middle .content .con-right{
                height:100%;
                width: 300px;
                background: #754e22;
                float: right;
            }
            .bottom1{
                width: 100%;
                height: 100px;
                background: #775522;
            }
            .bottom1 .bot-top1{
                width: 1200px;
                height: 100%;
                background: gold;
                margin:0 auto;
            }
            .bottom2{
                width: 100%;
                height: 60px;
                background: black;
            }
            .bottom2 .bot-top2{
                width: 1200px;
                height:100%;
                background: coral;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="menu"></div>
        </div>
        <div class="middle">
            <div class="content">
                <div class="con-left">
                    <div class="banner">
                        <ul class="pic">
                            <li><img class="show" src="D:\pathfinder\untitled1\8.jpeg" alt=""></li>
                            <li><img src="D:\pathfinder\untitled1\7.png" alt=""></li>
                            <li><img src="D:\pathfinder\untitled1\9.png" alt=""></li>
                            <li><img src="D:\pathfinder\untitled1\6.jpeg" alt=""></li>
                        </ul>
                        <ul class="btn">
                            <li id="left">&lt;</li>
                            <li id="right">&gt;</li>
                        </ul>
                        <ul class="cir">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="con-right"></div>
            </div>
        </div>
        <div class="bottom1">
            <div class="bot-top1"></div>
        </div>
        <div class="bottom2">
            <div class="bot-top2"></div>
        </div>
        <script>
            var obj = document.querySelectorAll(".cir li");
            var pic = document.querySelectorAll(".pic img");
            n = 1;
            for(let i=0;i<obj.length;i++)
                obj[i].onclick = function () {
                    for(let j=0;j<pic.length;j++)
                        if(i===j){
                        pic[j].className = "show";
                        n = j;
                        }
                        else{
                        pic[j].className = "";
                        }
            }
            var btn = document.querySelectorAll(".btn li");
            btn[0].onclick = function () {
                if(n>0){
                    pic[n].className = "";
                    n--;
                    pic[n].className = "show";
                }
                else {
                    pic[n].className = "";
                    n = pic.length-1;
                    pic[n].className = "show";
                }
            };
            btn[1].onclick = function () {
                pic[n].className = "";
                n = n + 1;
                // pic[n].className = "show";
                if(n > pic.length-1){
                    n=0;
                }
                pic[n].className = "show";
            };
            function auto1() {
                pic[n].className = "";
                n = n + 1;
                if(n > pic.length-1){
                    n=0;
                }
                pic[n].className = "show";
            }
            var timer = setInterval(auto1, 2000);
            var banner = document.querySelector(".banner");
            banner.onmouseenter = function(){
                clearInterval(timer);
            }
            banner.onmouseleave = function () {
                timer = setInterval(auto1, 2000);
            }
    
        </script>
    </body>
    </html>
    

    这个是动态的轮播图。
    在这里插入图片描述

    6.自己写的巨星不易

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>my_html</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .top{
                background: black;
                height: 60px;
                width: 100%;
            }
            .top .menu{
                background: green;
                width: 500px;
                height: 100%;
                line-height: 60px;
                text-align: center;
                margin: 0 auto;
                font-size: 25px;
                font-family: 华文仿宋;
                font-weight: bolder;
            }
            .mid{
                background: aqua;
                height: 600px;
                width: 100%;
            }
            .mid .content{
                background: white;
                width: 500px;
                height: 100%;
                margin: 0 auto;
                position: relative;
                /*float: left;*/
            }
            .mid .content .list{
                position: absolute;
                bottom: 20px;
                left: 50%;
                margin-left: -102px;
            }
            .mid .content .list li{
                background: gold;
                width: 20px;
                height: 20px;
                float: left;
                border: 1px solid red;
                margin-left: 30px;
                border-radius: 50%;
                cursor: pointer;
                text-align: center;
                line-height: 20px;
            }
             .mid .content .arrows{
                 font-size: 60px;
                 color: black;
                 height:200px;
                 line-height: 200px;
                 font-family: 华文琥珀;
                 cursor: pointer;
    
             }
             .mid .content .arrows #left{
                 position: absolute;
                 left: 20px;
                 bottom: 300px;
             }
             .mid .content .arrows #right{
                 position: absolute;
                 right: 20px;
                 bottom: 300px;
             }
            .mid .content img{
                width: 500px;
                height: 550px;
                position: absolute;
                display: none;
            }
            .mid .content .show{
                display: block;
            }
            .bottom{
                background: black;
                height: 80px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="menu">
                大家好,我叫毛不易
            </div>
        </div>
        <div class="mid">
            <div class="content">
                <ul class="list">
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                </ul>
                <img  src="D:\pathfinder\untitled1\1.jpeg" >
                <img class="show" src="D:\pathfinder\untitled1\4.jpeg">
                <img src="D:\pathfinder\untitled1\6.jpeg">
                <!--<img src="D:\pathfinder\untitled1\7.png">-->
                <ul class="arrows">
                    <li id="left">&lt;</li>
                    <li id="right">&gt;</li>
                </ul>
            </div>
        </div>
        <div class="bottom">
        </div>
        <script>
            var img = document.querySelectorAll(".content img");
            var list = document.querySelectorAll(".list li");
            n = 1;
            for(let i=0;i<list.length;i++){
                list[i].onclick = function () {
                    for(let j=0;j<img.length;j++){
                        if(i===j){
                            img[j].className = "show";
                            n = j ;
                        }
                        else {
                            img[j].className = "";
                        }
                    }
                }
            }
            var arrow = document.querySelectorAll(".arrows li");
            arrow[0].onclick = function () {
                if (n > 0) {
                    img[n].className = "";
                    n--;
                    img[n].className = "show";
                }
                else {
                    img[n].className = "";
                    n = img.length - 1;
                    img[n].className = "show";
                }
            };
            arrow[1].onclick = function () {
                img[n].className = "";
                n = n + 1;
                // pic[n].className = "show";
                if(n > img.length-1){
                    n=0;
                }
                img[n].className = "show";
            };
            function auto1() {
                img[n].className = "";
                n = n + 1;
                if(n > img.length-1){
                    n=0;
                }
                img[n].className = "show";
            }
            var timer = setInterval(auto1, 1000);
            var banner = document.querySelector(".content");
            banner.onmouseenter = function(){
                clearInterval(timer);
            }
            banner.onmouseleave = function () {
                timer = setInterval(auto1, 1000);
            }
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • html语言的注释方法 <!--注释内容--> HTML文档基础结构 <!--html语言中的注释--> <!doctype html><!--html文档的文档类型声明:这是一个html的文档,版本是5-->...meta cha...

    那么Web页面制作基础,能让你掌握什么呢?

           1.掌握Web基础知识。

           2.掌握HTML5基础知识。

           3.掌握CSS基础知识。

    网页设计源代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style type="txt/css">
        body{
            background-origin:padding-box;
            border: 2px;
        }
        p{
            font-family: 宋体;
            
    
        }
    
    
    </style>
    
    <body>
        <h1>楚乔传</h1>
        <strong>中国大陆 67集(TV版)/58集(DVD版)</strong>
        
        <p>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导,嘉纹、杨涛、陈岚编剧,赵丽颖、林更新、窦骁、李沁领衔主演,邓伦、金士杰特邀出演,王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。
            </p>
        <img src="./images/1.jpg" alt="">
        <p>第1集&nbsp; <a href="#Episode2">第2集</a>&nbsp<a href="#Episode3">第3集</a>&nbsp第4集&nbsp第5集</p>
        <p>
            第1集(分集以TV版为准)
        </p>
        <p id="Episode2">
                <h4 tyle="margin-bottom: 10px;">第2集</h4>
                <span
                    style="margin-left: 2em;"></span>楚乔伤病还未痊愈,便被宋大娘遣来干活。大姐汁湘为楚乔求情,却被宋大娘骂了一通。管家朱顺前来通知,过两日少爷宇文玥要在府上为燕洵世子举办生辰宴,谁要是敢出一点差错,便要将她打死,众人皆唯唯应了。楚乔便被宋大娘安排去搬花草,朱顺却叫住汁湘,说自己并没有为难楚乔,让汁湘报答他。眼见他就要对汁湘动手动脚,楚乔突然过来问汁湘兰花的位置,汁湘成功躲过朱顺的纠缠。宇文怀吩咐朱顺往宇文玥的酒里下毒,楚乔将这一切都收在眼里,却不动声色地看着。汁湘被安排给宇文玥斟酒,宇文玥察觉出不妥,不肯饮酒。宇文怀便笑言仿效古人,主人不饮酒,就杀美人。宇文玥知道有诈,依旧不肯饮酒。汁湘举着酒杯,苦苦请求。楚乔不愿见姐姐白白做了他们内斗的牺牲品,伺机打翻了酒杯,将众人的注意力吸引到了自己身上。楚乔便求诸位公子放过自己的姐姐,表示自己愿意替姐姐受罚。宇文怀见状,就要让人杀了楚乔。燕洵表示既是自己的生辰,便不愿见着打打杀杀,为楚乔求情。宇文怀却表示宇文府的规矩不能坏,不肯轻饶。燕洵建议玩个游戏,让老天来决定楚乔的生死。他拿出自己腰间的腰牌,腰牌一面龙纹,一面篆字,将它扔在地上,让楚乔来猜哪面朝上,若是猜对了,便免她死罪。楚乔看懂了燕洵的暗示,猜对了龙纹朝上,侥幸逃过一死,却是活罪难逃。楚乔被倒吊在树上已是晚间时分,宇文玥带人过来将她放了下来,却讽刺她。在姐妹们的帮助下逃出府外的楚乔,无意之中听到了朱顺与锦烛的对话,得知临惜有危险,又回到了宇文府。却不想,刚回到宇文府中,就看见宇文玥亲手将临惜杀掉,一脚踢进火堆之中。楚乔想冲进火堆救临惜出来,却被宇文玥踢起的石子打中小腿扑倒在地,当场被侍卫拿住。伤心欲绝的楚乔指责宇文玥滥杀无辜,自己的哥哥根本就不是细作。宇文玥却道,自己滥杀无辜又如何。受了伤的楚乔回到柴房,告诉了姐妹们五哥死去的消息。伤心的小八怨怪楚乔是个克星,克死了自己的家人,汁湘不让小八这样说楚乔,姐妹为了此事吵了起来。浓浓的难过夹杂着满满的无奈,倾袭着每一个荆家姐妹的心。
                </p><br>
                <p id="Episode3">
                <h4 style="margin-bottom: 10px;">第3集</h4>
                <span
                    style="margin-left: 2em;"></span>青山院灵堂肃穆,宇文玥一身孝衣,沉静的面色里透出几分隐隐的忧伤。宇文玥刚刚下令封棺,便被院子里闯进来的一位不速之客阻拦。来人正是三房的宇文怀,他不顾侍卫阻拦,出言嚣张傲慢,扬言要亲自开棺验尸。宇文玥百般阻拦未果,两人便在灵堂上动起手来。正在难分难解之间,宇文怀掷出去的剑让院门口立着的一位太监险险避过,继而尖锐的声音响起“护驾!贵妃娘娘在此,谁敢造次?”此言一出,惊得院里的宇文玥急急撇下了手中的武器,来向贵妃娘娘问安。宇文怀心知贵妃是宇文玥请来的救兵,却也无可奈何,只得停了手。一身雍容的贵妃娘娘开口便质问宇文怀,何以在青山院里闹事?宇文怀却恶人先告状,只道是宇文玥执意封棺,还逼得自己动手。宇文玥便回禀贵妃,祖父是身中西域奇毒而亡,自己是怕此毒再行伤人,便先焚毁杂物再封棺。柴房里,清醒过来的楚乔郁郁寡欢,连汁湘姐姐送来的药汤也不愿意喝。汁湘知道她是因为临惜的死自责便劝慰她,生逢乱世大家都是身不由己,叫她不要再责怪自己。楚乔的目光却透出坚毅,她告诉汁湘,自己是不会让临惜白白死去的,自己一定会好好活下去。说罢,端起药汤一饮而尽。婢女们都在院子里干活,就见有侍卫抬着一具尸体走了出去。婢女们纷纷议论,这是被送去极乐阁的婢女锦兰,因未被老太爷看上,便被折磨致死。宋大娘前来挑选送往极乐阁的婢女,楚乔被宋大娘指名要送去极乐阁。汁湘为了救下妹妹,便求了宋大娘,由自己顶替了楚乔去了极乐阁。极乐阁里,同汁湘一起被送进去的女孩子,没有一个人活着出来,汁湘也不例外。楚乔带着小七小八躲在暗处,亲眼看着汁湘被装在一辆破车上送出来,难过至极的三人,却不敢哭出声音,只能眼睁睁看着自己姐姐的尸体被人扔掉。事后,楚乔悄悄将汁湘的尸首埋了。姐妹三人拿着弄来的纸钱,在临惜和汁湘的坟前烧着,却被受了罚的宋大娘撞个正着。宋大娘想拉着她们去向宇文怀邀功,遂与楚乔姐妹三人起了争执。几人撕打之中,宋大娘从桥上滑落,被楚乔拉住,却终是因为太过沉重而落下了水。小七小八十分害怕,楚乔安慰她们,若是有一日东窗事发,自己会一力承当,叫姐妹们不要担心。可是她们谁也没有瞧见,有一个躲在暗处的影子,早已将这发生在深夜里的一切,尽数看在眼底。宇文玥依旧一副淡淡神情,只说人太过聪明了不见得是好事。燕洵不理会宇文玥的冷淡,只跟他说起他们宇文家的内斗,表示自己并不喜欢这些,自己只想做草原上自由翱翔的雄鹰。问及宇文玥想成为什么的时候,宇文玥也只是微微沉吟。燕洵却不理会宇文玥,他想起了楚乔,便从宇文玥的桌子上顺了一瓶伤药,径自来找楚乔了。却正巧撞上有侍卫要带楚乔去受罚,燕洵轻轻松松就替她解了围。但楚乔冷漠的神色却让燕洵很不解,楚乔告诉燕洵,自己的哥哥姐姐新丧,自己也朝不保夕,自然高兴不起来。
                </p><br>
                <p id="Episode4">
                <h4 style="margin-bottom: 10px;">第4集</h4>
                <span
                    style="margin-left: 2em;"></span>宇文玥挑选侍寝婢女的消息很快传了开来,听着小七小八的议论声,楚乔心底里萌生出了求生的新芽。她猛地意识到,自己只有离开宇文怀的爪牙,才能保护妹妹们的性命,才能为兄姐报仇。自己就像是墙角的弱草,只有借助强者的力量,才能与顽石对抗!楚乔下定决心要参加择选,她不顾别人异样的眼光,勇敢地走进了青山院。只可惜,她只是一个带着铁铃铛的奴婢,根本没有资格参加择选。但楚乔知道,自己已经没有退路,她一定要参加这次的择选。她不屈不挠地留了下来,固执的跪在院子里不肯起来。宇文玥听闻,只道她是不自量力,便由着她跪,并不理会她。屋外烈日当头,楚乔在烈日下烤着,却依旧坚持着。时间一分一秒流逝,外头已是月上中天,楚乔还在院子中跪着,宇文玥默不作声地在暗处瞧着倔强的楚乔,面上若有所思。侍卫想要劝楚乔回去,却见楚乔并无退意,就要将她架走。宇文玥却出来制止了侍卫,他看着跪在地上的楚乔,问她为什么要来参加择选。楚乔目光坚定的看着他,说自己想要活下去。宇文玥并不相信楚乔的意图,他继续问楚乔,自己亲手杀死了她的哥哥,她却来求着自己收她做侍寝婢女,尊严何在。楚乔面无表情,目光却依旧坚定,作为奴婢,命都保不住,哪里还有尊严。宇文玥看了一眼楚乔,问她是否知道侍寝婢女是要在主人床底之间承欢侍奉。楚乔紧紧握住了自己的手,卑微地叩头,请公子留下奴婢。宇文玥似是沉思了一会儿,便向侍卫下令,准许楚乔参加择选。择选开始,众多的婢女聚到一起,便免不了生出是非。楚乔本就是因着公子格外开恩才得以参选,自然引得其他人对其不满。银铃铛的大丫鬟锦烛,看不惯楚乔私自放飞公子豢养的鹦鹉,想暗地里使坏抓坏楚乔的衣服,不想,却被楚乔反手夺走了衣衫,弄得失了仪态。宇文玥将这一切都瞧在眼里,看出了楚乔身手敏捷,倒是个练武的苗子。第一场是蒲棋,楚乔并不太懂,遂很惨淡地输掉一局。第二局是烹茶,依旧不是楚乔的强项,但她知道自己不能再输了。楚乔仔细观察着周围的婢女们如何烹茶,突然计上心头。她跑到井边打了新鲜的井水上来,又顺手摘了一片叶子,照着别的婢女的法子,有样学样,也烹制出了一杯甘冽的茶水。楚乔赢了第二局。第三局,默记梵文佛经,一柱香时间去记,再用一柱香时间默写。楚乔虽然不会握笔,更不会写字,但她却凭借超人的记忆,将佛经一字不差地默写了下来。但楚乔却因为没有署名,而被宇文玥责问。楚乔却道,规则里并没有要求署名,自己只是按照规则来做,并无不妥。宇文玥要求只要楚乔能够在经文上署上自己的名字,这一局就算她赢。这可难不倒楚乔,她从自己的头发上拿下铜铃铛,蘸了墨,稳稳地印了上去。宇文玥不再说话,但他却在回过身以后,在嘴角勾起了一抹微不可察的笑意。中选后的楚乔被带来见宇文玥,宇文玥再次问她,为何要来做自己的侍寝婢女。楚乔跪下回话,自己是为了活下去。宇文玥不信楚乔会忘记自己亲手杀了她哥哥的仇恨,而楚乔却表示自己已经答应过姐姐,要好好照顾两个妹妹。
                </p><br>
                <p id="Episode5">
                <h4 style="margin-bottom: 10px;">第5集</h4>
                <span
                    style="margin-left: 2em;"></span>楚乔一觉醒来,忽觉身边有些异样,那躺在不远处的不就是冷脸面瘫的宇文玥嘛,尖叫声不经思考就脱口而出。宇文玥不慌不忙的坐起身,冷言嘲她大惊小怪,这侍寝的机会不正是她想要的吗。楚乔凌厉出手反抗,宇文玥趁此机会教她功夫,两人之间不免有了肢体接触,宇文玥将她拦腰抱起,旋转数圈。宇文玥第一次招人侍寝,在青山院里极为轰动。一大早锦烛赶去送汤。听到房外的动静,宇文玥特意与楚乔亲密搂抱,温柔宠溺地亲自喂她吃粥,锦烛出去后,宇文玥立马推开了楚乔,好像刚才温柔似水的不是他一样,冷言让她整理被她玷污的床铺。楚乔瞥了眼床上的落红,面露不屑,明明就是他故意弄上的。楚乔侍寝后还是身份低下的铁铃铛,比之锦烛这样银铃铛的大丫鬟还是差了很多。锦烛对楚乔嫉妒不已,小七、小八听不下去了,出言为楚乔抱不平。锦烛气而动起手来,楚乔随手就制住了她。碧水河畔,杨柳依依,楚乔坐在栈桥边,奋力地洗着衣服。燕洵牵马来到河边找她,调笑宇文玥为楚乔取的名字-星儿,正好与宇文玥的玥字相和,燕洵满脸揶揄,笑说宇文玥矫情。楚乔懒得和他计较,端起盆就要走。燕洵不依不饶,耍赖般的把自己的爱驹交给她牵着。楚乔的性子甚合燕洵心意,他特意去找宇文玥要讨了她去,否则就赖在青山院不走了。女奴们居住的小院里,楚乔的特殊待遇遭到以锦烛为首的部分女奴妒忌,连带着她的两位妹妹小七、小八也受到排挤,处处被为难。楚乔为妹妹出头,惹得锦烛满脸怒气,与她动起手来,甚至不惜暗箭伤人,千钧一发之际,宇文玥及时出手,才免得楚乔被伤。锦烛恶人先告状,假惺惺地说是在维护青山院的规矩。宇文玥长身玉立,脸色平静无波看不出喜怒,只说要将楚乔带回去惩罚。他们走后,锦烛的跟随者们趾高气昂,对小七、小八嘲讽更加变本加厉,仿佛宇文玥的态度已经说明了一切。而随宇文玥而去的楚乔,不想白白受到惩罚,她向宇文玥说明当时情况,表明自己只是看不惯弱者被欺负。宇文玥面色冷峻,告诉她强者为王,身为弱者没资格为人讨公道。楚乔心有不甘,请他指点何为强者。假山流水淙淙,走过水上蜿蜒的石块,宇文玥带楚乔进入密室。宇文玥让她掷石头,烛火晃动,乱箭齐发,楚乔一时应付不来,但渐渐地身手越来越快,闪躲越发及时。接下来的三个时辰,楚乔都要和乱箭、石子为伴。她不断被击中,但眼神却越发坚韧,要报仇,就要忍常人所不能忍
                </p>
    </body>
    </html>
    

    编写完成后可以根据自己的喜好对网页进行相应的调整和css设计

    效果展现:

     

     

    展开全文
  • 静态小米商城首页。 下半部分由于全是图片的填充,不想做重复工作,所以只是划分了块,有需要的自己填充图片即可。
  • 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码,提取出JS、Css、Image、Picture、Flash等静态文件网址,再从下载完好的Css代码中提取出Image静态文件网址,通过网址下载静态文件,根据软件设置...
  • 用bootstrap做的一个校园前端实训项目,有很强的参考价值。
  • Web前端开发学习1:静态网页

    千次阅读 2015-10-21 12:20:12
    静态网页概述  在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为“静态网页”,静态网页是 标准的HTML文件,它的文件扩展名是.htm、.html,可以包含文本、图像、声音、FLASH动画、...
           一静态网页概述 
    

           在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为“静态网页”,静态网页是

    标准的HTML文件,它的文件扩展名是.htm、.html,可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX

    控件及JAVA小程序等。静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的。静态网页是相对于动态

    网页而言,是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦,适用于一般更新较

    少的展示型网站。容易误解的是静态页面都是htm这类页面,实际上静态也不是完全静态,他也可以出现各种动态的

    效果,如GIF格式的动画、FLASH、滚动字幕等。

           二静态网页介绍

           静态网页有时也被称为平面页。静态网页的网址形式通常为htm(超文本标记语言)结尾 ,还有就是以超文本标

    记语言(.htm、.html)、.shtml、.xml(可扩展标记语言)等为后缀的。在超文本标记语言格式的网页上,也可以出现

    各种动态的效果,如.GIF格式的动画、FLASH、滚动字幕等,这些“动态效果”只是视觉上的,与下面将要介绍的动态

    网页是不同的概念。静态网页面通常是超文本标记语言文档存储为文件在文件系统里头,并且可以通过HTTP访问网

    络服务器。

           三静态网页的特点

           1静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”;

    (动态网页中的“?”对搜索引擎检索存在一定的问题,搜索引擎一般不可能从一个网站的数据库中访问全部网页,或

    者出于技术方面的考虑,搜索蜘蛛不去抓取网址中“?”后面的内容。)

           2网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,

    也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件;

           3静态网页的内容相对稳定,因此容易被搜索引擎检索;

           4静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难;

           5静态网页的交互性较差,在功能方面有较大的限制。

           6页面浏览速度迅速,过程无需连接数据库,开启页面速度快于动态页面。

           7减轻了服务器的负担,工作量减少,也就降低了数据库的成本。

           四静态网页的优点

           1可以公开(即副本可以证明给任何人)。

           2托管没得任何特殊的要求。(不需要特殊的中间软件比如超文本预处理器、公共网关接口)

           3没得网络服务器或应用服务器,比如直接从CD-ROM(激光唱片-只读存储器)或USB闪存驱动器读取内容,可

    以通过网络浏览器直接访问。

           4网站更安全,HTML页面不会受Asp相关漏洞的影响;而且可以减少攻击,防SQL注入。数据库出错时,不影响

    网站正常访问。

           五静态网页的缺点

           1任何个性化或交互都会运行在客户端之上。

           2没有自动化的工具,维护大量的静态页面文件是不现实的。

           3无法充分支持用户/客户的需求(外观选择,浏览器的支持,Cookie)

           六静态网页与动态网页的区别

           1网页制作使用的制作语言:

           静态网页使用语言:超文本标记语言(标准通用标记语言的一个应用)

           动态网页使用语言:超文本标记语言+ASP或超文本标记语言+PHP或超文本标记语言+JSP或超文本标记语言

    +ASP.NET等。

           2程序是否在服务器端运行,是重要标志。

           在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页, ASP、

    PHP、JSP、ASP.NET、CGI等。运行于客户端的程序、网页、插件、组件,属于静态网页,例如 html 页、Flash、

    JavaScript、VBScript等等,它们是永远不变的。

           七静态网页与动态网页的联系

           1静态网页和动态网页各有特点,网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多

    少,如果网站功能比较简单,内容更新量不是很大,采用纯静态网页的方式会更简单,反之一般要采用动态网页技术

    来实现。静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起

    来比较麻烦,适用于一般更新较少的展示型网站。

            2静态网页是标准的HTML文件,它的文件扩展名是.htm或.html,可以包含文本、图像、声音、FLASH动画、客

    户端脚本和ActiveX控件及JAVA小程序等。尽管在这种网页上使用这些对象后可以使网页动感十足,但是,这种网页

    不包含在服务器端运行的任何脚本,网页上的每一行代码都是由网页设计人员预先编写好后,放置到Web服务器上

    的,在发送到客户端的浏览器上后不再发生任何变化,因此称其为静态网页。静态网页是网站建设的基础,静态网页

    和动态网页之间也并不矛盾,为了网站适应搜索引擎检索的需要,即使采用动态网站技术,也可以将网页内容转化为

    静态网页发布。动态网站也可以采用静动结合的原则,适合采用动态网页的地方用动态网页,如果必要使用静态网

    页,则可以考虑用静态网页的方法来实现,在同一个网站上,动态网页内容和静态网页内容同时存在也是很常见的事

    情。

           想要有更详细的静态网页了解可以在百度百科中学习:点击打开链接

    展开全文
  • html静态网页设计 采用的外部样式来设计贵美商城网站
  • web-resource 项目静态资源目录可根据不同业务结构进行调整。 下面只是个人当前的一个项目 ###静态目录结构 css common *业务快名称 ... img common *业务快名称 ... js core - 为核心基类 ctrl - 为业务组件 plugs ...
  • WEB前端开发简易网页制作

    千次阅读 多人点赞 2020-04-04 12:54:27
    效果 ...网页代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ ...

    效果

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

    代码如下:

    • 网页代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            body{
                margin: 1%;
                min-height: 700px;
            }
            header{
                height: 180px;
                margin: 1%;
                font-family: 黑体;
                color: whitesmoke;
                font-size: 90px;
                text-align: center;
                border-radius: 10px 10px 10px 10px;
                border-color: whitesmoke;
                border-style: groove;
                line-height: 180px;
                overflow: hidden;
            }
            nav{
                color: whitesmoke;
                border-radius: 10px 10px 10px 10px;
                margin: 1%;
                width: 20%;
                height: 500px;
                display: block;
                float: left;
                scroll-margin: 0;
                border-color: whitesmoke;
                border-style: ridge;
            }
            .menu{
                font-size: 40px;
                height: 80px;
                overflow: hidden;
                transition: 1s;
                text-align: left;
            }
            .menu:hover{
                text-align: left;
                height:330px
            }
            nav ul li{
                list-style: none;
                fontsize: 30px;
                line-height: 200%;
            }
            iframe{
                margin: 1%;
                border-style: ridge;
                display: block;
                color: whitesmoke;
                border-radius: 10px 10px 10px 10px;
                float: right;
                height: 500px;
                scroll-margin: 0;
                width: 75%;
            }
            a{
                text-decoration: none;
            }
            a:link{
                color: white;
            }
            a:visited{
                color: darkred;
            }
            a:hover{
                color: coral;
            }
            footer{
                width:95%;
                text-align: center;
                color: white;
                fontsize: 30px;
            }
        </style>
    </head>
    <body background="bg.jpg" style="background-repeat: no-repeat;background-size: 100% 100%; background-attachment: fixed">
    <header>
        EVE 星战前夜
    </header>
    <article>
        <nav>
            <ul>
                <li class="menu">游戏相关
                    <ul>
                        <li><a href="data.html" target="choose">游戏资料</a> </li>
                        <li><a href="activity.html" target="choose">游戏活动</a> </li>
                        <li><a href="shop.html" target="choose">游戏商城</a> </li>
                    </ul>
                </li>
                <hr style="width: 80%"/>
                <li class="menu">用户中心
                    <ul>
                        <li><a href="login.html" target="choose">用户登录</a></li>
                        <li><a href="personal.html" target="choose">个人中心</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <iframe name="choose" id="choose">
        </iframe>
    </article>
    <footer>LXT版权所有 COPYRIGHT © 1998 - 2020 LXT. ALL RIGHTS RESERVED
    </footer>
    </body>
    </html>
    
    • 框架代码模板
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
        header{
            color: red;
            text-align: left;
            font-size: 40px;
            height: 60px;
            margin: 10px;
            line-height: 60px;
            overflow: hidden;
        }
        nav{
            min-height: 380px;
            display: block;
            float: top;
            margin: 10px;
        }
        p{
            color: white;
            font-size: 100px;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        a:link{
            color: white;
        }
        a:visited{
            color: darkred;
        }
        a:hover{
            color: coral;
        }
        </style>
    </head>
    <body>
    <header>
        <a href="1.html">资料1 |</a>
        <a href="2.html">资料2 |</a>
        <a href="3.html">资料3 |</a>
        <a href="4.html">资料4 |</a>
        <a href="5.html">资料5 |</a>
        <a href="6.html">资料6 |</a>
        <a href="7.html">资料7 |</a>
        <a href="8.html">资料8 </a>
    </header>
    <hr style="width: 100%"/>
    <article>
        <nav>
            <p>资料内容</p>
        </nav>
    </article>
    <footer>
        这是尾部
    </footer>
    </body>
    </html>
    
    展开全文
  • 仿oppo网站(前端静态页面).rar
  • web前端期末大作业

    2020-12-17 09:43:39
    2.web网页大作业 3.大学生期末网页大作业-6页面的网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高,但交选修作业就足够了。 4.免费大学生网页设计制作作业作品下载dreamweaver制作静态...
  • 此项目实现了动态网页的登录,增加,删除,修改等多个功能,包括前台和后台管理
  • web前端开发流程图

    2018-12-31 11:47:22
    本资源是是以思维导图的形式展示了关于Web前端项目开发的流程图,很详细,需者自取。
  • 一日游静态网页.rar

    2020-08-14 17:16:25
    一个HTML开发的纯静态页面,适合前端新手
  • 最新Vue面试题网址:2021年 Vue经典面试题 -- 必问知识点 --(包含答案)_xm1037782843的博客-CSDN博客_vue面试题 敬请关注公众 :包含全套 Vue 最新面试题 js最近面试题 等大量前端知识技术。 部分都是百度的答案...
  • 英雄联盟LOL学生网页设计作品:网页作品为DIV+CSS设计制作的单页面,简单做了CSS样式。DW初学者可使用。
  • 网上书店静态网页代码

    热门讨论 2011-03-23 15:21:17
    基于html的网上书店开发项目,内存源代码,可用myeclipse运行,内附图片等资源
  • 原始HTML+CSS+JS页面设计,可以学习学习,大学网页设计作业,很好的,很好的~~这是一个不错的网页制作,画面精明,非常适合初学者学习使用。
  • web前端开发(一)—HTML基础

    万次阅读 多人点赞 2018-07-31 23:41:15
    web前端简介 什么是HTML? HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、...
  • 静态网页 学生管理系统 学生信息管理系统 页面设计。 静态网页 学生管理系统 学生信息管理系统 页面设计。 这是一个网页模板,里面有10多个页面,没有采用前端框架 静态网页 学生管理系统
  • HTML代码实现简易购物车-web前端教程

    千次阅读 2020-07-04 17:08:20
    网上关于购物车实现的代码非常多,本次的这篇文章主要是和大家分享了HTML代码实现简易购物车,有需要的小伙伴可以看一下,接下来讲解一下具体的实现。 1、用html实现内容; 2、用css修饰外观; 3、用js(jq)设计动效...
  • 静态网页!无后台!一个多肉植物网页,页面齐全共十一个页面,代码简单易懂,可用Dreamweaver进行修改
  • 设计一个简单的静态音乐网站。下载时请注意,此资源只有前端静态样式,包括首页,歌手详情,音乐论坛,注册等界面设计。并没有数据后端交互。下载后直接打开【index.html】进入首页即可。
  • web网页大作业.zip

    2019-12-07 00:58:39
    web网页大作业.zip
  • web前端常用代码集合

    千次阅读 2017-08-19 14:08:49
    在线静态资源公共库 http://cdn.code.baidu.com/ 在线jq库: 添加class,移除class: $("#box").addClass("active"); $("#box").removeClass("active"); 设置属性,移除属性...
  • web前端编程实战实例:制作静态京东首页

    千次阅读 多人点赞 2018-08-07 10:35:52
    <div class="div1_02 img_bigger"><a href="#"><p><img src="./静态页面素材/Images/icon_11.PNG">去购物车结算  </p></a> <div class="clear"></div><!--清除浮动--> <div class="div2_01"><a href...
  • OPPO官网页面前端代码

    2021-01-10 13:44:05
    OPPO官网页面前端代码
  • 这是一个简单的京东静态页面布置,希望对大家有帮助,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 100,940
精华内容 40,376
热门标签
关键字:

web前端静态网页代码