Create|Discover unlimited creative possibilities
creative purpose
This is a site that brings together everyone's creativity. Here, we can see the hard work of the students who participated in the Web front-end development course, see their growth, see their love, and see their infinite creativity! Although this display site is so simple, the students' sites are so rich and creative. I hope you can enjoy them!
structural function
- Submit work
- Display all works, including display details page
- Display the ranking list of works and like the works
- Collect your favorite works
technical details
- By monitoring the browser window size, the home page banner image is always full screen
- Change the navigation bar by monitoring the scroll position
- Layout: traditional layout method of position+float, including some tricks such as display: inline-block and clear float.
- The icon uses iconfont
- -webkit-scrollbar style changes the scroll bar to make the web page more beautifying
- Use pseudo classes to achieve some effects on the ranking list
- Made some sliding color effects on the edges of the card
- Realized the templating of the entire site page, obtained the template content through ajax, and rendered it on the page.
- Use location to get the current url parameters, so that different pages can use different templates and some specific effects. This effect can be achieved with only one function, and the parameter is the template name.
- Use js to control the display attributes of some effects to achieve some specific effects in my favorites column
- Submit the page by sneaking into submit.php (using bootstrap to achieve the style effect of the form), submitting it to the database, and then fetching it from getdata.php and generating a json string.
- When the website obtains data, the ajax synchronization method is used to obtain the json string of getdata.php. At the same time, recursive calls are used when looping out the json string to solve some asynchronous problems caused by using ajax.
- Use sessionstorage to store retrieved data
- Implemented a sorting function by star value on the ranking page
- Embed placeholders in templates to place retrieved data in the correct place
- For the details page, a function is used to obtain the url parameters so that different accounts can display different details pages.