I 👨🎓 Website Title:
💄 Beauty introduction 👜 Beauty sharing 👒 Design and production of brand cosmetics official website and other websites.
II ✍️ Website description
🏷️ The web page contains: Div+CSS, mouse over effects, Table, navigation bar effects, banner, form, secondary and tertiary pages, etc., video and audio elements. At the same time, the logo (source file) is designed to cover all the knowledge points required for basic final homework.
🏅 A set of high-quality 💯 The web design should include (the details 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 block, and the footer.
- All the pages are hyperlinked to each other, and can go to the third level page, which consists of 5-10 pages.
- The page style and style are unified, the layout is normal, and it is not messy. 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 rotation.
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology.
- The page is refreshing, beautiful, generous and different.
- It should not only be able to present the content required by users, but also meet the requirements of good layout, beautiful interface, elegant color matching and diverse forms of expression.
III 📚 Website introduction
📔 In terms of website layout, it is planned to adopt the current mainstream floating page layout structure that is compatible with all mainstream browsers and has stable display effect.
📓 Website program: it is planned to use the latest web programming language HTML5+CSS3+JS to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market at present, so that you can see the website immediately after opening it.
📘 In terms of website materials: it is planned to collect good-looking picture materials from all major platforms, carefully select pictures suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.
📒 In terms of website files, the types of website system files include: html page structure files, css page style files, js page special effects files, images page image files;
📙 Web page editing: the code of web page works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + +) can be used to run, modify and edit.
Wherein:
(1) 📜 The HTML file includes: index.html is the first page, and other html is the secondary page;
(2) 📑 css files include: css all page styles, text scrolling, picture enlargement, etc;
(3) 📄 js files include: js implementation of dynamic rotation effects, form submission, click events, etc. (js code is used in individual web pages).
IV 🌐 Website presentation
V ⚙️ Website 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>Cosmetics home page</title>
<link href="css/index.css" type="text/css" rel="stylesheet" />
<link href="css/base.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="banner">
<!--head-->
<div class="top">
<div class="logo"></div>
<span></span>
<div class="txt01">
<p>Focus on skin care industry<b>10 year</b></p>
<p>We only produce the highest quality skin care products</p>
</div>
<div class="tel">
<p>National Service Hotline</p>
<b>400-888-2837</b>
</div>
</div>
<div class="nav">
<div class="nav_bg">
<ul>
<li class="ff"><a href="index.html">home page</a></li>
<li><span></span><a href="news.html">Company news</a></li>
<li><span></span><a href="product.html">Product Center</a></li>
<li><span></span><a href="companyIdea.html">Company philosophy</a></li>
<li><span></span><a href="contactUs.html">contact us</a></li>
</ul>
<div class="search">
<div class="s01">Product search</div>
<input type="text" value="Please enter a keyword" class="s02" /><span></span>
</div>
</div>
</div>
</div>
<div class="customer">
<div class="news">
<span><a href="javascript:">Company news</a></span>
<span class="cur"><a href="javascript:">Company philosophy</a></span>
<ul>
<li><a href="newsxq.html">2008 In, international brand-new cosmetics products were launched in China</a></li>
<li><a href="newsxq.html">2011 In April, the 1000th cosmetics store in China was officially opened</a></li>
<li><a href="newsxq.html">2013 In, new cosmetics taijidan appeared in Shanghai Jiahua</a></li>
<li><a href="newsxq.html">2014 In June, cosmetics invaded Paris with Chinese culture</a></li>
</ul>
<ul>
<p><a href="companyIdea.html">2014 On December 20, 2006, the first experiential specialty store of cosmetics, an expert in modern Chinese herbal personal care, was newly opened in Chia Tai square in Shanghai. A series of unique value-added services and intimate experience environment in the store perfectly interpret the new experience of Yangmei from space creation to functional layout.</a></p>
</ul>
</div>
<div class="product">
<ul>
<li>
<a href="newsxq.html"><img src="picture/004.png"></a>
<big></big><p><a href="productxq.html">Modern Chinese herbal medicine middle and high grade personal care products 01</a></p>
</li>
<li>
<a href="newsxq.html"><img src="picture/005.png"></a>
<big></big><p><a href="productxq.html">Modern Chinese herbal medicine middle and high grade personal care products 02</a></p>
</li>
<li>
<a href="newsxq.html"><img src="picture/008.png"></a>
<big></big><p><a href="productxq.html">Modern Chinese herbal medicine middle and high grade personal care products 03</a></p>
</li>
</ul>
<a href="javascript:"><i><span class="curr"><b></b></span><span><b></b></span><span><b></b></span></i></a>
</div>
<div class="consult">
<span>HOTLINE</span><p>National toll free line</p><big>400-821-6188</big>
<div class="web">
<div class="qq">
<a href="#"><img src="picture/01.png"></a>
<a href="#"><img src="picture/02.png"></a>
<a href="#"><img src="picture/03.png"></a>
<a href="#"><img src="picture/04.png"></a>
<a href="#"><img src="picture/05.png"></a>
<p><a href="#">after-sale service</a><a href="#"> after sales service</a></p>
<span><a href="#">Online consultation</a><a href="#"> online consultation</a></span>
</div>
<a href="#" class="two"><img src="picture/07.png"></a>
</div>
<b><img src="picture/mm.png"></b>
</div>
</div>
<div class="main01">
<h2>
<span></span>
<div class="right">
<b class="curr01"></b><b></b><b></b>
<a href="javascript:"><p><i></i></p><p><big></big></p></a>
</div>
</h2>
<div class="goods">
<ul>
<li><a href="#"> < img SRC =" picture / index01. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index02. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index03. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index01. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index02. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index03. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index01. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index02. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index03. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index01. PNG "/ > < p > Tai Chi Series</p></a></li>
</ul>
<ul>
<li><a href="#"> < img SRC =" picture / index04. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index05. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index06. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index04. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index05. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index06. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index04. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index05. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index06. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index04. PNG "/ > < p > Tai Chi Series</p></a></li>
</ul>
<ul>
<li><a href="#"> < img SRC =" picture / index07. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index05. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index03. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index07. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index05. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index03. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index07. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index05. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index03. PNG "/ > < p > Tai Chi Series</p></a></li>
<li><a href="#"> < img SRC =" picture / index01. PNG "/ > < p > Tai Chi Series</p></a></li>
</ul>
</div>
</div>
<div class="main02">
<h2>
<span></span>
<!--<div class="right">
<b></b><b></b><b class="curr01"></b>
<p class="curr02"></p><p></p>
</div>-->
</h2>
<div class="company01"><span>Chinese wisdom, global fashion</span><p>Shanghai Cosmetics Co., Ltd. is Shanghai Jiahua United Co., Ltd
, with nearly 30 million fixed registered assets. In August 1998,
Cosmetics, as a brand-new concept of modern Chinese herbal medicine and high-end personal care products, has been
Launched in the market, and with its unique positioning, it will soon be in the domestic cosmetics market
Rise to establish a natural, fresh and healthy brand in the hearts of consumers
Elephant.</p><a href="#"> learn more > > < / a > < / div >
<div class="company02">
<img src="picture/002.png">
<p>Company building</p><span>The company is located in:1f, Zhengda Plaza, 168 Lujiazui West Road, Pudong New Area, Shanghai</span>
</div>
<div class="company03">
<img src="picture/003.png">
<p>The first overseas store was established</p><span>Cosmetics home's flagship overseas store is located at No. 38, Avenue opera, Paris, France
Grand unveiling. The space design of the flagship store reveals a strong oriental flavor,</span>
</div>
</div>
<div class="bottom">
<div class="bb">
<ul>
<li><a href="index.html">home page</a></li>
<li><span></span><a href="news.html">Company news</a></li>
<li><span></span><a href="product.html">Product Center</a></li>
<li><span></span><a href="companyIdea.html">Company philosophy</a></li>
<li><span></span><a href="contactUs.html">contact us</a></li>
</ul>
</div>
<p>© Shanghai Cosmetics Co., Ltd. All Rights Reserved ICP Prepare 11049051 more templates:<a href="http://www.cssmoban. com/" target="_ Blank "> template house < / a ></p>
</div>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
Collect from <a href="http://www.cssmoban. COM / "title =" website template "> template home</a>
<a href="https://www.chazidian. COM / "title =" look up the dictionary "> look up the dictionary</a>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script src="js/index.js"></script>
</html>
💒 CSS style code
@charset "utf-8";
/* CSS Document */
@font-face{
font-family: 'itceras_bold-webfont';
src: url('../fonts/itceras_bold-webfont.eot');
src: url('../fonts/itceras_bold-webfont.eot') format('embedded-opentype'),
url('../fonts/itceras_bold-webfont.woff2') format('woff2'),
url('../fonts/itceras_bold-webfont.woff') format('woff'),
url('../fonts/itceras_bold-webfont.ttf') format('truetype'),
url('../fonts/itceras_bold-webfont.svg#erasitclight') format('svg');
font-style: normal;
font-weight: bold;
}
*{ margin:0; padding:0;}
img{ border:none;}
li{ list-style:none;}
a{ text-decoration:none; color:#3b3838;}
body{ font-size:14px; font-family:"Microsoft YaHei "; background:#f0f0f0; color:#3d3c3c;}
.banner{ width:100%; height:690px; margin:0 auto; background:url(../images/banner.jpg) no-repeat center 0; overflow:hidden;}
.top{ width:1200px; height:102px; margin:0 auto; line-height:128px; margin-top:26px;}
.top .logo{ width:210px; height:76px; background:url(../images/logo.jpg); float:left;}
.top span{ width:2px; height:76px; background:url(../images/line01.jpg); margin-left:16px; float:left;}
.top .txt01{ margin-left:16px; padding-top:10px; float:left;}
.top .txt01 p{ height:26px; line-height:26px; font-style:italic; font-weight:bold; color:#077c2b; }
.top .txt01 p b{ color:#f90e0e;}
.top .tel{ margin-left:16px; padding-top:16px; float:right;}
.top .tel p{ height:24px; line-height:24px; font-style:italic; font-weight:bold; color:#151515;}
.top .tel b{ height:24px; line-height:24px; font-style:italic; font-family: 'itceras_bold-webfont'; font-size:30px; color:#028d42;}
.nav{ width:100%; height:41px; background:#077c2b; margin:0 auto; border:solid 2px #036020;}
.nav .nav_bg{ width:1160px; height:100%; margin:0 auto; position:relative;}
.nav ul li a{ line-height:41px; text-align:center; font-size:18px; padding:0 50px; color:#FFFFFF; float:left;}
.nav ul li span{ height:16px; color:#FFFFFF; border-left:solid 1px #FFFFFF; margin-top:12px; float:left;}
.nav .ff a{ background:#78a70b; color:#495644; position:relative; left:1px;}
.nav .ff span{ border-left:solid 1px #077c2b;}
.nav .search{ margin-top:8px; float:right;}
.nav .search .s01{ width:78px; height:25px; line-height:25px; text-align:center; background:#58594d; color:#FFFFFF; float:left; position:relative; z-index:1;}
.nav .search .s02{ width:130px; height:23px; line-height:23px; background:#FFFFFF; color:#282b29; border:solid 1px #707070; padding-left:30px; margin-right:30px; margin-left:5px;}
.nav .search span{ width:23px; height:23px; background:url(../images/tit.png) no-repeat; float:left; z-index:5; position:absolute; top:12px; right:165px;}
.bottom{ width:100%; height:100px; background:#077c2b;}
.bottom .bb{ width:820px; height:40px; margin:0 auto; padding-top:20px;}
.bottom ul li{ width:164px; line-height:40px; float:left;}
.bottom ul li span{ height:16px; color:#FFFFFF; border-left:solid 1px #FFFFFF; margin-top:12px; float:left;}
.bottom ul li a{ font-size:16px; color:#FFFFFF; padding-left:56px;}
.bottom .ff a{ border:none;}
.bottom p{ width:820px; height:26px; line-height:26px; text-align:center; margin:0 auto; color:#FFFFFF; Font family: "Arial"; padding-top:12px;}
Vi 🥇 How to make learning no longer blind
First, learn with goals, whether reading books, reporting lessons or various offline activities.
First of all, we should make clear what our learning goals are, what problems we want to solve, and what goals we want to achieve.
Second, learning should establish a personal knowledge system
Knowledge is endless, and books are endless. When we roam among them to our heart's content, we must not be drowned by the sea and have no self. In the process of learning, we will find that every knowledge point has its boundary and background. We should be good at summarizing and sorting out knowledge
Third, we need to use what we have learned
Sometimes, we feel that we have learned a lot of dry goods at the end of the day, so we must link these knowledge points with our actual work and life. Knowledge and practice are closely linked. It is a good thing to love learning, but only those who can learn are valuable.
VII 🎁 More dry goods
1. If my blog is helpful to you and you like my blog content, please“ 👍 Like“ ✍️ Comments "“ 💙 Collect "three times with one button!
two 💗 [ 👇🏻👇🏻👇🏻 Follow me| 💬 Get more source code | quality articles] take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, as well as the whole station template, college students' Graduation HTML template, final homework template, and so on! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other!"!
3.
!
💂 [acquisition method]
gitee code cloud source code warehouse - Welcome Star: https://gitee.com/zhanyuqiu2022/my-app