Tip: after the article is written, the directory can be generated automatically. Please refer to the help document on the right for how to generate it
preface
Tip: Here you can add the general contents to be recorded in this article:
Many tips have been used in completing the project of pinyougou. Now enter this project and feel it.
Tip: the following is the main content of this article. The following cases can be used for reference
1, Project introduction
Pinyougou online mall is a comprehensive B2B2C platform, similar to Jingdong Mall and tmall mall. The website adopts the mode of merchant settlement. The merchant settlement platform submits an application and has a platform for qualification review. After passing the review, the merchant has an independent management background to enter commodity information. Products can be released after being approved by the platform.
A web page mainly displays the contents of the head, navigation bar, main body, and bottom. Therefore, if a web page wants to be clear and beautiful, a good layout is very important. In this project, a large number of unordered lists will be used to make the layout more organized.
2, Main effect
1. Navigation bar
The navigation bar is mainly divided into horizontal navigation and vertical navigation, but they are basically completed by an unordered list. This effect is also widely used in this project.
Effect display:
Various forms of navigation are included in this effect.
<nav>
<div class="w">
<ul>
<li>All commodity categories
<ul>
<li><a href="#"> household appliances</a></li>
<li><a href="#"> mobile phone, digital, communication</a></li>
<li><a href="#"> computer, office</a></li>
<li><a href="#"> household, furniture, home decoration, Kitchenware</a></li>
<li><a href="#"> men's, women's, children's, underwear</a></li>
<li><a href="#"> household makeup, cleaning supplies, pets</a></li>
<li><a href="#"> shoes, boots, luggage, jewelry, luxury goods</a></li>
<li><a href="#"> outdoor sports, clocks and watches</a></li>
<li><a href="#"> automobiles, automotive supplies</a></li>
<li><a href="#"> mother and baby, toys and musical instruments</a></li>
<li><a href="#"> food, wine, fresh, specialty</a></li>
<li><a href="#"> healthcare</a></li>
<li><a href="#"> books, audio-visual, e-books</a></li>
<li><a href="#"> lottery, travel, recharge, ticketing</a></li>
<li><a href="#"> financial management, crowdfunding, IOUs, insurance</a></li>
</ul>
</li>
<li><a href="#"> clothing City</a></li>
<li><a href="#"> beauty salon</a></li>
<li><a href="#"> Chuanzhi supermarket</a></li>
<li><a href="#"> global purchase</a></li>
<li><a href="#"> flash purchase</a></li>
<li><a href="#"> group buying</a></li>
<li><a href="#"> auction < / a ></li>
<li><a href="#"> interesting < / a ></li>
</ul>
</div>
</nav>
/* CSS for navigation bar section */
nav {
height: 46px;
line-height: 46px;
border-bottom: 2px solid #c81623;
}
/* Using double pseudo elements to clear floating */
nav .w ul::after,
nav .w ul::before {
display: block;
content: '';
}
nav .w ul::after {
clear: both;
}
nav .w ul li {
position: relative;
top: -2px;
float: left;
text-align: center;
padding: 0 27px;
}
nav .w ul li a {
color: #666666;
}
nav .w ul li:first-child {
padding: 0 57px;
color: #fff;
font-weight: 500;
background-color: #b1191a;
}
nav .w .goodslist_nav li:nth-child(-n+3) {
padding: 0 30px;
}
nav .w .goodslist_nav li:nth-child(-n+3) a {
font-size: 14px;
font-weight: 700;
color: black;
}
nav .w .goodslist_nav li:first-child {
background-color: #fff;
border-bottom: 2px solid #c81623;
}
nav .w .goodslist_nav li:nth-child(n+4) a {
font-size: 12px;
}
nav .w .goodslist_nav li:last-child {
position: relative;
}
nav .w .goodslist_nav li:last-child::after {
position: absolute;
top: 1px;
right: 9px;
font-family: 'icomoon';
content: '\e907';
color: #666666;
}
nav .w ul li:first-child ul li:hover {
border-left: 2px solid #c81623;
background-color: #fff;
}
nav .w ul>li:nth-of-type(n+2):hover a {
color: #c81623;
}
nav .w ul li:last-child {
font-size: 14px;
}
nav .w ul li ul {
position: absolute;
top: 48px;
left: 0;
width: 100%;
background-color: #c81623;
}
/* Because weight */
nav .w ul li ul li:first-child {
background-color: #c81623;
padding: 0 25px;
}
nav .w ul li ul li:first-child:hover a {
color: #c81623;
}
nav .w ul li ul li {
position: relative;
width: 100%;
height: 31px;
text-align: left;
line-height: 31px;
}
/* Add Icon */
nav .w ul li ul li:nth-of-type(n)::after {
position: absolute;
right: 10px;
top: 0;
font-family: 'icomoon';
font-size: 20px;
content: '\e909';
}
nav .w ul li ul li a {
font-size: 12px;
color: #fff;
}
2. Sprite chart and Font Icon
Similarly, in the above case, we can see that the unordered list is just for layout, and other elements are needed to modify the style. We can add a small icon in the navigation bar to make the text more aesthetic.
2.1 steps for using font icons
- Go to the relevant web page to find the corresponding font icon for download. For example https://icomoon.io
- Put the fonts file in the downloaded file into the project root directory
- Declare in CSS
- Set the text style as the font icon, and select the representation of the icon for display.
Note: the Font Icon needs to be displayed by modifying the cascading line
nav .w ul li ul li:nth-of-type(n)::after {
position: absolute;
right: 10px;
top: 0;
font-family: 'icomoon';
font-size: 20px;
content: '\e909';
}
2.2 use steps of Sprite diagram
- Add background picture
- Use background position to move the position
position: absolute;
top: 10px;
left: 18px;
content: '';
width: 23px;
height: 24px;
background: url(../images/icons.png) no-repeat -17px -16px;
effect:
summary
Tip: here is a summary of the article:
The above is the summary of pinyougou project today.