Article Directory
foreword
for reference only
1. Login interface
登陆界面：纯html+css的布局设计
2. Home page
Foreground module:
(1) System home page: html+css layout design banner area, menu navigation area, focus area, main content and foot copyright area a)
Image carousel in focus area: use jquery to encapsulate functions and events, timer , and fade in and fade out effects to achieve.
b) Campus news random recommendation: html+css layout design, JsonData package data, call random function to reference content, display content, set timer when displaying content.
3. Background display and details page
(1) Background homepage: mainly uses some layout design of html5+css
(2) Vertical menu navigation bar: mainly uses the slideToggle() method in jquery to switch the visibility of the submenu by using the sliding effect (height change) state.
(3) Five types of information (school level, classroom, course, classroom, and class arrangement) add, delete, and check dynamic tables:
a) The CSS pseudo-class selector is designed to only move the main content of the table without moving the scroll bar of the table header.
b) The content of the main table displayed still uses the layout design of html+css
c) Delete the functions related to dom that mainly use html.
d) The traversal method used for selecting all and deleting in batches
e) The style design of the pop-up layer is mainly through the fence layout style of the Bootstrap form. The display method is through jquery's fade-in and fade-out effect.
f) Adding is through the append method of jquery
g) Editing is to obtain information through jquery, and modify information to return information
h) View is to obtain information through jquery to display.
(4) Add student information:
a) The overall design of the form is still in the style of html+css
b) Provinces, cities and regions are linked, the information of provinces and cities is written in the array, and the function is written to obtain the content, and then when the province is selected, it is right The city drop-down list is initialized, and the corresponding array information is passed in.
Some knowledge points that may be useful
Because our web homework required handwritten css+html+js at that time, we
didn’t use many frameworks,
but the front-end of the database+web course design still used the framework.
These knowledge points were recorded in my electronic notes in a messy way at the time, and the layout was a bit Messy, just for reference
Summary of home knowledge points
The menu navigation bar uses ul nesting, plus the display attribute
display: none can hide an element, and the hidden element will not take up any space. Not only is the element hidden, but the space the element originally occupied disappears from the page layout.
display: block; This element will be displayed as a block-level element with line breaks before and after it.
display:inline, this element will be displayed as an inline element, with no line breaks before and after the element.
The carousel map mainly uses jquery to encapsulate Korean style and events, timers and fade-in and fade-out effects
Timer
trigger(): Trigger some kind of event on each matching element.
triggerHandler(): This special method will trigger all bound handlers on the specified event type.
First: trigger will lead to the execution of the browser's default behavior of the same name, such as: trigger('submit'); not only will execute the effect of the submit() function, but also the effect of form submission; and triggerHandler will not cause the default behavior execution
Second: triggerHandler will only trigger the event handler of the first element in the JQ object collection, and will not generate event bubbling. And the trigger is different
Third: The return value of this method is the return value of the event processing function, not the JQ object with linkability. In addition, if the initial JQ object collection is empty, undefined will be returned.
jQuery traversal - eq() method
jQuery traversal -siblings() is used to find the sibling elements of the current element, that is, to get the sibling nodes of the current element (excluding yourself).
Set a new style for the current element, and remove the style of the current element's sibling elements:
$(this).addClass("active").siblings().removeClass("active");
fadeIn and fadeOut methods
The addClass() method adds one or more classes to the selected elements. *
The index() method returns the index position of the specified element relative to other specified elements.
Popular news is randomly recommended using JSONData to encapsulate, call the random function to reference the content, display the content, and set a timer when displaying the content.
getRandomNum takes a random number
random: returns the largest integer less than or equal to x
Math.random(); returns a random number between 0 (inclusive) and 1 (exclusive):
The push() method adds one or more elements to the end of the array and returns the new length.
1. margin:0 auto 可以实现元素居中
# stands for id, . stands for class
If the js code can only be allowed at the end of the html file, if it cannot be run at the beginning of the html file or externally calling js: the reason may be that the js you write can only be called after the web page is loaded. The above $(function(){ }) is an anonymous function; it means that it is executed as soon as the webpage is loaded, which can solve the trigger(): trigger a certain type of event
on each matching element.
triggerHandler(): This special method will trigger all bound handlers on the specified event type.
https://download.csdn.net/download/qq_43741419/19699865
source code, for reference only