weixin_30699443

实现一个div中内容从高度为0变为有值实例

Q1：

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <link rel="stylesheet" href="js/basecss.css" />
    head>
    <style>
        #div_Main{
      
            border: 1px solid red;
            width: 940px;
            height: 320px;
            margin: 0 auto;
        }
        #div2{
      
            margin-right: -20px;
            margin-bottom: -20px;
            /*overflow: hidden;*/
        }
        #div_1,#div_2,#div_3,#div_4,#div_5,#div_6{
      
            margin-right: 20px;
            margin-bottom: 20px;
            float: left;
            width: 300px;
            height: 150px;
            
            position: relative;
            overflow: hidden;
        }
        #div_1{
      
            background-image: url(../images/七道功夫烧肉丸含汤套餐.jpg);
        }
        #div_2{
      
            background-image:url(../images/七道功夫烧肉丸菜.jpg);
        }
        #div_3{
      
            background-image:url(../images/冬菇鸡腿肉汤套餐.jpg);
        }
        #div_4{
      
            background-image:url(../images/冬菇鸡腿肉饭.jpg);
        }
        #div_5{
      
            background-image:url(../images/冬（香）菇鸡腿肉菜.jpg);
        }
        #div_6{
      
            background-image:url(../images/卤肉冬菇鸡双人餐GFS.jpg);
        }
        .div_tip{
      
            position: absolute;
            border: 1px solid red;
            width: 300px;
            height: 0;
            z-index: 10;
            bottom: 0;
            background: #210a0a38;
            color: white;
            transition: all 1s;
        }
        .div_left{
      
            width: 220px;
            height: 100px;
            float: left;
        }
        .div_right
            width: 80px;
            height: 100px;
            float: left;
            /*line-height: 100px;
            text-align: center;*/
            
        }
        
        .gg{
      
            position: relative;
            overflow: hidden;
            }
        
        .div_tipTop{
      
            position: absolute;
            border: 1px solid red;
            width: 300px;
            height: 40px;
            z-index: 100;
            bottom: 0;
        }
        .div_left1{
      
            width: 220px;
            height: 40px;
            float: left;
            line-height: 40px;
            text-align: center;
            background: red;
        }
        .div_right2{
      
            width: 80px;
            height: 40px;
            float: left;
            line-height: 40px;
            text-align: center;
            background: red;
        }
        .span2{
      
            padding-left:40px ;
        }
        .span1{
      
            padding: 10px;
        }
        #div_1:hover .div_tip,#div_2:hover .div_tip,#div_3:hover .div_tip,#div_4:hover .div_tip,#div_5:hover .div_tip,#div_6:hover .div_tip{
      
            height: 100px;
            
        }#div_1:hover .div_tipTop,#div_2:hover .div_tipTop,#div_3:hover .div_tipTop,#div_4:hover .div_tipTop,#div_5:hover .div_tipTop,#div_6:hover .div_tipTop{
      
            display: none !important;
        }
        
    style>
    <body>
        <div id="div_Main">
            <div id="div2">
                <div id="div_1" class="gg">
                    <div class="div_tipTop">
                        <div class="div_left1">珠海东方印象大酒店div>
                        <div class="div_right2">￥395/起div>
                    div>
                    <div class="div_tip">
                        <div class="div_left">
                            <span class="span2">珠海东方印象大酒店span><br />
                            <span class="span1">
                                这是一个美丽的环境，相信你会亨熙华这里的，也祝你居住愉快，哈哈哈哈哈哈哈。
                            span>
                        div>
                        <div class="div_right">￥395/起div>
                    div>
                div>
                <div id="div_2" class="gg">
                    <div class="div_tipTop">
                        <div class="div_left1">珠海东方印象大酒店div>
                        <div class="div_right2">￥395/起div>
                    div>
                    <div class="div_tip">
                        <div class="div_left">
                            <span class="span2">珠海东方印象大酒店span><br />
                            <span class="span1">
                                这是一个美丽的环境，相信你会亨熙华这里的，也祝你居住愉快，哈哈哈哈哈哈哈。
                            span>
                        div>
                        <div class="div_right">￥395/起div>
                    div>
                div>
                <div id="div_3" class="gg">
                    <div class="div_tipTop">
                        <div class="div_left1">珠海东方印象大酒店div>
                        <div class="div_right2">￥395/起div>
                    div>
                    <div class="div_tip">
                        <div class="div_left">
                            <span class="span2">珠海东方印象大酒店span><br />
                            <span class="span1">
                                这是一个美丽的环境，相信你会亨熙华这里的，也祝你居住愉快，哈哈哈哈哈哈哈。
                            span>
                        div>
                        <div class="div_right">￥395/起div>
                    div>
                div>
                <div id="div_4" class="gg">
                    <div class="div_tipTop">
                        <div class="div_left1">珠海东方印象大酒店div>
                        <div class="div_right2">￥395/起div>
                    div>
                    <div class="div_tip">
                        <div class="div_left">
                            <span class="span2">珠海东方印象大酒店span><br />
                            <span class="span1">
                                这是一个美丽的环境，相信你会亨熙华这里的，也祝你居住愉快，哈哈哈哈哈哈哈。
                            span>
                        div>
                        <div class="div_right">￥395/起div>
                    div>
                div>
                <div id="div_5" class="gg">
                    <div class="div_tipTop">
                        <div class="div_left1">珠海东方印象大酒店div>
                        <div class="div_right2">￥395/起div>
                    div>
                    <div class="div_tip">
                        <div class="div_left">
                            <span class="span2">珠海东方印象大酒店span><br />
                            <span class="span1">
                                这是一个美丽的环境，相信你会亨熙华这里的，也祝你居住愉快，哈哈哈哈哈哈哈。
                            span>
                        div>
                        <div class="div_right">￥395/起div>
                    div>
                div>
                <div id="div_6" class="gg">
                    <div class="div_tipTop">
                        <div class="div_left1">珠海东方印象大酒店div>
                        <div class="div_right2">￥395/起div>
                    div>
                    <div class="div_tip">
                        <div class="div_left">
                            <span class="span2">珠海东方印象大酒店span><br />
                            <span class="span1">
                                这是一个美丽的环境，相信你会亨熙华这里的，也祝你居住愉快，哈哈哈哈哈哈哈。
                            span>
                        div>
                        <div class="div_right">￥395/起div>
                    div>
                div>
            div>
        div>
    body>
html>

结果:

Q2:文字阴影，div阴影，文字变亮

DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>title>
        <style>
            .box {
      
                width: 500px;
                height: 200px;
                background: gainsboro;
                font: 43px/200px "microsoft yahei";
                color: darkblue;
                text-align: center;
                margin: 0 auto;
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 
                0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
                position: relative;
                top: -250px;
                left: -380px;
                
            }
            
            .box:before
            ,.box:after {
      
                content: ' ';
                position: absolute;
                bottom: 10px;
                left: 5px;
                width: 50%;
                height: 20%;
                box-shadow: 0 10px 20px #ccc;
                transform: rotate(-3deg);
                z-index: -1;
            }
            
            .box:after {
      
                left: auto;
                right: 5px;
                transform: rotate(3deg);
            }
            #div0{
      
                width: 600px;
                height: 300px;
                background: darkslateblue;
                position: relative;
                z-index: -10;
            }
        style>
    head>

    <body>
        <div id="div0">
            
        div>
        <div class="box">
            Hello World By CSS3
        div>
    body>

html>

结果:

Q3:风筝

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <style>
        #div0{
      
            position: relative;
            width: 160px;
            height: 160px;
            margin: 0 auto;
            top: 40px;
            transform-origin: 50% 50%;
            animation:mymove 1s linear infinite;
        }
        #div0:hover{
      
            transform-origin: 50% 50%;
            animation:mymove 0.3s linear infinite;
        }
        #div1,#div2,#div3,#div4{
      
            position: absolute;
        }
        #div1{
      
            
            width: 0;
            height: 0;
            border-bottom: 40px solid green;
            border-top: 40px solid gainsboro;
            border-left:40px solid transparent;
            border-right: 40px solid gainsboro;
        }
        #div2{
      
            width: 0;
            height: 0;
            border-bottom: 40px solid red;
            border-top: 40px solid transparent;
            border-left:40px solid red;
            border-right: 40px solid yellow;
            left: 80px;
        }
        #div3{
      
            width: 0;
            height: 0;
            border-bottom: 40px solid blue;
            border-top: 40px solid black;
            border-left:40px solid blue;
            border-right: 40px solid transparent;
            left: 80px;
            top:80px;
        }
        #div4{
      
            width: 0;
            height: 0;
            border-bottom: 40px solid transparent;
            border-top: 40px solid deepskyblue;
            border-left:40px solid deepskyblue;
            border-right: 40px solid darkgreen;
            top:80px;
        }
        #div5{
      
            border: 1px solid red;
            height: 310px;
            width: 10px;
            background: darkred;
            left: 670px;
            top:-42px;
            position: relative;
            z-index: -4;
        }
        @keyframes mymove{
      
            from{transform: rotate(0deg);}
            to{
      transform: rotate(180deg);}
        }
    style>
    <body>
        <div id="div0">
            <div id="div1">div>
            <div id="div2">div>
            <div id="div3">div>
            <div id="div4">div>
        div>
        <div id="div5">div>
    body>
html>

结果:

qQ4:弹出遮罩层

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <style type="text/css">
        html,body{
      
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }
        #div0{
      
            width: 100%;
            height: 100%;
            background: #c29292cc;
            margin: auto;
            position: absolute;
            left: 0;top: 0;bottom: 0;right: 0;
            display: none;
        }
        #input1{
      
            color: black;
        }
        #div1{
      
            border:1px solid red;
            width: 700px;
            height: 350px;
            background: navajowhite;
            margin: auto;
            position: absolute;
            left: 0;top: 0;bottom: 0;right: 0;
        }
        #div2{
      
            width: 100%;
            height: 80px;
            background: red;
            text-align: center;
            color: white;
            line-height: 80px;
        }
        #div3{
      
            width: 100%;
            height: 100px;
            text-align: center;
            color: royalblue;
            line-height: 100px;
            font-size: 25px;
            background: white;
        }
        #div4{
      
            width: 100%;
            height: 169px;
            text-align: center;
            line-height: 169px;
            background: white;
        }
        #input2{
      
            color: white;
            background: red;
            text-align: center;
            width: 140px;
            height: 50px;
            font-size: 20px;border-radius: 15px;
        }
        #div5{
      
            border: 1px solid white;
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 27px;
            margin-right: 20px;
            position: relative;
            
            border-radius: 10px;
        }
        #div5:after{
      
            content: "";
            position: absolute;
            width: 12px;
            height: 0px;
            border: 1px solid white;
            left:5px;
            top:6px;
            transform-origin: 10% 0%;
            transform: rotate(45deg);
        }
        #div5:before{
      
            content: "";
            position: absolute;
            width: 12px;
            height: 0px;
            border: 1px solid white;
            left:5px;
            top:5px;
            transform-origin: 100% 0%;
            transform: rotate(-45deg);
            left: 0px;
        }
    style>
    <body>
        <script src="../css4/js/jquery-1.11.3.js">script>
        <input type="button" value="弹出遮罩层" id="input1"/>
        <div id="div0">
            <div id="div1">
                <div id="div2">
                    提示
                    <div id="div5">
                        
                    div>
                div>
                <div id="div3">
                    账号密码输入错误
                div>
                <div id="div4">
                    <input type="button" value="确定"/ id="input2">
                div>
            div>
        div>
        <script>
            $("#input1").click(function(){
                $("#div0").css("display","block");
            });
            $("#input2").click(function(){
                $("#div0").css("display","none");
            });
            $("#div5").click(function(){
                $("#div0").css("display","none");
            });
        script>
    body>
html>

结果:

Q5:相册

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        html,body{
      
            position: relative;
        }
        #box:nth-child(n){
      
            width: 300px;
            height: 200px;
            position: absolute;
            /*animation: myfirst 5s linear 0s infinite alternate;*/
            cursor: pointer;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border: 8px solid white;
            box-shadow: 3px 3px 3px blue; 
            }
        /*@keyframes myfirst
        {
            0%   {transform:rotateZ(0deg);}
            25%  {transform:rotateZ(90deg);}
            50%  {transform:rotateZ(180deg);}
            100% {transform:rotateZ(360deg);}
        }*/
        #box:active{
      
            cursor: grab;
        }
        #box:nth-child(n):hover{
      
            animation: mykey 3s infinite;
            z-index: 999;
        }
       @keyframes mykey{
      
           from{width: 300px;height: 200px;}
           to{
      width: 400px;height: 300px;}
       }
    style>
head>
<body style="background: gray;">
<input type="button" id="btn" value="随机生成">
    <div id="pbox">
        <div id="box">div>
    div>
body>
<script>
    var btn=document.getElementById("btn");//获取按钮
    var box=document.getElementById("box");//获取box
    //var arr=['#fff143','#ff7500','#a3d900','#eedeb0','#ae7000','#b35c44','#392f41','#ff461f','#44cef6','#edd1db','#003371'];//随机颜色
    //var arr2=['1%','10%','3%','5%','30%','9%','100%','10%'];//设置弧度，以形成不同的形状
    var arr3=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg','image/6.jpg','image/7.jpg','image/8.jpg'];
    /*//第二种颜色设置，随机全部颜色
    function randomColor() {
        var r=Math.floor(Math.random()*256);
        var g=Math.floor(Math.random()*256);
        var b=Math.floor(Math.random()*256);
        return "rgb("+r+","+g+","+b+")";
    }*/
   var tops=['70','50','80','60','290','320','350'];
   var lefts=['50','370','570','870','60','390','750'];
   var rotates=['30','0','15','0','0','30','45'];
    //给button注册点击事件ain
    btn.onclick=function(){
        pbox.innerHTML="";//清空pbo
        for(var i=0;i<=7;i++){
            var newTip =box.cloneNode(true);//克隆节点
            pbox.insertBefore(newTip,null);//追加,在任意地方,appendChild在末尾追加
            var left=parseInt(Math.random()*(1200-100+1) + 0);//随机生成左边距
            var top=parseInt(Math.random()*(700-100+1) + 0);//随机生成上边距
            var bg=Math.floor((Math.random()*arr3.length));//生成数组随机数获得随机数组下标
            //box.style.background=arr[bg];//设置颜色
            /*box.style.backgroundColor=randomColor();//第二种颜色设置*/
           box.style.top=top+"px";//设置上边距
            box.style.left=left+"px";//设置左边距
           /* box.style.top=tops[i]+"px";//设置上边距
            box.style.left=lefts[i]+"px";//设置左边距*/
            box.style.backgroundImage="url("+arr3[bg]+")";
            box.style.transform="rotate("+rotates[i]+"deg)";
            //box.style.borderRadius=arr2[bg];
            //box.style.borderRadius=arr2[i];
        }
        var c=pbox.children;
        for(var i=0;i< c.length;i++){
            c[i].onmousedown=function (e) {
      //鼠标点击的时候
                var spacex=e.pageX-this.offsetLeft;
                var spacey=e.pageY-this.offsetTop;
                this.onmousemove=function (e) {
      //鼠标移动的时候
                    this.style.left=e.pageX-spacex+"px";//鼠标在页面上的位置。x是光标离左边的位置,y是离上边的位置,单位是像素
                    this.style.top=e.pageY-spacey+"px";//e.page含义如上
                }
            };
            c[i].onmouseup=function () {
      //鼠标离开的时候
                this.onmousemove=null;
            }
        }
    }
script>
html>

Q6:小车

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <style type="text/css">
        
        #div1{
      
            width: 200px;
            height: 80px;
            background: green;
            position: relative;
            top: 30px;
            left: 20px;
            animation: car 8s linear;
        }
        #div1:after,#div1:before{
      
            content: "";
            width: 40px;
            height: 40px;
            background: black;
            border-radius: 50%;
            position: absolute;
            top: 70px;
            left: 25px;
        }
        #div1:before{
      
            left: 130px;
        }
        #div2{
      
            width: 10px;
            height: 13px;
            background: gray;
            position: relative;
            top: -63px;
            left: 42px;
            animation: cars 8s linear;
        }
        #div2:before,#div2:after{
      
            content: "";
            width: 35px;
            height: 35px;
            background: deepskyblue;
            position: absolute;
            top: 34px;
            left: 6px;
        }
        #div2:after{
      
            left: 110px;
        }
        @keyframes car{
      
            from{left: 25px;}
            to{
      left: 725px;}
        }
        @keyframes  cars{
      
            from{left: 42px;}
            to{
      left: 742px;}
        }
    style>
    <body>
        <div id="div1">div>
        <div id="div2">div>
    body>
html>

Q7:图片不停旋转

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <style type="text/css">
        img{
      
            animation: roates 2s infinite linear;
        }
        @keyframes roates{
      
            from{transform: rotate(0deg);}
            to{
      transform: rotate(360deg);}
        }
    style>
    <body>
        <img src="image/t0127fde493486fb8a2.jpg" width="200" height="200"/>
    body>
html>

结果:

Q8:实现一个界面



    
        "UTF-8">
        
        "stylesheet" type="text/css" href="js/layui/css/layui.css"/>
    
    
    
        
        "div_main">
            "div_left">
                class="div_p pbutton">
                    当前门店:"button" value="格力店" style="background: linear-gradient(orange,yellow);"/>
                    "button" value="兰埔店" style="background: linear-gradient(blueviolet,blue);"/>
                
                class="div_p pseach">
                    搜索彩品:"text" placeholder="菜名/货号"/>
                    class="span_seach">
                        class="layui-icon layui-icon-search" style="font-size: 30px; color: blue;">  
                    
                
                class="div_p pselect">
                    "text"/>
                    
                        
                    
                    "button" value="下一个" class="btnnext"/>
                
                class="pp">
                    下一条:[老爹]油麦菜
                
                class="pp">
                    门店下单数量：108个
                
                class="pp">
                    已称重数量：88个
                
                class="pp">
                    未称重数量：28个
                
                class="pp">
                    class="span_warn">超出上下限设置重量，请重新检查
                
                class="div_p pbtnbottom">
                    "button" value="查询" />
                    "button" value="设置" />
                    "button" value="蔬菜" />
                
            
            "div_right">
                "text" class="input_top" value="888.8"/>
                "text" value="88" class="input_small"/>
                "button" value="保存" class="btnsave"/>
                "button" value="去皮" class="btnclean"/>
                class="pnumber number-1">
                    "button" value="9" />
                    "button" value="8" />
                    "button" value="7" />
                
                class="pnumber">
                    "button" value="6" />
                    "button" value="5" />
                    "button" value="4" />
                
                class="pnumber">
                    "button" value="3" />
                    "button" value="2" />
                    "button" value="1" />
                
                class="pnumber">
                    "button" value="0" />
                    "button" value="." />
                    "button" value="Del" />

结果:

Q9:实现一个界面

read.html



    
        "UTF-8">
        
        "stylesheet" href="i/yellow.css" id="rel"/>
    
    
        
        "div_Main">
            "div_top">
                "div_one" style="background: red;" οnclick="Colors('red')">
                "div_two" style="background: yellow;" οnclick="Colors('yellow')">
                "div_three" style="background: blue;" οnclick="Colors('blue')">
                "div_four" style="background: orange;" οnclick="Colors('orange')">
                Duis aute irure dolor
            
            "div_bottom">
                "div_bottom_topmenu">
                    
                        "li1">"#" >lorem
                        "#" style="background: #2F8F00;">Ipsum
                        "#" style="background: #2F8F00;">dolor
                        "#" style="background: #2F8F00;">sit amet
                        "#" style="background: #2F8F00;">aliquip
                    
                
                "div_bottom_content">
                    "div_bottom_content_left">
                        "div_bottom_content_left_divtop">
                            class="ttl" >Mollit Anim
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                                eiusmod tempor 
                                "#" >incididunt 
                                ut labore et dolore magna 
                                aliqua. Ut enim ad minim veniam, quis 
                                "#" >nostrud 
                                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            
                            
                            class="ttl" >Lorem
                            Duis aute irure dolor in reprehenderit in voluptate velit esse 
                            cillum dolore eu fugiat nulla pariatur.
                            class="ttl" >Ipsum
                            Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                            qui officia deserunt mollit anim id est laborum.
                            
                            "ico" src="image/l.png">
                            Duis aute irure dolor
                            "color: rgb(255, 115, 115);">
                                "#" >Lorem ipsum
                                "#" >Dolor sit amet
                                "#" >Consectetur adipisicing
                            
                        
                    
                    "div_bottom_content_right">
                        class="ttl" >
                            
                            Lorem ipsum dolor sit amet
                        
                        class="photo" src="image/photo1.jpg">
                        Duis aute
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                            eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
                        
                        class="link">"#" >Ut labore… »
                        "h2" class="ttl" >
                            
                            Excepteur sint occaecat
                        
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                            eiusmod tempor incididunt ullamco.
                        
                        "rbox">
                            Adipisicing elit, sed do eiusmod tempor sunt in culpa 
                            qui officia.
                        
                        
                        class="photo" src="image/photo2.jpg">
                        Duis aute
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                            eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
                        
                        class="link">"#" >Ut labore… »
                    
                
                "div_bottom_bottommenu">
                    "#">Lorem |
                    "#">Ipsum |
                    "#">Dolor |
                    "#">Sit amet |
                    "#">Aliquip

red.less

@color:orange;
#div_Main {
          width: 840px;
          height: 620px;
          background: burlywood;
          margin: 0 auto;
        }
        #div_top{
            width: 800px;
            height: 140px;
            background: @color;
            float: left;
            margin: 5px 20px 0px 20px;
            position: relative;
            
        }
        #div_top div:hover{
            cursor: pointer;
        }
        #div_bottom{
            width: 800px;
            height: 465px;
            background: deepskyblue;
            float: left;
            margin: 5px 20px 0px 20px;
        }
        #div_one,#div_two,#div_three,#div_four{
            width: 75px;
            height: 25px;
            background: lightskyblue;
            float: left;
            margin: 5px 0px 0px 15px;
        }
        #div_top h2{
            position: absolute;
            top: 65px;
            right: 130px;
            margin: 0;
            width: 110px;
            font-size: 15px;
            line-height: 1.33;
            font-weight: bold;
            text-transform: uppercase;
            text-align: right;
            color: white;
        }
        #div_bottom_topmenu{
            width: 780px;
            height: 28px;
            background: grey;
            float: left;
            margin: 5px 10px 0px 10px;
        }
        #div_bottom_topmenu ul{
            list-style-type: none;
            margin: 2px 0px 0px -40px;
        }
        #div_bottom_topmenu ul li{
            width: 154px;
            height: 24px;
            float: left;
            background: lightskyblue;
            margin-left: 2px;
            
        }
        #div_bottom_topmenu ul li a{
            position: relative;
            display: block;
            margin: 1px;
            height: 24px;
            font-size: 10px;
            line-height: 24px;
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
        }
        #div_bottom_topmenu ul li a span{
            display: block;
            position: absolute;
            top: 5px;
            left: 8px;
            width: 8px;
            height: 8px;
        }
        
        #div_bottom_content{
            width: 780px;
            height: 390px;
            background: white;
            float: left;
            margin: 5px 10px 0px 10px;
        }
        #div_bottom_bottommenu{
            width: 780px;
            height: 30px;
            background: darkgoldenrod;
            float: left;
            margin: 5px 10px 0px 10px;
            text-align: center;
        }
        #div_bottom_bottommenu a{
            text-decoration: underline;
            color: royalblue;
            line-height: 30px;
            padding: 3px 5px;
        }
        #div_bottom_content_left{
            width: 340px;
            height: 380px;
            margin: 5px 0px 0px 5px;
            border-right: 1px dashed red;
            float: left;
        }
        #div_bottom_content_right{
            width: 400px;
            height: 380px;
            margin: 5px 0px 0px 30px;
            background: white;
            float: left;
        }
        #div_bottom_content_left_divtop{
            width: 300px;
            height: 340px;
            background: white;
            float: left;
            margin: 20px 0px 0px 20px;
        }
        #div_bottom_content_left_divtop h3{
            margin: 1px 0px 0px 1px;
            font-size: 18px;
            font-weight: normal;
            display: block;
        }
        #div_bottom_content_left_divtop p{
            margin: 1px 0px;
            display: block;
            font-size: 12px;
        }
        #div_bottom_content_left_divtop dl,dt,dd{
            display: block;
            font-size: 12px;
        }
        #div_bottom_content_left_divtop dt{
            float: left;
            font-weight: bold;
            margin-right: 25px;
        }
        #div_bottom_content_left_divtop dd{
            margin: 1px 0px 1px 65px;
        }
        #ico{
            float: left;
            margin-right: 22px;
            background: @color;
        }
        #div_bottom_content_left_divtop h4{
            margin: 0 0 0 6px;
            font-size: 100%;
            font-weight: bold;
            display: block;
        }
        #div_bottom_content_left_divtop ul{
            display: block;
            margin: 0;
            list-style-type: square;
            float: left;
            margin-left: -24px;
            font-size: 15px;
        }
        
        #div_bottom_content_left_divtop ul li{
            color: @color;
        }
        #div_bottom_content_right h3{
            display: block;
            font-size: 13px;
            margin-bottom: 5px;
        }
        #div_bottom_content_right h3 span{
            display: inline-block;
            width: 9px;
            height: 9px;
            margin-right: 8px;
            border: 1px solid silver;
            vertical-align: middle;
            background: @color;
        }
        #div_bottom_content_right img{
            float: left;
            margin-right: 20px;
            height: 70px;
        }
        #div_bottom_content_right h4{
            display: block;
            margin: 0;
            font-size: 100%;
            font-weight: bold;
        }
        #div_bottom_content_right p{
            display: block;
            font-size:13px ;
            margin-top: -3px;
        }
        .link{
            text-align: right;
        }
        #div_bottom_content_right a{
            padding: 2px 3px;
        }
        #h2{
            margin: 0;
        }
        #rbox{
            display: block;
            float: left;
            position: relative;
            width: 180px;
            margin: 0px 0 20px 0;
            padding: 2px 5px 2px 30px;
            font-size: 10px;
            line-height: 1.2;
            background: darkgoldenrod;
        }
        #rbox span{
            display: block;
            position: absolute;
            top: 5px;
            left: 8px;
            width: 8px;
            height: 8px;
        }
        #div_bottom_content_right button{
            float: right;
            margin: 0px 0 20px 0;
            width: 150px;
            height: 30px;
            background: gray;
            color: black;
            border: 1px solid silver;
            text-align: center;
            font-size: 14px;
            line-height: 25px;
        }
        
        span,a,dt,h4,h3{
            color: @color;
        }
        #div_bottom_bottommenu a{
            color: @color+11;
        }
        #div_bottom_topmenu a{
            color: @color;
        }
        #div_bottom_content_right button{
            background: @color;
            color: darkgoldenrod;
        }
        #div_bottom_topmenu #li1{
            background: @color;
        }
        
        #div_bottom_topmenu #li1 a{
            color: black;
        }

red.css

#div_Main {
  width: 840px;
  height: 620px;
  background: burlywood;
  margin: 0 auto;
}
#div_top {
  width: 800px;
  height: 140px;
  background: red;
  float: left;
  margin: 5px 20px 0px 20px;
  position: relative;
}
#div_top div:hover {
  cursor: pointer;
}
#div_bottom {
  width: 800px;
  height: 465px;
  background: deepskyblue;
  float: left;
  margin: 5px 20px 0px 20px;
}
#div_one,
#div_two,
#div_three,
#div_four {
  width: 75px;
  height: 25px;
  background: lightskyblue;
  float: left;
  margin: 5px 0px 0px 15px;
}
#div_top h2 {
  position: absolute;
  top: 65px;
  right: 130px;
  margin: 0;
  width: 110px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  color: white;
}
#div_bottom_topmenu {
  width: 780px;
  height: 28px;
  background: grey;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_topmenu ul {
  list-style-type: none;
  margin: 2px 0px 0px -40px;
}
#div_bottom_topmenu ul li {
  width: 154px;
  height: 24px;
  float: left;
  background: lightskyblue;
  margin-left: 2px;
}
#div_bottom_topmenu ul li a {
  position: relative;
  display: block;
  margin: 1px;
  height: 24px;
  font-size: 10px;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
#div_bottom_topmenu ul li a span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content {
  width: 780px;
  height: 390px;
  background: white;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_bottommenu {
  width: 780px;
  height: 30px;
  background: darkgoldenrod;
  float: left;
  margin: 5px 10px 0px 10px;
  text-align: center;
}
#div_bottom_bottommenu a {
  text-decoration: underline;
  color: royalblue;
  line-height: 30px;
  padding: 3px 5px;
}
#div_bottom_content_left {
  width: 340px;
  height: 380px;
  margin: 5px 0px 0px 5px;
  border-right: 1px dashed red;
  float: left;
}
#div_bottom_content_right {
  width: 400px;
  height: 380px;
  margin: 5px 0px 0px 30px;
  background: white;
  float: left;
}
#div_bottom_content_left_divtop {
  width: 300px;
  height: 340px;
  background: white;
  float: left;
  margin: 20px 0px 0px 20px;
}
#div_bottom_content_left_divtop h3 {
  margin: 1px 0px 0px 1px;
  font-size: 18px;
  font-weight: normal;
  display: block;
}
#div_bottom_content_left_divtop p {
  margin: 1px 0px;
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dl,
dt,
dd {
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dt {
  float: left;
  font-weight: bold;
  margin-right: 25px;
}
#div_bottom_content_left_divtop dd {
  margin: 1px 0px 1px 65px;
}
#ico {
  float: left;
  margin-right: 22px;
  background: red;
}
#div_bottom_content_left_divtop h4 {
  margin: 0 0 0 6px;
  font-size: 100%;
  font-weight: bold;
  display: block;
}
#div_bottom_content_left_divtop ul {
  display: block;
  margin: 0;
  list-style-type:square;
  float: left;
  margin-left: -24px;
  font-size: 15px;
}
#div_bottom_content_left_divtop ul li{
    color: red;
}
#div_bottom_content_right h3 {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
#div_bottom_content_right h3 span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1px solid silver;
  vertical-align: middle;
  background: red;
}
#div_bottom_content_right img {
  float: left;
  margin-right: 20px;
  height: 70px;
}
#div_bottom_content_right h4 {
  display: block;
  margin: 0;
  font-size: 100%;
  font-weight: bold;
}
#div_bottom_content_right p {
  display: block;
  font-size: 13px ;
  margin-top: -3px;
}
.link {
  text-align: right;
}
#div_bottom_content_right a {
  padding: 2px 3px;
}
#h2 {
  margin: 0;
}
#rbox {
  display: block;
  float: left;
  position: relative;
  width: 180px;
  margin: 0px 0 20px 0;
  padding: 2px 5px 2px 30px;
  font-size: 10px;
  line-height: 1.2;
  background: darkgoldenrod;
}
#rbox span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content_right button {
  float: right;
  margin: 0px 0 20px 0;
  width: 150px;
  height: 30px;
  background: gray;
  color: black;
  border: 1px solid silver;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}
span,
a,
dt,
h4,
h3 {
  color: red;
}
#div_bottom_bottommenu a {
  color: #ff0b0b;
}
#div_bottom_topmenu a {
  color: red;
}
#div_bottom_content_right button {
  background: red;
  color: darkgoldenrod;
}
#div_bottom_topmenu #li1{
            background: red;
}

#div_bottom_topmenu #li1 a{
    color: black;
}

View Code

blue.css

#div_Main {
  width: 840px;
  height: 620px;
  background: burlywood;
  margin: 0 auto;
}
#div_top {
  width: 800px;
  height: 140px;
  background: blue;
  float: left;
  margin: 5px 20px 0px 20px;
  position: relative;
}
#div_top div:hover {
  cursor: pointer;
}
#div_bottom {
  width: 800px;
  height: 465px;
  background: deepskyblue;
  float: left;
  margin: 5px 20px 0px 20px;
}
#div_one,
#div_two,
#div_three,
#div_four {
  width: 75px;
  height: 25px;
  background: lightskyblue;
  float: left;
  margin: 5px 0px 0px 15px;
}
#div_top h2 {
  position: absolute;
  top: 65px;
  right: 130px;
  margin: 0;
  width: 110px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  color: white;
}
#div_bottom_topmenu {
  width: 780px;
  height: 28px;
  background: grey;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_topmenu ul {
  list-style-type: none;
  margin: 2px 0px 0px -40px;
}
#div_bottom_topmenu ul li {
  width: 154px;
  height: 24px;
  float: left;
  background: lightskyblue;
  margin-left: 2px;
}
#div_bottom_topmenu ul li a {
  position: relative;
  display: block;
  margin: 1px;
  height: 24px;
  font-size: 10px;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
#div_bottom_topmenu ul li a span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content {
  width: 780px;
  height: 390px;
  background: white;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_bottommenu {
  width: 780px;
  height: 30px;
  background: darkgoldenrod;
  float: left;
  margin: 5px 10px 0px 10px;
  text-align: center;
}
#div_bottom_bottommenu a {
  text-decoration: underline;
  color: royalblue;
  line-height: 30px;
  padding: 3px 5px;
}
#div_bottom_content_left {
  width: 340px;
  height: 380px;
  margin: 5px 0px 0px 5px;
  border-right: 1px dashed red;
  float: left;
}
#div_bottom_content_right {
  width: 400px;
  height: 380px;
  margin: 5px 0px 0px 30px;
  background: white;
  float: left;
}
#div_bottom_content_left_divtop {
  width: 300px;
  height: 340px;
  background: white;
  float: left;
  margin: 20px 0px 0px 20px;
}
#div_bottom_content_left_divtop h3 {
  margin: 1px 0px 0px 1px;
  font-size: 18px;
  font-weight: normal;
  display: block;
}
#div_bottom_content_left_divtop p {
  margin: 1px 0px;
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dl,
dt,
dd {
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dt {
  float: left;
  font-weight: bold;
  margin-right: 25px;
}
#div_bottom_content_left_divtop dd {
  margin: 1px 0px 1px 65px;
}
#ico {
  float: left;
  margin-right: 22px;
  background: blue;
}
#div_bottom_content_left_divtop h4 {
  margin: 0 0 0 6px;
  font-size: 100%;
  font-weight: bold;
  display: block;
}
#div_bottom_content_left_divtop ul {
  display: block;
  margin: 0;
  list-style-type: square;
  float: left;
  margin-left: -24px;
  font-size: 15px;
}

#div_bottom_content_left_divtop ul li{
    color: blue;
}
#div_bottom_content_right h3 {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
#div_bottom_content_right h3 span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1px solid silver;
  vertical-align: middle;
  background: blue;
}
#div_bottom_content_right img {
  float: left;
  margin-right: 20px;
  height: 70px;
}
#div_bottom_content_right h4 {
  display: block;
  margin: 0;
  font-size: 100%;
  font-weight: bold;
}
#div_bottom_content_right p {
  display: block;
  font-size: 13px ;
  margin-top: -3px;
}
.link {
  text-align: right;
}
#div_bottom_content_right a {
  padding: 2px 3px;
}
#h2 {
  margin: 0;
}
#rbox {
  display: block;
  float: left;
  position: relative;
  width: 180px;
  margin: 0px 0 20px 0;
  padding: 2px 5px 2px 30px;
  font-size: 10px;
  line-height: 1.2;
  background: darkgoldenrod;
}
#rbox span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content_right button {
  float: right;
  margin: 0px 0 20px 0;
  width: 150px;
  height: 30px;
  background: gray;
  color: black;
  border: 1px solid silver;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}
span,
a,
dt,
h4,
h3 {
  color: blue;
}
#div_bottom_bottommenu a {
  color: #0b0bff;
}
#div_bottom_topmenu a {
  color: blue;
}
#div_bottom_content_right button {
  background: blue;
  color: darkgoldenrod;
}
#div_bottom_topmenu #li1{
            background: blue;
}

#div_bottom_topmenu #li1 a{
    color: black;
}

View Code

orange.css

#div_Main {
  width: 840px;
  height: 620px;
  background: burlywood;
  margin: 0 auto;
}
#div_top {
  width: 800px;
  height: 140px;
  background: orange;
  float: left;
  margin: 5px 20px 0px 20px;
  position: relative;
}
#div_top div:hover {
  cursor: pointer;
}
#div_bottom {
  width: 800px;
  height: 465px;
  background: deepskyblue;
  float: left;
  margin: 5px 20px 0px 20px;
}
#div_one,
#div_two,
#div_three,
#div_four {
  width: 75px;
  height: 25px;
  background: lightskyblue;
  float: left;
  margin: 5px 0px 0px 15px;
}
#div_top h2 {
  position: absolute;
  top: 65px;
  right: 130px;
  margin: 0;
  width: 110px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  color: white;
}
#div_bottom_topmenu {
  width: 780px;
  height: 28px;
  background: grey;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_topmenu ul {
  list-style-type: none;
  margin: 2px 0px 0px -40px;
}
#div_bottom_topmenu ul li {
  width: 154px;
  height: 24px;
  float: left;
  background: lightskyblue;
  margin-left: 2px;
}
#div_bottom_topmenu ul li a {
  position: relative;
  display: block;
  margin: 1px;
  height: 24px;
  font-size: 10px;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
#div_bottom_topmenu ul li a span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content {
  width: 780px;
  height: 390px;
  background: white;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_bottommenu {
  width: 780px;
  height: 30px;
  background: darkgoldenrod;
  float: left;
  margin: 5px 10px 0px 10px;
  text-align: center;
}
#div_bottom_bottommenu a {
  text-decoration: underline;
  color: royalblue;
  line-height: 30px;
  padding: 3px 5px;
}
#div_bottom_content_left {
  width: 340px;
  height: 380px;
  margin: 5px 0px 0px 5px;
  border-right: 1px dashed red;
  float: left;
}
#div_bottom_content_right {
  width: 400px;
  height: 380px;
  margin: 5px 0px 0px 30px;
  background: white;
  float: left;
}
#div_bottom_content_left_divtop {
  width: 300px;
  height: 340px;
  background: white;
  float: left;
  margin: 20px 0px 0px 20px;
}
#div_bottom_content_left_divtop h3 {
  margin: 1px 0px 0px 1px;
  font-size: 18px;
  font-weight: normal;
  display: block;
}
#div_bottom_content_left_divtop p {
  margin: 1px 0px;
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dl,
dt,
dd {
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dt {
  float: left;
  font-weight: bold;
  margin-right: 25px;
}
#div_bottom_content_left_divtop dd {
  margin: 1px 0px 1px 65px;
}
#ico {
  float: left;
  margin-right: 22px;
  background: orange;
}
#div_bottom_content_left_divtop h4 {
  margin: 0 0 0 6px;
  font-size: 100%;
  font-weight: bold;
  display: block;
}
#div_bottom_content_left_divtop ul {
  display: block;
  margin: 0;
  list-style-type: square;
  float: left;
  margin-left: -24px;
  font-size: 15px;
}

#div_bottom_content_left_divtop ul li{
    color: orange;
}
#div_bottom_content_right h3 {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
#div_bottom_content_right h3 span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1px solid silver;
  vertical-align: middle;
  background: orange;
}
#div_bottom_content_right img {
  float: left;
  margin-right: 20px;
  height: 70px;
}
#div_bottom_content_right h4 {
  display: block;
  margin: 0;
  font-size: 100%;
  font-weight: bold;
}
#div_bottom_content_right p {
  display: block;
  font-size: 13px ;
  margin-top: -3px;
}
.link {
  text-align: right;
}
#div_bottom_content_right a {
  padding: 2px 3px;
}
#h2 {
  margin: 0;
}
#rbox {
  display: block;
  float: left;
  position: relative;
  width: 180px;
  margin: 0px 0 20px 0;
  padding: 2px 5px 2px 30px;
  font-size: 10px;
  line-height: 1.2;
  background: darkgoldenrod;
}
#rbox span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content_right button {
  float: right;
  margin: 0px 0 20px 0;
  width: 150px;
  height: 30px;
  background: gray;
  color: black;
  border: 1px solid silver;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}
span,
a,
dt,
h4,
h3 {
  color: orange;
}
#div_bottom_bottommenu a {
  color: #ffb00b;
}
#div_bottom_topmenu a {
  color: orange;
}
#div_bottom_content_right button {
  background: orange;
  color: darkgoldenrod;
}
#div_bottom_topmenu #li1{
            background: orange;
}

#div_bottom_topmenu #li1 a{
    color: black;
}

yellow,css

#div_Main {
  width: 840px;
  height: 620px;
  background: burlywood;
  margin: 0 auto;
}
#div_top {
  width: 800px;
  height: 140px;
  background: yellow;
  float: left;
  margin: 5px 20px 0px 20px;
  position: relative;
}
#div_top div:hover {
  cursor: pointer;
}
#div_bottom {
  width: 800px;
  height: 465px;
  background: deepskyblue;
  float: left;
  margin: 5px 20px 0px 20px;
}
#div_one,
#div_two,
#div_three,
#div_four {
  width: 75px;
  height: 25px;
  background: lightskyblue;
  float: left;
  margin: 5px 0px 0px 15px;
}
#div_top h2 {
  position: absolute;
  top: 65px;
  right: 130px;
  margin: 0;
  width: 110px;
  font-size: 15px;
  line-height: 1.33;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  color: white;
}
#div_bottom_topmenu {
  width: 780px;
  height: 28px;
  background: grey;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_topmenu ul {
  list-style-type: none;
  margin: 2px 0px 0px -40px;
}
#div_bottom_topmenu ul li {
  width: 154px;
  height: 24px;
  float: left;
  background: lightskyblue;
  margin-left: 2px;
}
#div_bottom_topmenu ul li a {
  position: relative;
  display: block;
  margin: 1px;
  height: 24px;
  font-size: 10px;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
#div_bottom_topmenu ul li a span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content {
  width: 780px;
  height: 390px;
  background: white;
  float: left;
  margin: 5px 10px 0px 10px;
}
#div_bottom_bottommenu {
  width: 780px;
  height: 30px;
  background: darkgoldenrod;
  float: left;
  margin: 5px 10px 0px 10px;
  text-align: center;
}
#div_bottom_bottommenu a {
  text-decoration: underline;
  color: royalblue;
  line-height: 30px;
  padding: 3px 5px;
}
#div_bottom_content_left {
  width: 340px;
  height: 380px;
  margin: 5px 0px 0px 5px;
  border-right: 1px dashed red;
  float: left;
}
#div_bottom_content_right {
  width: 400px;
  height: 380px;
  margin: 5px 0px 0px 30px;
  background: white;
  float: left;
}
#div_bottom_content_left_divtop {
  width: 300px;
  height: 340px;
  background: white;
  float: left;
  margin: 20px 0px 0px 20px;
}
#div_bottom_content_left_divtop h3 {
  margin: 1px 0px 0px 1px;
  font-size: 18px;
  font-weight: normal;
  display: block;
}
#div_bottom_content_left_divtop p {
  margin: 1px 0px;
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dl,
dt,
dd {
  display: block;
  font-size: 12px;
}
#div_bottom_content_left_divtop dt {
  float: left;
  font-weight: bold;
  margin-right: 25px;
}
#div_bottom_content_left_divtop dd {
  margin: 1px 0px 1px 65px;
}
#ico {
  float: left;
  margin-right: 22px;
  background: yellow;
}
#div_bottom_content_left_divtop h4 {
  margin: 0 0 0 6px;
  font-size: 100%;
  font-weight: bold;
  display: block;
}
#div_bottom_content_left_divtop ul {
  display: block;
  margin: 0;
  list-style-type: square;
  float: left;
  margin-left: -24px;
  font-size: 15px;
}

#div_bottom_content_left_divtop ul li{
    color: yellow;
}
#div_bottom_content_right h3 {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
#div_bottom_content_right h3 span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1px solid silver;
  vertical-align: middle;
  background: yellow;
}
#div_bottom_content_right img {
  float: left;
  margin-right: 20px;
  height: 70px;
}
#div_bottom_content_right h4 {
  display: block;
  margin: 0;
  font-size: 100%;
  font-weight: bold;
}
#div_bottom_content_right p {
  display: block;
  font-size: 13px ;
  margin-top: -3px;
}
.link {
  text-align: right;
}
#div_bottom_content_right a {
  padding: 2px 3px;
}
#h2 {
  margin: 0;
}
#rbox {
  display: block;
  float: left;
  position: relative;
  width: 180px;
  margin: 0px 0 20px 0;
  padding: 2px 5px 2px 30px;
  font-size: 10px;
  line-height: 1.2;
  background: darkgoldenrod;
}
#rbox span {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 8px;
}
#div_bottom_content_right button {
  float: right;
  margin: 0px 0 20px 0;
  width: 150px;
  height: 30px;
  background: gray;
  color: black;
  border: 1px solid silver;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}
span,
a,
dt,
h4,
h3 {
  color: yellow;
}
#div_bottom_bottommenu a {
  color: #ffff0b;
}
#div_bottom_topmenu a {
  color: yellow;
}
#div_bottom_content_right button {
  background: yellow;
  color: darkgoldenrod;
}
#div_bottom_topmenu #li1{
            background: yellow;
                
}
#div_bottom_topmenu #li1 a{
    color: black;
}

结果:

Q11:娃娃鱼

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>娃娃鱼title>
        <link rel="stylesheet" href="css/base.css" />
        <link  rel="stylesheet" href="js/layui/css/layui.css" type="text/css"  media="all"/>
        <style>
            div{
      
            }
            ul{
      
                list-style: none;
            }
            #maxdiv{
      
                width: 1000px;
                margin: 0 auto;
            }
            /*头部部分*/
            #head{
      
                height: 130px;
                width: 100%;
                background: url(Images/hbg.jpg);
                background-repeat: no-repeat;
                margin: 0 auto;
                background-position: center 0;
                position: relative; 
                align-content: center;
                
            }
            #head #guide{
      
                width: 100%;
                height: 50px;
                position: relative;
                bottom: -77px;
                border-radius: 25px;
                /*渐变*/
                background: linear-gradient(#fff,#f5f5fE,#fff);
            }
            #guide #time{
      
                float: left;
                width: 300px;
                height: 100%;
                position: relative;
                text-align: center;
                line-height: 50px;
                font-family: "微软雅黑";
                font-size: 17px;
            }
            #head #checkchoice{
      
                width: 300px;
                height: 80px;
                position: absolute;right: 1px;
                text-align: center;
                line-height: 80px;
                font-size: 13px;
                font-family: "微软雅黑";
                color: #FFFFFF;
            }
            #head #checkchoice img{
      
                position: relative;top: 0px;
            }
            #guide #guide-right{
      
                float: left;
                width: 695px;
                height: 100%;
                position: relative;
                text-align: center;
                line-height: 50px;
            }
            #guide-right li{
      
                float: left;
                width: 97px;
                height: 50px;
                background: url(Images/menu.jpg);
                background-repeat: no-repeat;
                position: relative;top: -1px;
            }
            #guide-right li:last-child{
      
                border-radius: 0px 25px 25px 0px;
            }
            #guide-right li a{
      
                color: #FFFFFF;
                text-decoration: none;
                font-size: 15px;
            }
            /*body部分*/
            #body{
      
                
            }
            #body #lunbo{
      
                width: 100%;
                height: 193px;
                float: left;
            }
            #left{
      
                width: 200px;
                height: 566px;
                float: left;
                
            }
            #padded{
      
                width: 100%;height: 100px;
                background: url(Images/footer.jpg) no-repeat;
                float: left;
                position: relative;top: -5px;
            }
            #product{
      
                width: 100%;height: 207px;
                background: url(Images/about.jpg) no-repeat;
                float: left;
            }
            #product ul{
      
                position: relative;top: 55px;
                left: 30px;
            }
            #product li{
      
                padding: 10px;
                background: url(Images/dot2.jpg)no-repeat;
            }
            #product li a{
      
                position: relative;top: -15px;left: 10px;
                font-size: 1rem;
            }
            #aboutus{
      
                width: 100%;height: 260px;
                background: url(Images/contact.jpg) no-repeat;
                float: left;
            }
            #aboutus div{
      
                width: 90%;
                position: relative;
                top: 45px;left: 8px;
            }
            #aboutus p{
      
                padding: 2px;
                font-size: 1rem;
            }
            #center{
      
                width: 600px;
                height: 566px;
                float: left;
            }
            #right{
      
                float: left;
                width: 194px;
                height: 566px;
            }
            #footer{
      
                width: 100%;
                height: 100px;
                float: left;
                background: url(Images/footer.jpg) no-repeat;
                position: relative;
                top: -5px;
            }
            #center_top{
      
                width: 90%;
                height: 220px;
                position: relative;
                margin: 0 auto;
                border-bottom: 1px dashed lightgray;
            }
            #center_top *{
      
                padding: 11px 0px;
            }
            #center_top img{
      
                width: 100%;
                height: 15px;
            }
            #priimg{
      
                width:180px;height: 130px;
                border: 5px solid lightgray;
                float: left;
                border-radius: 15px;
                background:url(Images/house.jpg)no-repeat;
                background-size:100% 100% ;
            }
            #right_tips{
      
                width:330px;height: 130px;
                float: right;
            }
            #right_tips span{
      
                text-indent: 2em;
                line-height: 1.7em;
            }
            #center_bottom{
      
                width: 90%;
                height: 350px;
                position: relative;
                margin: 0 auto;
            }
            #guideyou{
      
                width: 100%;
                height: 50%;
            }
            #guideyou img{
      
                width: 7px;height: 7px;
                padding-right: 5px;
            }
            #guideyou .lione{
      
                border-bottom: 1px dashed lightgrey;
                padding: 7px;
            }
            #guideyou .litwo{
      
                float: right;
                position: relative;top: -15px;
            }
            #lunbo2{
      
                width: 100%;
                height: 40%;
            }
            #center_bottom #details{
      
                width: 100%;
                height: 25px;
                background:url(Images/gsjs.jpg) no-repeat;
            }
            #test2 img{
      
                width: 100%;
                height: 100%;
            }
            #danijieshao{
      
                width: 100%;
                height:320px ;
                background: url(Images/dyjs.jpg)no-repeat;
                background-size: 100% 95%;
            }
            #danijieshao div{
      
                height: 100%;width: 90%;
                position: relative;
                top: 43px;left: 13px;
            }
            #danijieshao span{
      
                text-indent: 2em;
                line-height: 1.7em;
            }
            #right-bottom-tips{
      
                width: 100%;
                height: 250px;
            }
            #right-bottom-tips img{
      
                display: block;
                width: 100%;
                height: 50%;
            }
            #footer #moredetails{
      
                width: 550px;
                height: 95%;
                position: relative;
                margin: 0 auto;
            }
            #footer .mytag{
      
                width: 100%;
                height: 45%;
                float: left;
            }
            #footer ul{
      
                position: relative;
                top: 15px;left: 25px;
            }
            #footer li{
      
                display: inline-block;
                float: left;
                width: 100px;height: 30px;
                line-height: 30px;
                text-align: center;
                border-right: 1px solid lightgrey;
                vertical-align: middle;
            }
            #footer li:last-child{
      
                border-right:none;
            }
            #footer #mycopyright{
      
                text-align: center;
            }
            #footer #mycopyright p{
      
                line-height: 50px;
                font-family: "微软雅黑";
            }
        style>
    head>
    <body>
        
        <div id="maxdiv">
            
            <div id="head">
                
                <div id="checkchoice">
                    <img src="Images/home.jpg" /><span>设为首页span>  
                    <img src="Images/chk_right.gif" /><span>加入收藏span>  
                    <img src="Images/mail.jpg" /><span>联系我们span>
                div>
                <div id="guide">
                    <div id="time">div>
                    <div id="guide-right">
                        <ul>
                            <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>
            div>
            
            <div id="body">
                <div id="lunbo">
                    
                    
                    <div class="layui-carousel" id="test1">
                      <div carousel-item>
                        <div><img src="Images/banner3.jpg">div>
                        <div><img src="Images/banner2.jpg">div>
                        <div><img src="Images/banner1.jpg">div>
                      div>
                    div>
                div>
                
                <div id="left">
                    <div id="product">
                        <ul>
                            <li><a>成品大鲵a>li>
                            <li><a>鲵苗a>li>
                            <li><a>幼鲵a>li>
                            <li><a>种鲵a>li>
                        ul>
                    div>
                    <div id="aboutus">
                        <div>
                            <p>地址：湖南省望城区茶亭镇洪开桥剑龙娃娃鱼养殖基地p>
                            <p>电话：0731-88245889p>
                            <p>手机：13926901500（谭先生）p>
                            <p>13808415437（雷先生）p>
                            <p>QQ：1605461952p>
                            <p>邮编：410203p>
                            <p>邮箱：[email protected]p>
                        div>
                    div>
                    <div id="padded">div>
                div>
                
                <div id="center">
                    <div id="center_top">
                        <img src="Images/gsjs.jpg" />
                        <div id="priimg">div>
                        <div id="right_tips">
                            <span>       长沙剑龙生物科技发展有限公司从2002年开始从事大鲵的养殖与驯养事业，公司于2007年7月10日正式注册成立，是一家专门从事大鲵（娃娃鱼）驯养、繁殖、研究、开发、利用的农业高科技水产企业，目前公司有员工16名，其中教授级专家2名，水产养殖专业人员4名，专职养鲵人员6名，生产管理人员...更多>>>span>
                        div>
                    div>
                    <div id="center_bottom">
                        <div id="guideyou">
                            <div>
                                <ul>
                                    <li class="lione"><img src="Images/arrow.jpg"><a>娃娃鱼的烹饪制作方法a>
                                        <ul>
                                            <li class="litwo">2012/7/21li>
                                        ul>
                                    li>
                                    <li class="lione"><img src="Images/arrow.jpg"><a>大鲵苗种质量鉴别技术a>
                                        <ul>
                                            <li class="litwo">2012/7/21li>
                                        ul>
                                    li>
                                    <li class="lione"><img src="Images/arrow.jpg"><a>大鲵（娃娃鱼）养殖基本要领a>
                                        <ul>
                                            <li class="litwo">2012/7/21li>
                                        ul>
                                    li>
                                    <li class="lione"><img src="Images/arrow.jpg"><a>娃娃鱼主要病害以及防治方法a>
                                        <ul>
                                            <li class="litwo">2012/7/21li>
                                        ul>
                                    li>
                                    <li class="lione"><img src="Images/arrow.jpg"><a>大鲵的生态习惯以及人工养殖技术a>
                                        <ul>
                                            <li class="litwo">2012/7/21li>
                                        ul>
                                    li>
                                ul>
                            div>
                        div>
                        <div id="lunbo2">
                            <div id="details">
                                
                            div>
                            
                            <div class="layui-carousel" id="test2">
                              <div carousel-item>
                                <div><img src="Images/ProjectDemo/0712665599.jpg">div>
                                <div><img src="Images/ProjectDemo/0712665599.jpg">div>
                                <div><img src="Images/ProjectDemo/0712665599.jpg">div>
                              div>
                            div>
                        div>
                    div>
                div>
                
                <div id="right">
                    <div id="danijieshao">
                        <div>
                            <span>       长沙剑龙生物科技发展有限公司从2002年开始从事大鲵的养殖与驯养事业，公司于2007年7月10日正式注册成立，是一家专门从事大鲵（娃娃鱼）驯养、繁殖，利用的农业高科技水产企业，目前公司有员工16名，其中教授级专家2名，水产养殖专业人员4名，专职养鲵人员6名...更多>>>span>
                        div>
                    div>
                    <div id="right-bottom-tips">
                        <img  src="Images/mingdi.png"/>
                        <img src="Images/tel.jpg"/>
                    div>
                div>
            div>
            
            <div id="footer">
                <div id="moredetails">
                    <div class="mytag">
                        <ul>
                            <li><a>公司掠影a>li>
                            <li><a>新闻中心a>li>
                            <li><a>版权声明a>li>
                            <li><a>在线留言a>li>
                            <li><a>技术支持a>li>
                        ul>
                    div>
                    
                    <div id="mycopyright">
                        <p>版权所有  Copyright · 2012-2015  长沙剑龙生物科技发展有限公司  湘ICP备1200230p>
                    div>
                div>
            div>
        div>
    body>
    <script type="text/javascript" src="js/jquery-1.11.3.js" >script>
    <script type="text/javascript" src="js/layui/layui.js">script>
    <script>
        $(function(){
            /*先获得时间赋值一次*/
            $("#time").html(new Date().toLocaleString())
            /*定时器*/
            setInterval(function(){
                $("#time").html(new Date().toLocaleString())
            },1000)
        })
    script>
    <script>
    layui.use(['carousel', 'form'], function(){
      var carousel = layui.carousel
      ,form = layui.form;
      
      //常规轮播
      carousel.render({
        elem: '#test1'
        ,arrow: 'always'
        ,width:'100%'
        ,height:'100%'
      });
       //常规轮播
      carousel.render({
        elem: '#test2'
        ,arrow: 'always'
        ,width:'100%'
        ,height:'100%'
      });
      //监听开关
      form.on('switch(autoplay)', function(){
        ins3.reload({
          autoplay: this.checked
        });
      });
    });
    script>
html>

结果:

Q12:爱心

Q13:三角形

Q14:

Q15:菜单

转载于:https://www.cnblogs.com/zywds/p/9546432.html

你可能感兴趣的:(javascript)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
2019-05-29 vue-router的两种模式的区别 Kason晨
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
electron多标签页模式更像客户端 diygwcom electron javascript 前端
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
外卖霸王餐返利外卖会员卡小程序开发闹小艾 good506070 微信小程序小程序
外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
Axure设计之全屏与退出全屏交互实现招风的黑耳 Axure axure 交互
在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
全面指南：用户行为从前端数据采集到实时处理的最佳实践数字沉思营销流量运营系统架构前端内容运营大数据
引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
EcmaScript和JavaScript的区别每天吃八顿前端 ecmascript
ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
javascript添加p元素，html添加文字，appendChild 游勇一 javascript html添加p appendChild
javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制 SteveJi666 WebGL cesium EarthSDK SuperMap 3d javascript 前端 arcgis
版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
如何在 Python 中声明一个静态属性? 潮易 python 开发语言
在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
数据格式：什么是JSON和XML isNotNullX json xml
JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
HighCharts图表自动化简介知识的宝藏 Selenium高级篇 Selenium图表自动化测试 highcharts图表自动化 Selenium图表自动化图表自动化测试 highcharts Selenium
什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
ztree设置禁用节点 3213213333332132 JavaScript ztree json setDisabledNode Ajax
ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); });
JVM patch by Taobao bookjovi java HotSpot
在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and
将session存储到数据库中 dcj3sjt126com sql PHP session
CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) ); <?php /** * Created by PhpStorm. * User: michaeldu * Date
Vector 171815164 vector
public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i);
各连接池配置参数比较 g21121 连接池
排版真心费劲，大家凑合看下吧，见谅~ Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User 数据库密码 Password Password Password 驱动名
[简单]mybatis insert语句添加动态字段 53873039oycg mybatis
mysql数据库,id自增,配置如下： <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&
struts2拦截器配置云端月影 struts2拦截器
struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends="struts-default"> &
IE中页面不居中，火狐谷歌等正常 aijuans IE中页面不居中
问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
String,int,Integer,char 几个类型常见转换 antonyup_2006 html sql .net
如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.
PL/SQL的游标类型百合不是茶显示游标(静态游标)隐式游标游标的更新和删除 %rowtype ref游标(动态游标)
游标是oracle中的一个结果集,用于存放查询的结果; PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标隐式游标:主要是对DML数据的操作隐
JUnit4中@AfterClass @BeforeClass @after @before的区别对比 bijian1013 JUnit4 单元测试
一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次
精通Oracle10编程SQL(12)开发包 bijian1013 oracle 数据库 plsql
/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规
【EhCache二】ehcache.xml配置详解 bit1129 ehcache.xml
在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe ehcac
java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL 白糖_ java eclipse spring tomcat Web
今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> 随后启动
angular.element boyitech AngularJS AngularJS API angular.element
angular.element 描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e
java-给定两个已排序序列，找出共同的元素。 bylijinnan java
import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素
sftp 异常，有遇到的吗？求解 Chen.H java jcraft auth jsch jschexception
com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec
[生物智能与人工智能]神经元中的电化学结构代表什么? comsci 人工智能
我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 我们可以尝试一下...在某些神经
通过LAC和CID获取经纬度信息 dai_lm lac cid
方法1：用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度方法2：发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&
JAVA的困难分析 datamachine java
前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 -----------------------------------------------------------------------------------------
小学5年级英语单词背诵第二课 dcj3sjt126com english word
money 钱 paper 纸 speak 讲，说 tell 告诉 remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码 learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射 must 必须 light 灯，光线，轻的 front
linux下面没有tree命令 dcj3sjt126com linux
centos p安装 yum -y install tree mac os安装 brew install tree 首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式
Map迭代方式，Map迭代，Map循环蕃薯耀 Map循环 Map迭代 Map迭代方式
Map迭代方式，Map迭代，Map循环 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年
Spring Cache注解+Redis hanqunfeng spring
Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId>
Guava中针对集合的 filter和过滤功能 jackyrong filter
在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"
学习编程那点事 lampcy 编程 android PHP html5
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
架构师之流处理---------bytebuffer的mark,limit和flip nannan408 ByteBuffer
1.前言。如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy
org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1 Everyday都不同 $转义 el表达式
最近在做Highcharts的过程中，在写js时，出现了以下异常：严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1,
用Java实现发送邮件到163 tntxia java实现
/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。此篇仅介绍用
探索实体类存在的真正意义 java小叶檀 POJO
一. 实体类简述实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象它的一般格式就是 public class A{ private String id; public Str

实现一个div中内容从高度为0变为有值实例

Duis aute irure dolor

class="ttl" >Mollit Anim

Duis aute irure dolor

class="ttl" > Lorem ipsum dolor sit amet

Duis aute

"h2" class="ttl" > Excepteur sint occaecat

Duis aute

你可能感兴趣的:(javascript)