Create a slightly naughty personal homepage-structure, personal homepage --

Create a slightly naughty personal homepage-structure, personal homepage --

Directory

Create a slightly naughty personal homepage-menu

Create a slightly naughty personal homepage-structure

First of all, I would like to thank everyone for giving me a face and seeing comments.

However, I forgot to say that the design was inspired by a promotional image of the processing system provided by a design company to a bank. I liked it very much when I first saw it, we use it as our personal homepage. The first sight we see is the publicity picture. The dynamic effect and other pages are our own things.

My personal homepage

Previous Article: Create a slightly naughty personal homepage-menu

The source code is mounted on git.

Source code

If you have git, please remember to give it to Xing ~~~~~~

Here we will talk about the overall structure. First, there are a total of seven menus and five areas.

/* Seven menus */<ul class = "indexMenu"> <li data-type = "normal"> <span class = "glyphicon-home"> </span> <em class = "rel"> my homepage </em> </li> <li data-type = "left"> <span class = "glyphicon-user"> </span> <em class = "rel"> my information </em> </li> <li data-type = "top"> <span class = "glyphicon- picture "> </span> <em class =" rel "> my album </em> </li> <li data-type =" right "> <span class = "glyphicon-penpencil"> </span> <em class = "rel"> my essays </em> </li> <li data-type = "bottom"> <span class = "glyphicon-film"> </span> <em class = "rel"> my copy website </em> </li> <li data-type = "left"> <span class = "glyphicon-folder-open"> </span> <em class = "rel"> my work experience </em> </ li> <li data-type = "right"> <span class = "glyphicon-send"> </span> <em class = "rel"> my games </ em> </li> </ul>/* Five Regions */<section class = "area_main abs ovh"> </section> <section class = "area_right abs"> </section> <section class = "area_left abs"> </section> <section class = "area_top abs"> </section> <section class = "area_bottom abs"> </section>

Therefore, some regions need to display more than two contents (such as two left and two right ). Therefore, we need to perform some control here. Because there are a lot of other menus, we used ajax to load the pages to be displayed when we clicked other menus for the first time.

As a whole, I closed two packages. One is the event control of the home page, the other is the paging event control, and then run the corresponding paging control js code in the load callback method.

Each time you click, make a judgment to determine whether the page has been inserted. If not, load the page. If yes, it will open normally.

The Code is as follows:

/* Click action on the home page menu */. click (function () {var $ this = $ (this), type = $ this. data ('type'), target = $ this. data ('target'), $ area = $ ('. area _ '+ type), flag = $ area. data ('flag ')? $ Area. data ('flag'): ''; if (target & $ area. find ('. box _ '+ target ). length = 0) {$ area. append ('<div class = "scroll-pane box _' + target + '"> </div>'); $ area. find ('. box _ '+ target ). load (target + ". html ", function () {$ area. find ('. box _ '+ target ). jScrollPane (); $. initModule ({target: target}) ;};} if (target) {$ area. data ('flag', target ). find ('> *'). removeClass ('active'); $ area. find ('. box _ '+ target ). addClass ('active');} if ($ body. hasClass ('Type _ '+ type) & flag = target) return; menuClickType [type] () ;});

A plug-in of the scroll bar -- jScrollPane is used here.

Here the logic may be a bit messy. There are two flags in total, one is the target, the other is the type, the type is the region identifier, and the target is the content identifier.

If the box_target element cannot be found, add one, load it into the target.html page using ajax, and then use the method corresponding to the callback method init.

The page structure is as follows:

/* Loading js in the region */$ (function () {var moduleMap = {'myinformation': myInformation, 'myphotos': myPhotos, 'myarticle': myArticle, 'myrecord ': myRecode, 'mywork': myWork, 'mygame': myGame} $. extend ({initModule: function (settings) {var target = settings.tar get; moduleMap [target] () ;}});

/* Load my information js */function myInformation (){}······}

In this way, the general structure of the entire page is complete, and subsequent code compilation only needs to be written in the corresponding html and function.

Note that the homepage is directly written in. You do not need to add new pages.

Read the original article: Create a slightly naughty personal homepage-structure

Html uses the div + css structure to create a personal homepage template with five pages

No one will help you!
It takes one day to write five pages, even for a cool B. No one will spend one day for a few very rich values (unless there is a ready-made code, but the possibility is too small)
Why don't you try it on your own? Why don't you know anything about it!
 
How to be a very naughty girl?

Boys do not like it very well. They should not show off the limelight, but let him see your existence. If you deliberately ignore them, they will receive 0 to unexpected results. But it must not be too much. Otherwise, I hate it and study hard. Honestly, it is also the most attractive to boys. I believe that you will become a girl who sees and loves people. Come on. Hope you can adopt it and help you.