I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.
Lesson Objective for today
According to yesterday’s planning, based on the CSS variables learned yesterday to achieve the style effect of the first half of the basic shop page, come on, small and ！！！！
Identify common CSS styles
CSS variable
:root{
--default-font-color: rgb(51, 51, 51);
--default-active-bg-color: rgb(66, 107, 110);
--default-good-bg-color: rgb(242, 242, 242);
--default-good-font-color: rgb(254, 254, 254);
--default-title--font-weight: bolder;
}
body{
color: var(--default-font-color);
}
Copy the codeCSS Tool Styles
/* Common page layout is centered */
.contanier{
max-width: 70vw;
margin: 0 auto;
height: 100%;
padding: 2rem;
box-sizing: border-box;
}
/* The background image is not repeated by default */
.bg-img-n-r{
background-repeat: no-repeat;
}
Copy the codeImplements the header style effect
HTML Tag structure
<header>
<div class='contanier'>
<logo>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="59 59-1-1" width="93"
height="93">
<text x="15" y="25"> LO </text>
<text x="13" y="45"> GO </text>
<path fill="rgba(0%, 0%, 0%, 0)" fill-rule="evenodd" stroke="rgb(51, 51, 51)" stroke-width="2"
stroke-linecap="butt" stroke-linejoin="miter"
d="M28.499981999397278 C43.6877977848053 0.9999865293502808 0.9999865293502808 55.99995470046997 13.312144875526428 C55.99995470046997 55.99995470046997 28.49996030330658 43.68777573108673 43.6877977848053 55.99993407726288 C13.312166213989258 28.499981999397278 55.99993407726288 55.99993407726288 0.9999445676803589 43.68777573108673 C0.9999445676803589 0.9999445676803589 28.49996030330658 13.312144875526428 13.312166213989258 0.9999865293502808 28.499981999397278 0.9999865293502808 Z">
</path>
</svg>
</logo>
<p class="logo-text">
<span class="shop-logo-name font-bold">
gao.ding <br />
</span>
<span class="shop-name">
Draft wall decoration flagship store<br />
</span>
</p>
<star>
<p class="star-container">
<span class="star-box">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 29 28" width="29"
height="28">
<path fill="rgb(96%, 24%, 25%)" fill-rule="evenodd"
d="M14.494171261787415 C11.257989168167114 9.048644304275513 1.0841652154922485 2.0591559410095215 2.942473530769348 C1.965079426765442 1.9985769987106323 12.186394572257996 17.26329731941223 6.378842830657959 19.161031007766724 C12.16733992099762 9.317713141441345 21.190607130527496 23.15894103050232 14.195442914962769 25.851494669914246 C14.785400152206421 14.513253211975098 26.997765243053436 25.87469583749771 17.044403076171875 23.105949342250824 C22.566586136817932 19.682211875915527 21.135566651821136 18.981125056743622 27.03484559059143 17.208035349845886 C26.940435767173767 27.00134801864624 12.131243348121643 2.8643426299095154 17.581614136695862 1.401838481426239 14.494171261787415 9.048644304275513 Z">
</path>
</svg>
</span>
<span class="shop-name"><br/>Collection of shops</span>
</p>
</star>
</div>
</header>
Copy the codeCSS styles
header{
--header-height: 10em;
background-color: var(--default-good-bg-color);
height: var(--header-height);
overflow: hidden;
}
header>.contanier> * {
display: inline-block;
}
logo text{
font-size: 20px;
line-height: 50px;
width: 50px;
}
header .logo-text{
vertical-align: top;
margin-left: 0.5 em;
}
header .shop-logo-name{
font-size: 35.9 px.;
text-transform: uppercase;
line-height: 1.6;
}
header .shop-name{
font-size: 17.9 px.;
letter-spacing: 0.5 em;
font-weight: bold;
}
header star{
width: calc(100% - 330px);
}
header star .star-container{
text-align: right;
}
header star .star-box{
text-align: center;
display: inline-block;
padding: 0.4 em 0.5 em;
border: 2px solid var(--default-font-color);
border-radius: 100%;
margin-right: 2.5 em;
}
Copy the codeCore knowledge
<text>Adjust the label positionfont-sizetext-transformletter-spacingvertical-aligncalc
Implement the poster part of the style effect
HTML Tag structure
<banner>
<menu>
<ul class="contanier font-bold menu-box">
<li>Home page</li>
<li>All baby</li>
<li>Furnishing articles</li>
<li>shelf</li>
<li>potted</li>
<li>The wallpaper</li>
<li>Wrought iron wall act the role ofing</li>
</ul>
</menu>
<poster class="bg-img-n-r">
<div class="contanier bg-img-n-r font-bold">
<p class="date">
METOPE<br />
DECORATION<br />
VOL.2019<br />
</p>
<p class="slogan">
Wall act the role of hang a picture<br />
Just to meet<br />
</p>
<p class="price">
RMB:99
</p>
</div>
</poster>
</banner>
Copy the codeCSS styles
banner menu{
background-color: var(--default-active-bg-color);
color:#fff;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
banner .menu-box{
padding: 0.5 em 0;
}
menu li{
display: inline;
padding: 0 4em;
font-size: 15px;
}
banner poster{
height: 40em;
display: block;
background-image: url('.. /images/bg01.png');
background-size:100% 100%;
background-position: center;
}
banner poster .contanier{
background-image: url('.. /images/bg02.png'),url('.. /images/border.png'),url('.. /images/poster01.jpeg'),url('.. /images/border.png'),url('.. /images/poster02.jpeg'),url('.. /images/border.png'),url('.. /images/poster03.jpeg');
background-size:25em 80%.14.5 em 19em.13em 17em.14.5 em 19em.13em 17em.14.5 em 19em.13em 17em;
background-position: left 3em.35.4% 4.3 em.35% 5em.55.7% 4.3 em.55% 5em.76.4% 4.3 em.75% 5em;
}
banner .date.banner .slogan.banner .price{
margin-top: 1em;
font-size: 2.5 em;
letter-spacing: 0.1 em;
}
banner .date{
margin-top: 2.5 em;
}
Copy the codeCore knowledge
margin-block-startbackground-imagebackground-sizebackground-position
Implements a style effect for the goods section
HTML Tag structure
<section class="contanier section01 font-bold">
<ul>
<li class="discount active">
<span class="unit">rmb</span><br />
<span class="amount">10</span><br />
<span class="multiply">+</span><br />
<span class="description">Collection of shops<br />There is no threshold</span>
</li>
<li class="discount">
<span class="unit">rmb</span><br />
<span class="amount">20</span><br />
<span class="multiply">+</span><br />
<span class="description">Use full 299</span><br />
<span class="receive">led</span>
</li>
<li class="discount">
<span class="unit">rmb</span><br />
<span class="amount">30</span><br />
<span class="multiply">+</span><br />
<span class="description">Use full 399</span><br />
<span class="receive">led</span>
</li>
<li class="discount">
<span class="unit">rmb</span><br />
<span class="amount">50</span><br />
<span class="multiply">+</span><br />
<span class="description">Use full 599</span><br />
<span class="receive">led</span>
</li>
</ul>
</section>
Copy the codeCSS styles
.section01{
margin: 3em 21%;
}
.section01 .discount{
display: inline-block;
padding: 2em 0;
background-color: var(--default-good-bg-color);
margin: 2em 1em;
height: 13em;
width: 7.2 em;
box-sizing: border-box;
font-size: 27px;
text-align: center;
vertical-align: top;
text-transform: uppercase;
}
.section01 .discount.active{
background-color: var(--default-active-bg-color);
color:#fff;
}
.section01 .discount .amount{
font-size: 100px;
line-height: 1.2;
}
.section01 .discount .multiply{
transform: rotate(-45deg);
display: inline-block;
}
.section01 .discount .description{
margin-bottom: 0.2 em;
display: inline-block;
}
.section01 .discount .receive{
background-color:rgb(245, 61, 64);
border-radius: 100%;
padding: 0.2 em;
color: #fff;
margin-top: 0.2 em;
}
Copy the codeCore knowledge
displaybox-sizingvertical-alignfont-sizetext-transformtransform
Overall effect preview
Today’s summary
Today the mood
Today is mainly based on CSS variables, the basis of the e-commerce page to achieve the upper part of the layout, variables really give force ~~, feel today to write a picture positioning well worded trouble, there are a lot of repeated CSS code, I do not know whether I did not design ~~~~
This article is formatted using MDNICE