Near the end of the semester, are you still writing an HTML web design class assignment and the teacher’s homework requirements are overwhelming? Is the total number of pages required too high? Don’t know how to do your HTML web homework? Don’t have the right template? And so on. The problem you’re trying to solve, There are personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding, military, games, festivals, smoking cessation, film, photography school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, Clothing, culture, hometown, flowers, gifts, cars, other web design topics, A+ level homework, can meet college students web design needs can meet your needs. Original HTML+CSS+JS page design, Web college students web design homework source code, this is a good snack mall web design production, picture smart, very suitable for beginners to learn to use.

Site content

This webpage imitates the layout of shopping malls such as Taobao and JINGdong, and makes seven pages on the theme of “snack bus” with the content learned in this semester, and defines it as a shopping website selling snacks.

Index.html is the front page of the website, with built-in links such as buycar. HTML, regist. HTML, login. HTML, product. HTML, personcenter. HTML that can be accessed from almost any linked page. The head and footer in a web page can be used in other pages, saving the writing time of other pages.

Product. HTML is the detailed page of the product, following the head and tail of the home page, and the middle part is the detailed information of the product.

Buycar. HTML is the interface of shopping cart. In the middle, a table is drawn to complete the shopping cart in the shopping mall.

Login. HTML is the login page.

Regist.html is the registration page.

Personcenter.html is a personal-centric page, with the same header and tail, and the middle section for the purchase of items.

Information. HTML is a personal information page, different from the personal center, the middle part is the user’s personal information.

Food.html list of delicacies, second template block.

Newidea.html creative idea, the third template block

Main technical realization:

The IDE was HBuilderX, and initial testing of the site was done in Chrome. It was not easy at the beginning, but with the deepening of the class and the learning of knowledge, I gradually became familiar with it.

The web page adopts pure HTML + CSS +jquery. In the process of completing the web page, I added the knowledge of jquery to facilitate the writing of animation effects. I found that compared with JS, the use of jquery encapsulation is indeed much more convenient, and many aspects should be very complicated. Jquery is very lightweight to use when packaged and easy to explain.

In the process of using JS also called part of the content taught in class.

CSS styles mostly use text and layout Settings, often changing the size and location of a style.

Overall HTML, the use of web interoperability, string into a whole.

Video demo:Web front-end final big homework snack mall web design. Mp4

Function screenshots:

1. Home Page (index.html)

This page uses the header, middle, and bottom of the page. It includes the JS image rotation technology similar to Ding Ding Bookstore, which uses JS technology to connect the positioning response, making the effect similar to multi-level menu, as well as the JS effect of returning to the top and hiding the top key. According to the teacher’s advice, it should not slide directly to the top but should have a slow process.

Concrete JS implementation:

​

On the right is the detailed introduction, which is divided into three sections: commodity attributes, commodity details, and commodity comments. You can reach the corresponding area by defining the ID and clicking a href.

# Product Details added the picture from the screenshot of the page

# user comments

The meter is used to show the percentage of customers. By constructing a table similar to a shopping cart, the table of customer evaluation is completed

Get the full source code:

Everyone like, collect, pay attention to, comment, interested can find me to give you