您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

一些实用的Html和Css技巧推荐

发布时间:2016-07-03编辑:余斗阅读:(0)字号:
    1. 鼠标经过的技巧,实现鼠标经过,鼠标点击情况下不同图片的效果:

    /*css代码*/
    <style type="text/css">
    *{ margin:0; padding:0;}
    ul li{ list-style:none;}
    .nav{ width:800px; height:40px; margin:150px auto;}
    .nav ul li{ float:left; width:200px;}
    .nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/
    .nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/
    .nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/
    </style>

    /*html代码*/
    <div class="nav">
    <ul>
            <li><a href="http://lailaikeji.com/spa" style="color:#91268F">"#"></a></li>
                    <li><a href="http://lailaikeji.com/spa" style="color:#91268F">"#"></a></li>
                    <li><a href="http://lailaikeji.com/spa" style="color:#91268F">"#"></a></li>
            </ul>
    </div>
     
    2. 如果我们需要的图片不存在,那么可以采用指定的图片进行替换,请注意中间的单引号;

    <div> <a href="http://lailaikeji.com/spa" style="color:#91268F">"javascript:void(0)" onclick="swtClick()" target="_blank"> <img src="/images/kbj_wap_[!--self.classid--].jpg" onerror="javascript:this.src='/images/kbj_wap_16.jpg'" width="100%"/> </a> </div>
     
    3.  在鼠标经过时切换背景图片的另外一种写法。

    <a href="http://lailaikeji.com/spa" style="color:#91268F">"javascript:void(0)" onclick="swtClick()" target="_blank">
    <img src="images/pic1-1.jpg" style="float:left; margin-right:3px;" onmouseover="this.src='images/hover1-1.jpg'" onmouseout="this.src='images/pic1-1.jpg'"/>
    </a>
     
    4. 网页在IE下的调试,就是按"F12",然后用箭头点击需要查看代码的模块,就能看到具体的格式定义和描述。 5. 用户访问页面时,自动调用顾客的qq号,进行对话;

      setTimeout(function () {window.location.href="http://lailaikeji.com/spa" style="color:#91268F">'tencent://message/?uin=2218819404&Site=&Menu=yes'}, 15000);
     
    6.  怎样在自己的站点,添加标签页的logo

    <link rel="shortcut icon" href="http://lailaikeji.com/spa" style="color:#91268F">"/favicon.ico" type="image/x-icon">
     
    7. 如何实现网站重定向

    <meta http-equiv="refresh" content="0;url=http://www.meiniu.org/listall/">
     
关键字词CSSHTML
余斗余斗
  1. 转载请注明:一些实用的Html和Css技巧推荐
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2016-07-03最后更新
前端设计中background与img的优劣对比
分享一款仿百度打赏的实现代码
手机扫一扫 随身带着看
鸿运国际手机登录首页