I. π¨π Site Title
π« Campus web page design, school class web page production, school official website, novel books, and other websites design and production.
2. βοΈ Site Description
π·οΈ HTML static web page design job is made with dreamweaver, using DIV+CSS layout, there are many pages, the first page is rich in CSS layout, bright and vibrant colors. Top navigation and bottom area background color 100% width, body content area width
π A set of high quality π― Web design should include (depending on individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably drop-down), the middle content section, and the footer.
- All pages are hyperlinked to each other, reaching three-level pages, consisting of 5-10 pages.
- Page Style Unified Layout displays normal, not messy, using Div+Css technology.
- The menu is beautiful and striking, and the secondary menu can pop up and jump normally.
- To have JS effects, such as timer switching and manual switching of picture rotation.
- Pages contain multimedia elements such as gif, video, music, and the use of form technology.
- The page is refreshing, beautiful and generous.
- Not only should the content required by users be presented, but also the requirements of good layout, beautiful interface, elegant color matching and various forms of expression should be met.
3. π Website Introduction
π Site layout: The plan uses the current mainstream, compatible with major mainstream browsers, stable display floating page layout structure.
π Programming aspects of the website: plan to use the latest web programming language HTML5+CSS3+JS program language to complete the functional design of the website. And make sure that the website code is compatible with all the major browsers on the market so that you can see the effect of the website immediately after opening it.
π Web site material: plan to collect good-looking picture material from various platforms, select pictures suitable for web page style, and then use PS to make pictures suitable for web page size.
π Web site files: Web site system file types include: html web page structure files, css web page style files, js web page special effects files, images web page picture files;
π Web page editing: Web page work code is simple, you can use any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad+, etc.) to run and modify editing operations.
Where:
(1) π The HTML file contains: where index.html is the first page and the other html is the second-level page;
(2) π The css file contains: css full page style, text scrolling, picture enlargement, etc.
(3) π The JS file contains: JS for dynamic round-robin effects, form submission, click events, etc. (js code is used in individual web pages).
IV. π Site Demo
V. βοΈ Site Code
𧱠HTML structure code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xinzhi Triple Bookstore Co., Ltd.</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top">
<div class="logo">
<img src="img/logo.png" />
</div>
<div class="nav">
<ul class="nav_menu">
<li class="nav_menu-item"><a href="index.html">home page</a></li>
<li class="nav_menu-item"><a href="#">Triple Introduction</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="jianjie.html">Introduction to Triple</a></li>
<li class="nav_submenu-item"> <a href="chuangshiren.html">The Founder of the Bookstore</a></li>
<li class="nav_submenu-item"> <a href="lishi.html">Historical Footprint</a></li>
<li class="nav_submenu-item"> <a href="rongyu.html">Triple Honors</a></li>
</ul> </li>
<li class="nav_menu-item"><a href="tushu.html">Triple Books</a></li>
<li class="nav_menu-item"><a href="xinwen.html">Triple News</a></li>
<li class="nav_menu-item"><a href="mendian.html">Triple Store</a></li>
<li class="nav_menu-item"><a href="lianxi.html">Contact us</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="banner">
<img src="img/banner.jpg" />
</div>
<!--box1 start--->
<div class="bx01">
<div class="bx01-left">
<h2>Serve the reader wholeheartedly</h2>
<h1><a href="#">Announcement Dynamic </a></h1>
<ul>
<li><a href="#Why is this magazine "boutique"? </p></a></li>when it was first published in 93 years and was republished in 24 years?
<li><a href="#"><p>Triple Bookstore Acquired" Model Unit of Copyright Protection in Beijing in 2020 "Title</p></a></li>
<li><a href="#"><p>Focus" along the way "Civilization Exchange, Helping the Chinese Academic World Voice </p></a></li>
<li><a href="#In the post-epidemic era of'><p>', how can mutual self-help break the situation? </p></a></li>
</ul>
</div>
<div class="bx01-right">
<img src="img/img1.jpg" />
</div>
</div>
<div class="bx02">
<div class="bx02-left">
<div class="box" id="box">
<div class="inner">
<!--Carousel Map-->
<ul>
<li><a href="#"><img src="img/lunbo1.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/lunbo2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/lunbo3.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/lunbo4.jpg" alt="" /></a></li>
</ul>
<ol class="bar">
</ol>
<!--Left and right focus-->
<div id="arr">
<span id="left"> < </span>
<span id="right"> > </span>
</div>
</div>
</div>
</div>
<div class="bx02-right">
<p>2019 From August 21 to 25, 2008, Triple Life Weekly was selected at the 26th Beijing International Book Expo."Exhibition of Quality Periodicals Celebrating the 70th Anniversary of the Founding of the People's Republic of China"οΌAs one of the excellent journals, it is on display at the book fair. This time"Boutique periodical Exhibition"There are four main themes. Namely"New China Award-winning Journal""Publicizing good articles on Journal topics""Honoring the 70th Anniversary of the Publication""Chinese Journal Memory"οΌA total of 1099 journals were displayed. Each theme area will find a Triple Life Weekly. It can be said that Triple Life Weekly has always been one of the participants in the 70 years'history of Chinese Journal industry.</p>
</div>
</div>
<div class="bx03">
</div>
<div class="chuanc">
<div class="left">
<div class="tit">
<span><img src="img/ico01.png" /></span>
<h2>Bookstore Honors</h2>
<span><img src="img/ico02.png" /></span>
</div>
<div class="wensd">
<p>Lifeγ»readγ»Xinzhi Triple Bookstore is a publishing organization with a long history and glorious tradition. Over the past 80 years, we have always adhered to"Serve the reader wholeheartedly"Purpose, abide by"Humanistic Spirit, Ideological Wisdom"Ideas, adherence"First-class, cutting-edge"Standard, which mainly publishes books on the human sciences and social sciences. Publications cover the fields of philosophy, history, literature, art, economy, politics, law and social life. They enjoy high prestige in the field of knowledge and the general reader and are known as"The Spiritual Home of Chinese Intellectuals". </p>
</div>
</div>
<div class="right">
<img src="img/cc01.jpg" />
<img src="img/cc02.jpg" />
<img src="img/cc03.jpg" />
<img src="img/cc04.jpg" />
</div>
</div>
<div class="klink">
Quick Links
</div>
<div class="link">
<ul>
<li><a target="_blank" href="#">Lifestyle Bookstore</a></li>
<li><a target="_blank" href="#">Life Weekly</a></li>
<li><a target="_blank" href="#">New Knowledge</a></li>
<li><a target="_blank" href="#">Triple Philharmonic</a></li>
<li><a target="_blank" href="#">Series Abstracts</a></li>
<li><a target="_blank" href="#">Triple Journal</a></li>
<li><a target="_blank" href="#">Taofen Bookstore</a></li>
<li><a target="_blank" href="#">Thermal Rank </a></li>
<li><a target="_blank" href="#">Book Reviews Newsletter</a></li>
<li><a target="_blank" href="#">Contact us </a></li>
</ul>
</div>
</div>
<div class="foot">
<p>Address: 100010, No. 22 East Street, Beijing Art Gallery, China | Telephone: 8610-64001122</p>
<p>Copyright © 2013 SDX Joint Publishing Company.All rights Reserved</p>
<p>Life·read·Xinzhi Triple Bookstore Copyright | Technical Support: Cloud Stamp Technology </p>
<p>ICP Record number: Beijing ICP No. 12011204-3</p>
</div>
<script type="text/javascript" src="js/banner.js"></script>
<embed src="media/yinyue.mp3" autostart="true" loop="true" hidden="true"></embed>
</body>
</html>
π CSS Style Code
body {
margin: 0 auto;
font-size: 12px;
font-family: "Microsoft YaHei";
line-height: 22px;
background: #eef0f3;
}
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;
}
.top {
width: 1400px;
height: 137px;
background: #2C3F61;
margin: 0 auto;
}
.logo {
width: 450px;
margin-right: 50px;
float: left;
height: 90px;
margin-left: 30px;
margin-top: 26px;
}
.nav {
width: 860px;
height: 50px;
color: #70142a;
float: left;
margin-top: 50px;
}
.nav a {
display: block;
padding: 0 16px;
line-height: inherit;
cursor: pointer;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
.nav a:hover {
color: #FFF;
}
.nav_menu {
line-height: 45px;
font-weight: 700;
text-transform: uppercase;
}
.nav_menu-item {
display: inline-block;
position: relative;
width: 140px;
text-align: center;
}
.nav_menu-item:hover {
background-color: #1a2a47;
}
.nav_menu-item:hover .nav_submenu {
display: block;
}
.nav_submenu {
font-weight: 300;
text-transform: none;
display: none;
position: absolute;
width: 140px;
background-color: #1a2a47;
text-align: left;
}
.nav_submenu-item:hover {
background: #1a3f81;
}
.banner {
height: 460px;
width: 1400px;
}
.main {
width: 1400px;
height: auto;
overflow: hidden;
margin: 0 auto;
background: #FFF;
}
.bx01 {
width: 1276px;
height: 350px;
margin: 0 auto;
margin-top: 50px;
}
.bx01-left {
width: 507px;
height: 350px;
float: left;
margin-left: 15px;
}
.bx01-left h2 {
height: 40px;
line-height: 40px;
font-size: 26px;
margin-bottom: 10px;
font-weight: normal;
}
.bx01-left h1 {
height: 40px;
line-height: 40px;
font-size: 20px;
margin-bottom: 10px;
}
.bx01-left h1 a {
color: #163d78;
}
.bx01-left ul li {
height: 32px;
line-height: 32px;
font-size: 14px;
width: 490px;
border-bottom: #CCC 1px dashed;
}
.bx01-left ul li a {
color: #000;
}
.bx01-left ul li p {
float: left;
width: 370px;
padding-left: 15px;
float: left;
}
.bx01-left ul li p span {
width: 76px;
float: left;
}
.bx01-right {
width: 754px;
height: 350px;
float: left;
}
line-height: 30px;
font-size: 16px;
margin-bottom: 15px;
text-align: center;
}
.ner img {
display: block;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
}
.tushu{
width:1200px;
margin:0 auto;
height:auto;
overflow:hidden;
margin-bottom:30px;
}
.ydtit{
height: 50px;
line-height: 50px;
background: #efefef;
padding-left: 10px;
font-size: 16px;
margin-bottom: 20px;
}
.ydbox1{
height: 320px;
margin-bottom:20px
}
.ydbox1-left{
width: 260px;
float: left;
margin-left: 15px;
margin-right:30px;
}
.ydbox1-left img{
border: #efefef 1px solid;
}
.ydbox1-right{
width: 890px;
float: left;
padding-top: 10px;
}
.ydbox1-right h1{
height: 50px;
line-height: 50px;
font-size: 24px;
font-weight: normal;
}
.xinx{
height: 39px;
line-height: 39px;
font-size: 16px;
}
.ydbox2 {
height: auto;
overflow: hidden;
padding: 15px 20px;
}
.ydbox2 p{
text-indent:2em;
line-height:25px;
font-size:14px;
}
6. π₯ How to Stop Learning Blindly
First, study with a goal, whether reading books, newspapers or various offline activities.
First of all, you should make clear what your learning goal is, what problems you want to solve, and what goals you want to achieve.
Second, to establish a personal knowledge system in learning
Knowledge is incomplete, and books are vast. When we indulge in it, we should never be drowned by the sea and lose ourselves. In the process of learning, we will find that each knowledge point has its boundary and background. We should be good at summarizing and sorting out knowledge.
Third, you need what you have learned
Sometimes, we feel we have learned a lot of dry goods in the past day, so we must link these points of knowledge with actual work and life. Knowledge and practice are closely related. Learning is a good thing, but only those who can learn are valuable.
7. π More dry goods
1. If my blog is helpful to you and if you like my blog content, please " π Zan"" βοΈ Comments"" π Collection "One button, three links!"
2. π [ ππ»ππ»ππ» Focus on me| π¬ Get More Sources | Quality Articles] Take you to learn a variety of front-end plug-ins, 3D cool effects, picture display, text effects, and site-wide templates, graduate HTML templates, end-of-term job templates, and so on! "There are many front-end developers here who are exploring front-end Node knowledge and learning from each other."
3.
!
π [Access]
gitee Cloud Source Warehouse - Welcome to Star: https://gitee.com/zhanyuqiu2022/my-app