Common web page design topics include personal, food, company, school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers, gifts, cars, other web page design topics, A + level work, It can meet the needs of College Students' web page design. The original HTML+CSS+JS page design is the source code of Web students' web page design. The screen is smart, the layout is clean, the content is rich, and the theme is clear. It is very suitable for beginners to learn and use.
1, Web page introduction 📖
1 web page introduction: this work is the subject of student's personal homepage web page design, HTML+CSS layout production, web front-end final homework, and the source code of college student's web page design. It is a good web page production, with smart screen and simple student level code. It is very suitable for beginners to learn and use.
2. Web page editing: the code of web page works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, vscope, Sublime, Webstorm, Text, Notepad + +) can be used to run, modify and edit.
3. Knowledge application: in terms of technology, it mainly applies the web page knowledge: Div+CSS, mouse over effect, Table, navigation bar effect, Banner, form, secondary and tertiary pages, video, audio elements, Flash, and designs the knowledge points required by Logo (source file).
1, Web page effect 🌌
2, Code display 😈
1.HTML structure code 🧱
The code is as follows (example): only part of the code is shown below for reference~
copy<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Introduction to online bookstore</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="web"> <!----Website header start----> <div class="top"> <div class="logo"><img src="images/logo.png"></div> </div> <!----Navigation start----> <hr /> <div id="nav"> <ul> <li><a href="index.html">Home page</a></li> <li><a href="about.html">Website introduction</a></li> <li><a href="wenxue.html">Literature complex</a></li> <li><a href="ertong.html">Children's Library</a></li> </ul> </div> <hr /> <div class="about"> <h1>Introduction to online bookstore</h1> <p>Founded in September 2008, the online book city focuses on digital reading and is a leading mobile reading distribution platform in China. Since its establishment, the company has been adhering to the enterprise spirit of focus and pragmatism. At present, it has cooperated with 600 high-quality copyright owners at home and abroad to introduce a large number of high-quality digital copyrights of books, providing hundreds of millions of users in more than 150 countries and regions with high-quality book content and intelligent user experience. At present, the company's monthly active users have reached 1.1 Billion.</p> <p>The online book city was successively elected as the executive director unit of China Copyright Association, China audio visual and Digital Publishing Association and China Publishing Association. In 2014, the online book city was awarded the"National Copyright demonstration unit"；Due to the remarkable promotion and application effect in the genuine field, the online book city won the"The fourth World Intellectual Property Organization Copyright Gold Award"；2016 In, the online book city was selected as one of the first batch of key laboratories of science and technology and standards of the press and publication industry under the State Administration of press, publication, radio, film and television; In 2017, the online book city won the"The fourth China publishing government award advanced publishing unit"；2018 Was shortlisted for the 10th"Top 30 national cultural enterprises"List and list of nominated enterprises.</p> <p>with"The world's most professional reading platform"The vision of online bookstore technology has entered the overseas market since 2015. At present, more than 100 original works have been authorized overseas and translated into Korean, Japanese, Thai and English. At the beginning of 2018, the list of national key cultural export enterprises and key projects was announced, and online book stores were listed.</p> <p>The online book city is a modern large-scale comprehensive book purchasing center and a well-known cultural brand at home and abroad. With complete varieties, complete functions and advanced management, the online bookstore is committed to providing readers with multi-functional, comprehensive and high-quality one-stop cultural consumption services. Take the lead in introducing large-scale comprehensive supermarkets in the same industry in China(GMS)It has a business center, a catering center, a general service desk, a post and telecommunications agency, a bank and other service facilities. It adopts the layout of stores in the city and the marketing of all kinds of publications. It distributes various books, audio-visual products, electronic publications, cultural works of art PDA About 230000 kinds of products.</p> <p>The book city was first proposed and practiced in the international industry"Five star Bookstore"The first bookstore in China to extend its business hours by one hour in summer BIMS The system manages the chain operation by computer, and provides services such as commodity inquiry, shopping guide, reservation, and mailing. In 2003, the book city passed the international authoritative certification body in the United Kingdom BSI company ISO9001 Quality management system certification.</p> <p>Online bookstore has been awarded"National standing Book designated sales store","National Xinhua Bookstore spiritual civilization demonstration unit", 2002 In April, it was rated by the central civilization office and the State Council rectification office as"National demonstration site for creating civilized industry". Praised as a city by the citizens"Cultural Park","The second library","The happy castle of scholars". </p> </div> <div class="foot">copyright @ Online bookstore</div> </div> </body> </html>
2.CSS style code 🏠
body {
margin: 0 auto;
font-size: 14px;
font-family: "Microsoft YaHei ";
line-height: 22px;
}
div,p,input,ul,li,h1,h2,h3 {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
transition: all 0.6s;
}
/*---top Start-----*/
.web {
width: 1000px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.top {
width: 1000px;
height: 55px;
margin: 0 auto;
}
.logo {
width: 186px;
height: 39px;
margin-top: 30px;
}
#nav {
width: 1000px;
height: 35px;
margin: 0 auto;
}
#nav ul {
margin: 0 auto;
}
#nav ul li {
height: 35px;
line-height: 35px;
color: #FFF;
float: left;
text-align: center;
}
#nav li a {
color: #000;
font-family: "Microsoft YaHei ";
font-size: 14px;
height: 35px;
line-height: 35px;
display: block;
padding: 0px 40px;
}
.box1 {
width: 958px;
height: 300px;
border: #CCC 1px solid;
padding: 20px;
margin-top: 20px;
}
.box1 img {
float: left;
margin-right: 15px;
}
.box1 h1 {
font-size: 16px;
height: 35px;
line-height: 35px;
}
.box1 p {
font-size: 14px;
line-height: 30px;
}
.box2 {
width: 958px;
height: 300px;
border: #CCC 1px solid;
padding: 20px;
margin-top: 20px;
}
.box2 ul li {
width: 238px;
height: 290px;
float: left;
text-align: center;
}
.box2 ul li img {
width: 220px;
height: 250px;
}
.box2 ul li h1 {
color: #353637;
font-size: 14px;
line-height: 25px;
height: 25px;
font-weight: normal;
}
.foot {
width: 1000px;
height: 60px;
margin-top: 20px;
line-height: 60px;
font-size: 14px;
text-align: center;
}
.about {
width: 1000px;
height: auto;
overflow: hidden;
}
.about h1 {
height: 60px;
line-height: 60px;
font-size: 18px;
text-align: center;
}
.about p {
line-height: 25px;
font-size: 14px;
text-indent: 2em;
}
.liebiao-ner {
width: 100%;
height: 300px;
}
.liebiao-ner ul li {
height: 137px;
float: left;
border-bottom: #9c9b9a 1px dashed;
margin-bottom: 15px;
}
.liebiao-ner ul li img {
float: left;
width: 98px;
height: 121px;
margin-right: 10px;
}
.liebiao-ner ul li h1 {
color: #1084db;
font-size: 14px;
font-weight: normal;
height: 30px;
line-height: 30px;
text-align: left;
}
.liebiao-ner ul li h2 {
color: #909191;
font-size: 12px;
margin-bottom: 10px;
}
.liebiao-ner ul li p {
color: #030303;
font-size: 12px;
line-height: 18px;
}
.ertong {
width: 958px;
height: auto;
overflow: hidden;
padding: 20px;
margin-top: 20px;
}
.ertong ul li {
width: 238px;
height: 290px;
float: left;
text-align: center;
}
.ertong ul li img {
width: 220px;
height: 250px;
}
.ertong ul li h1 {
color: #353637;
font-size: 14px;
line-height: 25px;
height: 25px;
font-weight: normal;
}3, Personal summary 😊
A set of qualified web pages should include (specific can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (it is better to pull down), the middle content plate, and the footer; undefined
- All pages are hyperlinked to each other, and can go to three-level pages, consisting of 5-10 pages;
- The page style and style are unified, the layout and display are normal, not bad and chaotic, and the Div+Css technology is used;
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally;
- There should be JS special effects, such as regular switching and manual switching of picture news;
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology;
- The page is fresh, beautiful, generous and different.
- The front-end program of the website should not only be able to present the content required by the user, but also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
💂 [acquisition method]
gitee code cloud source code warehouse - Welcome Star: https://gitee.com/zhanyuqiu2022/my-app