Use CSS + Div + js to draw Windows Live Messenger

Today, space woke up from anesthesia and expected a very beautiful update. After opening the update, it still looks the same.
Ginseng is yellow, approaching Red, Red gives people a very extreme feeling. There is a degree in everything. Let yourself have a red dot first.
 
I drew a logo for myself some time ago, and then I learned about CSS and Js.
The following is a learning achievement
Http://keyue.cn/BATE/second.htm
 
The tutorial is as follows:
First, open Dreamweaver to create an HTML basic Page Based on XHTML-Transitional
 
Directly go to the Code view (design view only shows the effect)
 
First, insert two JS functions <body onmouseup = releasecurrent () onmousemove = movecurrent ()> </body>
The result is the switch of the mouse over each layer on the page. This code is used to copy the application (I cannot use multiple layers of Z-index here)
The Code is as follows:
VaR drageffect;
Function movecurrent ()
{
If (! Dragging |! Current)
Return;

If (event. Button = 0)
{
Releasecurrent ();
Return;
}

If (! Starteddragging)
{
Current. classname = 'dragging current window ';
Starteddragging = true;
}

Drageffect ();
}
Function releasecurrent ()
{
If (! Current)
Return;

Current. classname = 'current window ';
Dragging = false;
Starteddragging = false;
}
Function makeunselectable (E)
{
E. unselectable = true;
If (E. classname = 'content ')
Return;

For (VAR c = E. firstchild; C = C. nextsibling)
If (C. nodetype = 1)
Makeunselectable (C );
}
Bodycss is defined as follows:
Body {font-family: tahoma; font-size: 12px; padding: 0; margin: 0; Vertical-align: middle; overflow: hidden ;}

Create a subject layer <Div id = fundus onmousemove = calcresize (this) onmousedown = setcurrent (this)> </div>
Two JS functions are referenced here. The function is to change the mouse style when the mouse moves on the layer and when the left-click is on the layer, and to change the length and width of the layer.
Code change:
VaR current = NULL;
VaR dragging = false;
VaR starteddragging = false;
Function setcurrent (W)
{
If (W! = Current)
{
// Unset old current
If (current)
Current. classname = 'window ';
// Set current
Current = W;
Current. classname = 'current window ';
// Put current on top
Document. getelementbyid ("Windows"). appendchild (current );
}
// Init drag
VaR offsetx = event. X-parseint (W. currentstyle. Left );
VaR offsety = event. Y-parseint (W. currentstyle. Top );
If (offsety <80)
{
Dragging = true;
Drageffect = function ()
{
W. style. pixelleft = event. X-offsetx;
W. style. pixeltop = event. Y-offsety;
}
}
Else
{
VaR width = parseint (W. currentstyle. width );
VaR resizex = offsetx> width-10;
VaR Height = parseint (W. currentstyle. Height );
VaR resizey = offsety> height-10;
If (resizex | resizey)
{
Dragging = true;
VaR offsetx = event. X-width;
VaR offsety = event. Y-height;
Drageffect = function ()
{
If (resizex)
W. style. pixelwidth = event. X-offsetx;
If (resizey)
W. style. pixelheight = event. Y-offsety;
}
}
}
}
Function calcresize (W)
{
VaR offsetx = event. X-parseint (W. currentstyle. Left );
VaR offsety = event. Y-parseint (W. currentstyle. Top );
VaR width = parseint (W. currentstyle. width );
VaR resizex = offsetx> width-10;
VaR Height = parseint (W. currentstyle. Height );
VaR resizey = offsety> height-10;
W. style. cursor = (resizex | resizey )? (Resizey? "S": "") + (resizex? "E": "") + "-resize": "default ";
}

The fundus layer CSS is defined as follows:
# Fundus {z-index: 1; position: absolute; Height: 510px; top: 43px; left: 790px; width: 220px ;}
 
And then create
<Div id = shadow> </div> // shadow layer (transparent shadow)
<Div id = glass> </div> // overcolor layer (with transparent effect)
<Div id = menu> </div> // directory Layer
<Div id = headg> </div> // The background layer of the header, resulting in excessive color difference from glass.
<Div id = head> </div> // upper part of the panel
<Div id = List> </div> // main framework
<Div id = bottom> </div> // bottom
This layer is separated, but is stacked or distributed with an absolute position (absolute), mainly to prevent the effect from being mixed by colors.
 
<Div id = shadow> </div> // shadow layer (transparent shadow) CSS code:
# Shadow {Height: 100%; width: 100%; top:-2px; left:-2px; position: absolute; Background-color: #000000; filter: progid: DXImageTransform. microsoft. blur (pixelradius = 4, makeshadow = true, shadowopacity =. 50 );}
Here, the blur filter is applied to make the blur effect of object content.
Functions of several parameters
Enabled sets or retrieves whether the filter is activated.
Makeshadow sets or retrieves whether the object content is processed as a shadow display.
Pixelradius setting or retrieval of the depth of the blur effect.
Shadowopacity sets or retrieves the transparency (darkness) of the Shadow produced using makeshadow ).

<Div id = glass> </div> // overcolor layer (with transparent effect) CSS code:
# Glass {position: absolute; Border: 1 solid black; top: 0px; left: 0px; width: 100%; Height: 100%; Background-color: # ffffff; filter: alpha (opacity = 70, style = 1, finishopacity = 95, startx = 50, starty = 50, finishx = 50, finishy = 0 );}
Here the (cssfilter) Alpha filter is applied to adjust the transparency of object content. You can set the overall transparency, or the transparency of linear gradient and radiation gradient.
Functions of several parameters
Enabled sets or retrieves whether the filter is activated.
Set or retrieve a transparent gradient style.
Opacity opacity sets or retrieves the start transparency of a transparent gradient.
Set finishopacity or retrieve the end transparency of the transparent gradient.
Startx sets or retrieves the horizontal coordinates of the start point of a transparent gradient.
Starty sets or retrieves the vertical coordinates of the start point of a transparent gradient.
Finishx sets or retrieves the horizontal coordinates of the transparent gradient end point.
Finishy sets or retrieves the vertical coordinates of the transparent gradient end point.

<Div id = menu> </div> // directory Layer
Only a few words
<Div id = menu> <strong> ginseng MSG </strong> <font color = "# ff0000" size = "1"> bate </font> </div>
CSS code:
# Menu {position: absolute; Height: 30px; left: 5px; line-Height: 30px ;}

<Div id = headg> </div> // css code of the header background layer:
# Headg {position: absolute; top: 36px; left: 3%; width: 94%; Height: 80px; Background-color: #000000; filter: progid: DXImageTransform. microsoft. blur (pixelradius = 1, makeshadow = true, shadowopacity =. 25 );}
The blur filter is also applied here.

<Div id = head> </div> // css code in the upper part of the panel:
# Head {position: absolute; top: 36px; left: 3%; width: 94%; Height: 80px; Background-color: # ffffff; Border: 1 solid # aaaaaa ;}
Place on this layer
<Div id = inhead> </div> // css code with excessive color:
# Inhead {position: absolute; width: 100%; Height: 100%; Background-color: # aaaaaa; filter: alpha (opacity = 80, style = 1, finishopacity = 0, startx = 50, starty = 70, finishx = 50, finishy = 0)
Alpha (opacity = 80, style = 1, finishopacity = 30, startx = 50, starty = 70, finishx = 50, finishy = 100 )}
Application Alpha dual-layer overuse

<Div id = imageh> </div> // place the CSS code of the Avatar:
# Imageh {position: absolute; top: 10; left: 10; Height: 40; width: 40; Border: 1 solid # aaaaaa; Background-color: #87cad0; cursor: pointer ;}

<Div id = comboxname> // name of the drop-down list
<Select name = "select"> <option value = "0"> <font color = "# aaaaaa">-enter the name </font> <option value =" 0 "> </SELECT>
</Div> CSS code:
# Comboxname {position: absolute; top: 9; left: 60; Height: 20 ;}

<Div id = comboxmes> header // two messages in the drop-down box
<Select name = "select"> <option value = "0"> <font color = "# aaaaaa"> <personal message> </font> <option value = "0"> </SELECT>
</Div> CSS code:
# Comboxmes {position: absolute; top: 30; left: 60; Height: 20 ;}

<Div id = Mail> // email address and other



</Div> CSS code:
# Mail {top: 53px; left: 10; position: absolute; width: 90%; Height: 16 ;}

 

<Div id = List> </div> // main framework CSS code:
# List {position: absolute; top: 125; left: 3%; width: 94%; Height: 70%; Background-color: # ffffff ;}
Place the main form:
<Div id = leftlist> </div> // select the form CSS code on the left:
# Leftlist {position: absolute; width: 33px; Height: 40px; Border: 1 solid # aaaaaa; border-right-color: # ffffff; cursor: pointer ;}

<Div id = context> </div> // content form CSS code:
# Context {position: absolute; left: 32px; top: 39; width: expression (this. parentelement. offsetWidth-32); Height: 70%; Border: 1 solid # aaaaaa; border-top-color: # ffffff ;}
Locate by expression.

<Div id = searchbar> <input type = "text" id = tsear name = "tsearch" value = "search..."/> </div>
// Css code in the search box:
# Searchbar {position: absolute; left: 32px; top: 0; width: expression (this. parentelement. offsetWidth-32); Height: 40px; Border: 1 solid # aaaaaa; border-left-color: # ffffff; line-Height: 38px ;}
Same as the expression.

<Div id = ADR> </div> // css code of the advertisement form:
# ADR {position: absolute; top: 85%; left: 0; width: 90%; Height: 15%; Background-color: # ccccff; Border: 1 solid black; cursor: pointer ;}

Bottom
<Div id = bottom> </div> // bottom CSS code:
# Bottom {position: absolute; top: 95%; width: 90%; Height: 3%; left: 3% ;}

Code of several controls
# Tsear {Height: 20px; color: # aaaaaa; width: 150px ;}
# Bsearch {width: 100%; Height: 16; color: # aaaaaa; font-size: 12px}
# Flashc {z-index: 1; position: absolute; top: 30; left: 600 ;}
# Ads {width: 97%; Background: #000000; Height: 200px ;}
Select {background-color: # eeeeee; Border: 0 ;}

After finishing the process, add Ajax technology on this basis and make an online MSN job. The effect is as good as that on the software interface.
Note (the CSS filter is applied here. xpsq2 will restrict these codes. You need to cancel the restriction and view the code)

Each layer is distinguished by a unique ID to distinguish its role from its companion. Understand the effect of CSS code and JS Code.
Check the page again.
Http://keyue.cn/BATE/second.htm