关键词：
当前位置：
  • 常见问题

    • HTML标签

    HTML标签



     

     
    摘要：调用地图： script src="http://api.map.baidu.com/api?v=2.0ak=W1a6ywZFkybedSCHadpRbkz4w5HYfG4R" type="text/javascript" charset="utf-8"/script style type="text/css" h3 { display: block; width: 100%; height: 60px; line-height: 60px; text-align
     
    两列 .col1{float:left;width:50%}
    三列 .col2{float:left;width:33%}
    四列 .col3{float:left;width:25%}
    五列 .col4{float:left;width:20%}
    图片自动 .img1{height:auto;width:100%}
    图片左对齐 .imgzuo{margin:10px;float:left}
    图片右对齐 .imgyou{margin:10px;float:right}
    边框一 .kg{background-color:#f4f4f4;padding:10px}
    边框二 .kg2{background-color:#699;padding:15px}
    边框三 .kg3{color:#FFF;background-color:#330;padding:20px}
    文字样式一 .wz1{font-size:14px;line-height:40px;text-align:justify;text-indent:2em;display:block}
    标题样式一 .tt1{color:#666;background-color:#F96;text-align:left;display:block;padding-left:10px}
    图片居中 .tu1{text-align:center;display:block}
    左20右80 .zuo{float:left;width:20%};.you{float:right;width:80%}
    左30右70 .zuo1{float:left;width:30%}; .you1{float:right;width:70%}
    左40右60 .zuo2{float:left;width:40%}; .you2{float:right;width:60%}
    详情页标题文字图片 .xqtu{text-align:center;margin-top:20px;margin-bottom:20px};
    .xqwz{font-size:14px;line-height:40px;text-align:justify;text-indent:2em};
    .xqtit1{font-size:30px;line-height:100px;text-align:center;border-bottom-width:thin;border-bottom-style:solid;border-bottom-color:#000}
    单行溢出 .spill{white-space:normal;overflow:hidden;text-overflow:ellipsis}
    多行溢出 .spills{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}
    设置图片滑动 transition:left 3s;
    固定DIV1 直接用position:fixed
    SWF <embed allowscriptaccess="never" allownetworking="internal" invokeurls="false" src="flash/flash.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" autostart="0" wmode="transparent" width="100%" height="300" align="middle">
    背景音乐

    <audio controls="controls" hidden="hidden" autoplay="autoplay" loop="loop">

    <source src="music/1.mp3" type="audio/ogg" />
    <source src="music/1.mp3" type="audio/mpeg" />
    </audio>
    <bgsound src="music/1.mp3" autostart=true loop=-1>
    视频 <video width="100%" height="auto" controls="controls">
    <source src="video/1.mp4" type="video/mp4" >示例视频1</source>
    您的浏览器不支持video标签

    </video>

     

    controls autoplay muted

    		 
    设置顶边对齐
    		 
    display:inline;vertical-align:top
    自动加长 <div style="clear:both;"></div>
    设置文本域 textarea{overflow-y:auto;-moz-box-sizing:border-box;box-sizing:border-box;padding-top:5px;height:70px;border:1px solid #ccc;border-radius:0;background:#fff;color:#666;font-size:12px;font-family:AppleGothic,Arial,'Microsoft Yahei','Simsun'}
    文本框： .textInput{-moz-box-sizing:border-box;box-sizing:border-box;height:35px;border:1px solid #ccc;border-radius:0;background:#fff;color:#666;font-size:12px;font-family:AppleGothic,Arial,'Microsoft Yahei','Simsun';line-height:35px;resize:none}
    设置表格中间的线段为一根线 table{border:1px solid #fff; border-collapse:collapse}
    th,td{border:1px solid #fff}
    设置圆角按扭 .btn000{display:inline-block;height:40px;line-height:40px;width:160px;font-size:14px;background:#c5975c;color:#fff;text-align:center;border-radius:20px;margin-top:20px}
    注册弹出提示信息 onclick="alert('注册成功')"
    设置按扭链接 <input type="submit" name="Submit" value="提交"    onclick="window.location.href('index.html')">
    设置图片透明度 .div2{background-color:#3CF;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; width:auto; height:auto;}
    设置文字滚动

    <marquee direction=up behavior="scroll" scrolldelay="100" onMouseOver="stop()"onmouseout="start()">

    <marquee direction=left>从右向左移！</marquee><p>
    <marquee direction=right>从左向右移！</marquee><p>
    <marquee behavior=scroll>一圈一圈绕着走！</marquee><p>
    <marquee behavior=slide>只走一次就歇了！</marquee><p>
    <marquee behavior=alternate>来回走！</marquee><p>
    <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee><p>
    <marquee loop=3 width=50% behavior=slide>只走 3 趟！</marquee><p>
    <marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee><p>
    <marquee scrollamount=20>走得好快哟！</marquee>

    <MARQUEE direction=up onmouseout=start(); onmouseover=stop(); scrollAmount=1 scrollDelay=15 width=160 height="100px">
    设置图片放大

    div img{   cursor: pointer;  transition: all 0.6s;   }

    div img:hover{  transform: scale(1.4);  }
    BODY背景全屏设置 body{font-family:'微软雅黑'; background:url(../images/bg1.jpg); background-position:center; background-attachment:fixed; background-size:100% auto; }

     
    外部边框 #wrapper{width:1000px;padding:20px;height:auto;background:#fff;background-color:rgba(255,255,255,0.8);-moz-border-radius:10px;border-radius:10px;height:auto;margin-top:50px;margin-right:auto;margin-bottom:10px;margin-left:auto}
    CSS居中： *{margin:0 auto;list-style:none;}
    清除样式 .clear { clear:both;}
    清除标签样式

    body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px;}
    ul { list-style: none; }
    img { border-style: none; }
    *{margin:0 auto;list-style:none;}
    .clear { clear:both;}
       
    清除样式

    body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px;}

    ul { list-style: none; }

    img { border-style: none; }
    设置字间距 word-spacing:25px;
    图片圆角： img{border:5px solid #dedede;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
    圆角表格 table{border-radius:5px;overflow:hidden}
    设置列表无符号 .flash ul li{list-style-type:none}
    加框架 <iframe src="slide.htm" width="580" height="300" frameborder="0" scrolling="no"></iframe>
       
    留言弹出提示信息 onclick="alert('留言成功')"
    登陆弹出提示信息 onclick="alert('登陆成功')"
    alert弹出文本框内容 onclick="alert(this.form.a1.value)"
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
    中间文字，两边横线 <div class="xian">
    <span class="txt">分割线文字 <br>English text</span>
    </div>
    <style>
    .xian{height:1px;margin-top:40px;text-align:center;border-top:1px solid #e2e2e2}
    .txt{position:relative;top:-18px;background:#fff;display:inline-block}
    </style>
    DIV旋转 transform:rotate(7deg);
    -ms-transform:rotate(7deg);  /* IE 9 */
    -moz-transform:rotate(7deg);  /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);
    固定DIV2

    写一个滚动条滚动事件，让这个div设置 position:absolute 该top的距离等于滚动的距离scrollTop()

    写法如下：$(window).scroll(function(){
    var tops = $(this).scrollTop();
    $('.Return_header').css({'top':tops})
    })
    如果需要单独针对某一个角设置为圆角可以使用下面代码
    border-top-left-radius:5em;
    border-top-right-radius:5em;
    border-bottom-right-radius:5em;
    border-bottom-left-radius:5em;
    设置锚点

    <div class="side" onClick="javascript:window.location.href='#toparea'">TOP</div>

    .side{width:60px; height:50px; line-height:50px; font-size:20px; font-weight:1300;
    background-color:rgba(255,255,255,0.5); cursor:pointer; text-align:center; position:fixed; top:80%; left:50%; margin-left:600px;
    border-top-right-radius:15px;border-bottom-right-radius:15px;
    }
    让音乐不自动播放 <audio controls="controls">
    <source src="music/2.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
    </audio>
    登陆成功与失败

    <script language="javascript">
    function run(){var username =document.getElementById("textfield").value;var pwd =document.getElementById("password").value;if(username=="admin"){if(pwd=="123456"){window.location.href="asd.html";window.event.returnValue=false}
    else{window.alert("登陆失败！密码错误")}
    }else{window.alert("登陆失败！用户名错误")}
    }</script>
    HTML代码：

    <form id="form1" name="form1" action="" method="post" class="a1" >
    <div><img src="d788d43f8794a4c2356bae3503f41bd5ad6e3967.jpg" width="220" height="214" alt=""/></div>
    <div align="center" class="a4" style="font-size:36px;font-style:normal;color:#DC171A;">欢迎来到光之国 <img src="timg.jpg" width="50" height="50" alt=""/></div>
    <table width="515" height="237" border="0" align="center">
    <tbody>
    <tr>
    <td width="187" id="asd" align="center" >请输入您的巨人名称：</td>
    <td width="318" align="center"><input type="text" name="textfield" id="textfield" width="200px" ></td>
    </tr>
    <tr>
    <td id="dfg" align="center">登录密码:</td>
    <td align="center"><input type="password" name="password" id="password" width="200px"></td>
    </tr>
    <tr>
    <td height="67" colspan="2" align="center"><input type="submit" value="登录" onClick="run()"></td>
    </tr>
    </tbody>
    </table>
    <img src="838ba61ea8d3fd1f9fa24497324e251f94ca5ff0.jpg" width="220" height="155" alt="" class="a3" />
    </form>

     
    同时显示日期时间： <!--setInterval实时显示时间-->
    <p id="time1" style="color: blueviolet;"></p>
    <script>
    function mytime(){
    var a = new Date();
    var b = a.toLocaleTimeString();
    var c = a.toLocaleDateString();
    document.getElementById("time1").innerHTML = c+" "+b;
    }
    setInterval(function() {mytime()},1000);
    </script>
    只显示时间 <SCRIPT language=JavaScript>
    <!-----------
    today = new Date();
    var date;
    var centry ;
    centry="";
    if (today.getFullYear()<2000 )
    centry = "19" ;
    date1 = centry + (today.getFullYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日 " ;
    date2 = "";
    document.write( date1+date2);
    //----->
    </SCRIPT>
    制作倒计时

    <p>距离2020年1月1日还有</p>
    <p><span></span></p>
    <script>
    var oSpan = document.getElementsByTagName('span')[0];
    function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
    function getDate() {
    var oDate = new Date();//获取日期对象
    var oldTime = oDate.getTime();//现在距离1970年的毫秒数
    var newDate = new Date('2020/1/1 00:00:00');
    var newTime = newDate.getTime();//2019年距离1970年的毫秒数
    var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
    var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
    second = second % 86400;//余数代表剩下的秒数；
    var hour = Math.floor(second / 3600);//整数部分代表小时；
    second %= 3600; //余数代表 剩下的秒数；
    var minute = Math.floor(second / 60);
    second %= 60;
    var str = tow(day) + '<span class="time">天</span>'
    + tow(hour) + '<span class="time">小时</span>'
    + tow(minute) + '<span class="time">分钟</span>'
    + tow(second) + '<span class="time">秒</span>';
    oSpan.innerHTML = str;
    }
    getDate();
    setInterval(getDate, 1000);
    </script>
    几秒钟后页面自动跳转到指定页
    <head>
    <meta http-equiv="refresh" content="0;URL=http://xxx.xxx.xxx/">
    </head>
    content=0 ;   <!--设置本页面停留时间，单位为秒-->

    url=http://www.baidu.com/    <!--将要跳转的页面路径-->

    2.用javascript实现
    <html>
    <script language=javascript>
    setTimeout('window.location="http://panliu888.myetang.com"',5000)
    </script>
    </html>
    location为指定跳转页面的路径，5000为时间，单位毫秒！

     

     
    设置字体大小 <A href="javascript:doZoom(16)">（超大）</A>
    <A href="javascript:doZoom(15)">中型）</A>

    <A href="javascript:doZoom(14)">（标准）</A> ]</p>

    <SCRIPT language=JavaScript>
    function doZoom(size){
    document.getElementById('zoom').style.fontSize=size+'px'
    }
    </SCRIPT>

    <div id="zoom"><p>为孩子们提供上进,融合,坚忍,友爱,感恩的氛围教育</div>
    设置颜色

    <div class="session-1" style="padding:10px 10px;" onload="load()" onunload="unload()" id="body">

    <input onclick="Changecolor('#ffffff','#ffffff')" type="button"

    value="白色" />
    <input onclick="Changecolor('#c4dbda','#ffffff')" type="button"
    value="蓝色" />
    <input onclick="Changecolor('#dce4bb','#000000')" type="button"
    value="绿色" />

    JS脚本：

    <script type="text/javascript">
    function Changecolor(bcolor,fcolor){document.getElementById("body").style.background = bcolor;document.getElementById("ziti").style.color = fcolor}
    </script>
    设置黑色背景透明效果,阴影效果 .ahbox{float:left;width:28%;margin-top:1%;margin-left:1%;font-size:15px;line-height:40px;color:#ffffff;background-color:#444444;padding:20px;background-color:#444444;filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;text-align:center;color:#ffffff;box-shadow:10px 10px 5px #000000}
    设置DIV居前 position:relative;z-index:19999;
    下拉菜单

    .nav ul{ list-style:none; height:42px; background:#33CC66;}
    .nav ul li{ float:left; width:100px; line-height:42px;}
    .nav ul li a { display:block; height:42px; font-family:"宋体"; font-size:14px; font-weight:bold; text-decoration:none; color:#000; text-align:center}
    .nav ul li a:hover { background: #CCC; color: #FFF; border-top:#F60 2px solid; height:40px;line-height:38px; border-left:#999 1px solid; border-right:#999 1px solid; }


    .nav ul li ul { position:absolute;  display:none;height:38px;  }
    .nav ul li ul li { float:none; width:100px; background:#eee; margin:0; border-bottom:1px solid #CCC; height:38px; }
    .nav ul li ul li a { background:none;}
    .nav ul li ul li a:hover { background:#666; color:#fff; height:38px; line-height:38px; text-decoration:none;font-size:14px; border:0;}
    .nav ul li:hover ul { display:block;}
    实现图片的翻转

    .father{width:300px;height:200px;position:relative;transition:all 1s linear;transform-style:preserve-3d}
    .before,.after{width:300px;height:200px;position:absolute;top:0;left:0}
    .before{background:red}
    .after{background:lightblue;transform:rotateX(-180deg)}
    .father:hover{transform:rotateX(180deg)}


    HTML:

    <div class="father">
    <div class="before">正面</div>
    <div class="after">反面</div>
    </div>

     
    无缝滚动代码：

    <script type="text/javascript">
    //js无缝滚动代码
    function marquee(i,direction){var obj = document.getElementById("marquee" + i);var obj1 = document.getElementById("marquee" + i + "_1");var obj2 = document.getElementById("marquee" + i + "_2");if (direction == "up"){if (obj2.offsetTop - obj.scrollTop <= 0){obj.scrollTop -= (obj1.offsetHeight + 20)}
    else{var tmp = obj.scrollTop;obj.scrollTop++;if (obj.scrollTop == tmp){obj.scrollTop = 1}
    }}else{if (obj2.offsetWidth - obj.scrollLeft <= 0){obj.scrollLeft -= obj1.offsetWidth}
    else{obj.scrollLeft++}
    }}function marqueeStart(i,direction){var obj = document.getElementById("marquee" + i);var obj1 = document.getElementById("marquee" + i + "_1");var obj2 = document.getElementById("marquee" + i + "_2");obj2.innerHTML = obj1.innerHTML;var marqueeVar = window.setInterval("marquee("+ i +",'"+ direction +"')",20);obj.onmouseover = function(){window.clearInterval(marqueeVar)}
    obj.onmouseout = function(){marqueeVar = window.setInterval("marquee("+ i +",'"+ direction +"')",20)}
    }</script>

    HTML代码：

    <div class="warp_sp">
    <div id="marquee1" class="marqueeleft">
    <div style="width:8000px;">
    <ul id="marquee1_1">
    <li> <a class="pic" href="#"><img width="290" height="180" src="img/img005.jpg" /></a></li>
    <li> <a class="pic" href="#"><img width="290" height="180" src="img/img006.jpg" /></a></li>
    <li> <a class="pic" href="#"><img width="290" height="180" src="img/img007.jpg" /></a></li>
    <li> <a class="pic" href="#"><img width="290" height="180" src="img/img008.jpg" /></a></li>
    </ul>
    <ul id="marquee1_2">
    </ul>
    </div>
    </div>
    </div>

    <script type="text/javascript">marqueeStart(1,"left");</script>
    设置图片翻转等 div{width:200px;height:200px;margin-top:100px;margin-left:100px;float:left}
    .div1 img{transition-property:all;transition-duration:4s;transition-delay:0s,1s,0s;border:solid 2px #000000;border-radius:10px}
    .div1>img:hover{border-radius:90px;box-shadow:5px 3px 5px #03040a}
    .div2{overflow:hidden;border-radius:10px;border:solid 2px #000000}
    .div2 img{transition-property:all;transition-duration:4s;transition-delay:0s,1s,0s;width:200px;height:200px}
    .div2>img:hover{width:300px;height:300px;box-shadow:5px 3px 5px #03040a}
    .div3 img{transition-property:all;transition-duration:4s;transition-delay:0s,1s,0s;border:solid 2px #000000;border-radius:10px}
    .div3>img:hover{transform:rotate(90deg);border-radius:90px;box-shadow:5px 3px 5px #03040a}
    p{text-align:center}
    <div class="div1">
    <!--圆角-->
    <img src="images/1.jpg">
    </div>
    <div class="div2">
    <!--放大-->
    <img src="images/2.jpg">
    </div>
    <div class="div3">
    <!--旋转+圆角-->
    <img src="images/3.jpg">
    </div>
    垂直对齐方式 vertical-align: middle;
    地图调用：

    <script src="http://api.map.baidu.com/api?v=2.0&ak=W1a6ywZFkybedSCHadpRbkz4w5HYfG4R" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    h3{display:block;width:100%;height:60px;line-height:60px;text-align:center;color:#fff;font-size:20px;background-color:#333}
    #allmap{width:100%;height:400px}
    #r-result{top:100px;background:#000;color:#fff}
    </style>

    HTML标签调用：
    <h3>我的地图</h3>
    <div id="allmap"></div>
    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;display:none;"></div>
    <script type="text/javascript">
    var map = new BMap.Map("allmap");map.centerAndZoom("北京",15);// 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());//添加地图类型控件
    map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    function G(id){return document.getElementById(id)}
    var ac = new BMap.Autocomplete( //建立一个自动完成的对象{"input":"suggestId","location":map}
    );ac.addEventListener("onhighlight",function(e){//鼠标放在下拉列表上的事件
    var str = "";var _value = e.fromitem.value;var value = "";if(e.fromitem.index > -1){value = _value.province + _value.city + _value.district + _value.street + _value.business}
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if(e.toitem.index > -1){_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business}
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str}
    );var myValue;ac.addEventListener("onconfirm",function(e){//鼠标点击下拉列表后的事件
    var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace()}
    );function setPlace(){map.clearOverlays();//清除地图上所有覆盖物
    function myFun(){var pp = local.getResults().getPoi(0).point;//获取第一个智能搜索的结果
    map.centerAndZoom(pp,18);map.addOverlay(new BMap.Marker(pp));//添加标注}
    var local = new BMap.LocalSearch(map{//智能搜索
    onSearchComplete:myFun}
    );local.search(myValue)}
    </script>
    打开网页先输入名字

    JS代码：

    function prom() {
    var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，

    //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
    if (name)//如果返回的有内容
    {

    setTimeout(function(){document.getElementById("texts").innerHTML = "欢迎您：" + name;},1000);
    }  else{

    prom();
    }

    }
    HTML代码：

    <script src="js/tishi.js"></script>
    <script>prom();</script>
    APDIV水平居中 #apDiv1 {
    width:697px;
    height:508px;
    z-index:1;
    background-image: url(interface.gif);
    margin:0px auto;
    }
    APDIV水平垂直居中 #apDiv1{
    position: absolute;
    width:697px;
    height:508px;
    left:50%;
    top:50%;
    margin-left:-348px;
    margin-top:-254px;
    z-index:1;
    background-image: url(interface.gif);
    }
       





    我们专注于Dreamwear制作大学生静态网页设计与制作，大学生DW网页作业定制,HTML静态网页制作作业,网页作业成品模版免费下载,高中至大学一二三年级网站作业定制设计，帮助学生快速完成作业，我们提供的文件包括html,psd,flash,js,jpg,png等。本站作品全部原创，所有网站作业记录去向学校，不重复不撞车，提供网页成品提供下载，若需修改需另外付费。
    QQ：2290127249