html暑期实习笔记（二）

1. 鼠标移动到某个div块，实现出现整块的灰色背景，而当鼠标点击某个div块时，又能实现页面的跳转：

      .show-style3:hover { background-color: #EDEDED;}    

              此句为实现鼠标移动到哪里，出现灰色背景的css代码。

     <div class="show-style3"   onclick="window.open('bar_cnt.html')"   ></div>  

               此句为实现鼠标点击，出现跳转的html代码。

         bar_cnt.html就是你想要跳转到的那个页面。

2.点击图片，实现页面跳转（css代码）：

  left_side a {

   display: block;
   width: 100px; /* 与背景图片同宽 */
   height: 100px; /* 与背景图片同高 */
}
     当你将A标签拉大到与背景图同等大小,并且完全覆盖在背景图上时,就会产生类似于给背景图片加链接的效果了。

3.实现搜索框input 内，原本有search 提示，当鼠标点击时，search提示消失，而当鼠标移开到别处时，search 提示又出现在搜索框input 内

关键代码：

<input  class="input_style" type="text" value="Search" 

      onfocus="if(this.value=='Search')this.value='';"   />

具体写好的代码样例如下：

(附件中包含，你可以下载后更清楚看到效果）

4.实现简单的点击出现以及隐藏的下来框效果：关键代码如下：

html中的关键代码：

    <a onClick=Show< /span>FLT(1) href="void(null)">需要点击的地方1< /a>

    <div class="#" id=LM1style="display:none">点击后才出出现的隐藏内容1</div>

    <a onClick=Show< /span>FLT(2) href="void(null)">需要点击的地方1< /a>

    <div class="#" id=LM2style="display:none">点击后才出出现的隐藏内容1</div>

    <a onClick=Show< /span>FLT(3) href="void(null)">需要点击的地方1< /a>

    <div class="#" id=LM3style="display:none">点击后才出出现的隐藏内容1</div>

js代码：

var number=3; //定义条目数

function LMYC() {
var lbmc;
    for (i=1;i<=number;i++) {
        lbmc = eval('LM' + i);
        lbmc.style.display = 'none';
    }
}

function ShowFLT(i) {
    lbmc = eval('LM' + i);
    if (lbmc.style.display == 'none') {
        LMYC();
        lbmc.style.display = '';
    }
    else {
        lbmc.style.display = 'none';
    }
}

具体案例如下：

(附件中包含，你可以下载后更清楚看到效果）

5.实现外围阴影效果：

  主体页面四周实现阴影效果的css代码：box-shadow: 0 0 15px #565656;

6.html中，人民币￥（shift+4）的三种写法形式：

<p>&#65509; 100元</p>

<p style="font-family:Arial;">&#65509; 100元</p>

<p style="font-family:Arial;">&yen; 100元</p>