Design and implementation of enterprise network

1. Use statements when adding style icons to Li

{    list-style-image: url (".. /images/li_bg.gif ");     float: left;     width: 70px;}

Implementation results:

Note: In order for Li to be able to display the ~ in one line there can be many ways-for example, to set Li's display as inline-block~ but here to use float to achieve ~ Otherwise the small icon added to Li will disappear

2, small icon Plus Text Center ~

HTML code:

<Divclass= "Logo_right">     <imgsrc= "Images/tel.jpg"alt= "Service Hotline"/>24-hour service hotline<spanclass= "Tel">114114114</span></Div>

Corresponding CSS code:

{/* so the text behind the picture can be displayed in the middle of the height of the picture */    vertical-align: Middle;     Margin-right: 10px;}

3. Focus Chart Category

JS, Flash, CSS, jquery

jquery Writing Simple ~

Myfocus Focus Map Plugin ~ is completely independent JS Library ~ Lightweight ~ High Efficiency ~ offers a lot of style ~ and a variety of styles with the same interface ~ Easy to switch ~ Full open source free

Use of Myfocus:

A, the JS folder into the Project ~ form the following directory (its JS folder contains the blue selected JS file and a Mf-pattern folder):

b, introduce the corresponding file and initialize

<Scriptsrc= "Js/myfocus-2.0.1.min.js"></Script><Scriptsrc= "Js/mf-pattern/mf_yslider.js"></Script><Linkrel= "stylesheet"href= "Js/mf-pattern/mf_yslider.css"/><Script>Myfocus.set ({ID:"Pic_box"    })</Script>

corresponding element structure code

    <Divclass= "AD"ID= "Pic_box">        <Divclass= "Loading"><!--using the Myfocus plugin to do the effect of the carousel map ~ but it takes a while to load ~ So add this loading GIF motion diagram ~ Improve the user experience -            <imgsrc= "Images/loading.gif"alt= "in picture loading"/>        </Div>        <Divclass= "Pic">            <ul>                <Li>                    <imgsrc= "Images/ad2.jpg"alt=""/>                </Li>                <Li>                    <imgsrc= "Images/ad3.jpg"alt=""/>                </Li>                <Li>                    <imgsrc= "Images/ad4.jpg"alt=""/>                </Li>            </ul>        </Div>    </Div>

Note: The ID of the outermost div must be the same as the ID specified at the time of initialization ~ also wrap a parent element for the picture List ~ set its class to Pic

Myfocus Plugin profile URL: http://demo.jb51.net/js/myfocus/tutorials.html

4, input box to add a background map to set its background color ~ Otherwise it will come out very strange effect

Design and implementation of enterprise network