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 the planning of yesterday, based on the design ideas of the upper part of the basic store page yesterday, to achieve the page effect in the middle of the page, come on, small and ！！！！


Identify common CSS styles

CSS Tool Styles

/* Background image related styles */

.bg-img-n-r{

  background-repeat: no-repeat;

}

.bg-img-c-s{

  background-size: 100% calc(100% - 5em);

}



/* Rounded corners related help styles */

.box-border-r-f{

  border-radius: 100%;

}



/* Font related help styles */

.text-center{

  text-align: center;

}

.font-bolder{

  font-weight: bolder;

}

.font-bold{

  font-weight: bold;

}

Copy the code

Implement the commodity part two style effect


HTML Tag structure

      <section class="contanier section02 font-bold">

        <p class="section-title text-center">

Store clearance announcement

        </p>

        <p class="section-subtitle text-center">

          A CLEARANCE

        </p>

        <div class="description">

          <aside class="aside-title">

2 a discount<br />

20 percent off for more than 3 pieces<br />

          </aside>

          <aside class="aside-description">

For all the fans of the wall design,<br />

Thank you for your continued support,<br />

Adjusted by category,<br />

The draft wall decoration will be finished after the clearance of all spring and summer styles,<br />

A brand new style will follow.

          </aside>

        </div>

      </section>

Copy the code

CSS styles

.section02{

  margin: 3em 22%;

  background-color: var(--default-good-bg-color);

  line-height: 2;

  letter-spacing: 0.3 em;

}

.section02 .section-title{

  font-size: 30px;

}

.section02 .section-subtitle{

  letter-spacing: 0;

}

.section02 .description{

  background-color: var(--default-active-bg-color);

  padding: 2em;

  margin: 1em;

  color:#fff;

  vertical-align: top;

  margin-top: 0.5 em;

}

.section02 .description aside{

  display: inline-block;

  width: 43%;

}



.section02 .aside-title{

  font-size: 64.5 px.;

  margin-left: 1em;

}

.section02 .aside-description{

  font-size: 20px;

  margin-left: 2.4 em;

}

Copy the code

Core knowledge

  • vertical-align
  • background-color
  • letter-spacing
  • font-size
  • line-height

Implement three style effects in the commodity section



HTML Tag structure

       <section class="contanier section03 font-bold">

        <p class="section-title text-center">

ACTIVITY | More Activities

        </p>

        <p class="section-subtitle text-center">+ Flash sale, first come, first served</p>

        <div class="gallery">

          <aside class="gallery-aside bg-img-n-r gallery-activity bg-img-c-s">

            <div class="gallery-mask-box">

              <logo class="text-center box-border-r-f">logo</logo> <span class="aside-time">Limited order at 20:00 every day</span><br />

              <div class="gallery-bottom">

                <p class="gallery-bottom-text gallery-bottom-left">

                  <span class="status-text">Live in the</span><span class="status-number">209485 watch</span>

                </p>

                <p class="gallery-bottom-text gallery-bottom-right">

                  <star class="star-container">

                      <span class="star-box box-border-r-f">

                        <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 29 28" width="29"

                        height="28">

                        <path fill="rgb(255, 255, 255)" 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>

                  </star>

                  <br />

                  <span class="star-number">1256</span>

                </p>

              </div>

            </div>

            <p class="gallery-text text-center">① Taobao live broadcast/grab free order</p>

          </aside>

          <div class="gallery-right">

            <aside class="gallery-aside bg-img-n-r bg-img-c-s">

              <p class="gallery-text text-center">② Full 1299 send flower arrangement pieces</p>

            </aside>

            <aside class="gallery-aside bg-img-n-r bg-img-c-s">

              <p class="gallery-text text-center">③ The top 100 people place orders and send wall clocks every day</p>

            </aside>

          </div>

        </div>

      </section>   

Copy the code

CSS styles

.section03{

  margin: 0 22%;

  line-height: 2;

  letter-spacing: 0.3 em;

  padding: 0;

}

.section03 .section-title{

  font-size: 30px;

}

.section03 .section-subtitle{

  font-size: 20px;

}



.section03 .gallery{

  margin-top: 2em;

}

.section03 .gallery> * {

  display: inline-block;

  width: 48%;

  vertical-align: top;

}

.section03 .gallery .gallery-right{

  margin-left: 2%;

}

.section03 .gallery .gallery-aside{

  background-color: var(--default-active-bg-color);

  color: #fff;

}

.section03 .gallery-aside .gallery-text{

  font-size: 30px;

  line-height: 19;

}

.section03 .gallery .gallery-activity{

  height: 50em;

  background-image: url('.. /images/flower.jpg');

  --gallery-font-size: 20px;

}



.section03 .gallery-activity .gallery-mask-box{

  background-color: rgba(167, 167, 167, 0.507);

  height: calc100% 3.5 (em);

}

.section03 .gallery-activity .gallery-mask-box{

  font-size: var(--gallery-font-size);

}

.section03 .gallery-activity logo{

  display: inline-block;

  background-color: var(--default-active-bg-color);

  height: 4em;

  width: 4em;

  line-height: 4em;

  text-align: center;

  text-transform: uppercase;

  margin-left: 1em;

  margin-top: 2em;

  letter-spacing: 0;

}

.section03 .gallery-activity .gallery-text{

  line-height: 2.5;

}

.section03 .gallery-activity .gallery-bottom{

  margin-top: 20em;

  text-align: center;

  line-height: 2;

}

.section03 .gallery-bottom .gallery-bottom-text{

  display: inline-block;

  text-align: justify;

}

.section03 .gallery-bottom .gallery-bottom-left{

  width: 70%;

  margin-left: 5%;

}

.section03 .gallery-bottom .gallery-bottom-right{

  width: 20%;

  vertical-align: middle;

}

.section03 .gallery-bottom .status-text.

.section03 .gallery-bottom .status-number.

.section03 .gallery-bottom .star-box{

  display: inline-block;

}

.section03 .gallery-bottom .status-text.

.section03 .gallery-bottom .star-box{

  background-color:var(--default-like-color);

}

.section03 .gallery-bottom .status-text.

.section03 .gallery-bottom .status-number{

  text-indent: 1em;

}



.section03 .gallery-bottom .status-number{

  background-color: rgb(136, 136, 136);

  letter-spacing: 0;

  padding-right: 0.5 em;

}



.section03 .gallery-bottom .star-box{

  text-align: center;

  padding: 0.1 em 0.2 em;

  margin-left: 0.25 em;

  line-height: 1.2;

}

.section03 .gallery-bottom .star-number{

  letter-spacing: 0;

}



.section03 .gallery-right .gallery-aside{

  height: 23em;

  vertical-align: bottom;

}

.section03 .gallery-right .gallery-aside:first-child{

  margin-bottom: 4em;

  background-image: url('.. /images/good01.jpeg');

}

.section03 .gallery-right .gallery-aside:last-child{

  background-image: url('.. /images/good02.jpeg');

}

Copy the code

Core knowledge

  • CSS variable scope
  • border-radius
  • background-size: 100% calc(100% - 5em)
  • Height: calc 100% 5.05 (em)
  • background-color & background-image
  • text-transform
  • letter-spacing
  • line-height
  • height
  • display
  • vertical-align

Take the style name good difficult ~~~~~~, name to the word poor ~~~

Implement the goods section four style effects


HTML Tag structure

      <section class="section04">

        <poster class="bg-img-n-r">

          <div class="contanier bg-img-n-r font-bold">

            <br/><br/>

            <p class="slogan">

              SELL LIKE</p>

            <p class="slogan"> HOT</p>

            <p class="slogan">CAKES<br/><br/></p>

            <p class="slogan">Recommend sell like hot cakes</p>

            <p class="price">

              RMB:99

            </p>

          </div>

        </poster>

      </section>

Copy the code

CSS styles

.section04 poster{

  height: 45em;

  display: block;

  background-image: url('.. /images/bg04.jpeg');

  background-size:100% 100%;

  background-position: center;

}

.section04 poster .contanier{

  margin: 3em 22%;

  background-image: url('.. /images/poster04.png'),url('.. /images/poster05.png');

  background-size: 25em 20%.50% 80%;

  background-position: 1% 60%.85% center;

}

.section04 .slogan..section04 .price{

  font-size: 2.5 em;

  letter-spacing: 0.1 em;

}

.section04 .price{

  margin-top: 7em;

}

Copy the code

Core knowledge

  • background-image
  • background-position

Overall effect preview



Today’s summary


Today the mood

Today is mainly based on CSS variables, the basic implementation of e-commerce page central layout, a lot of new tool styles, but also understand and practice the CSS scope ~~~~~~

Today’s biggest feeling is to take the style name good trouble, especially in the realization of the commodity part of the four style, feel named to the word poor ~~~~~


This article is formatted using MDNICE