转行学前端的第 20 天 : 基础店铺页面样式实现(2)

1,858 阅读10分钟

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

今日学习目标

按照昨天的规划,基于昨天实现基础店铺页面上半部分样式设计思路,实现页面中部的页面效果,加油,小又又!!!!


确认通用的 CSS 样式

CSS 工具样式

/*    背景图片相关样式   */
.bg-img-n-r{
  background-repeat: no-repeat;
}
.bg-img-c-s{
  background-size100% calc(100% - 5em);
}

/*    圆角相关帮助样式   */
.box-border-r-f{
  border-radius100%;
}

/*    字体相关帮助样式   */
.text-center{
  text-align: center;
}
.font-bolder{
  font-weight: bolder;
}
.font-bold{
  font-weight: bold;
}

实现商品部分二样式效果

HTML标签结构

      <section class="contanier section02 font-bold">
        <p class="section-title text-center">
          店铺清仓公告
        </p>
        <p class="section-subtitle text-center">
          A CLEARANCE
        </p>
        <div class="description">
          <aside class="aside-title">
            2件9折<br />
            3件以上8折<br />
          </aside>
          <aside class="aside-description">
            各位稿定墙饰的粉丝们,<br />
            感谢您一直以来对我们的支持,<br />
            因类目的调整,<br />
            稿定墙饰将在清仓完所有春夏款式,<br />
            后续将推出全新风格。
          </aside>
        </div>
      </section>

CSS样式

.section02{
  margin3em 22%;
  background-colorvar(--default-good-bg-color);
  line-height2;
  letter-spacing0.3em;
}
.section02 .section-title{
  font-size30px;
}
.section02 .section-subtitle{
  letter-spacing0;
}
.section02 .description{
  background-colorvar(--default-active-bg-color);
  padding2em;
  margin1em;
  color:#fff;
  vertical-align: top;
  margin-top0.5em;
}
.section02 .description aside{
  display: inline-block;
  width43%;
}

.section02 .aside-title{
  font-size64.5px;
  margin-left1em;
}
.section02 .aside-description{
  font-size20px;
  margin-left2.4em;
}

核心知识点

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

实现商品部分三样式效果

HTML标签结构

       <section class="contanier section03 font-bold">
        <p class="section-title text-center">
          ACTIVITY丨更多活动
        </p>
        <p class="section-subtitle text-center">+限时抢购,先到先得</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">每天20:00限量抢单</span><br />
              <div class="gallery-bottom">
                <p class="gallery-bottom-text gallery-bottom-left">
                  <span class="status-text">直播中</span><span class="status-number">209485观看</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 9.048644304275513C11.257989168167114 1.0841652154922485 2.0591559410095215 2.942473530769348 1.9985769987106323 12.186394572257996C1.965079426765442 17.26329731941223 6.378842830657959 19.161031007766724 9.317713141441345 21.190607130527496C12.16733992099762 23.15894103050232 14.195442914962769 25.851494669914246 14.513253211975098 26.997765243053436C14.785400152206421 25.87469583749771 17.044403076171875 23.105949342250824 19.682211875915527 21.135566651821136C22.566586136817932 18.981125056743622 27.03484559059143 17.208035349845886 27.00134801864624 12.131243348121643C26.940435767173767 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">①淘宝直播/抢免单</p>
          </aside>
          <div class="gallery-right">
            <aside class="gallery-aside bg-img-n-r bg-img-c-s">
              <p class="gallery-text text-center">②满1299送插花摆件</p>
            </aside>
            <aside class="gallery-aside bg-img-n-r bg-img-c-s">
              <p class="gallery-text text-center">③每天前100名下单送挂钟</p>
            </aside>
          </div>
        </div>
      </section>   

CSS样式

.section03{
  margin0 22%;
  line-height2;
  letter-spacing0.3em;
  padding0;
}
.section03 .section-title{
  font-size30px;
}
.section03 .section-subtitle{
  font-size20px;
}

.section03 .gallery{
  margin-top2em;
}
.section03 .gallery>*{
  display: inline-block;
  width48%;
  vertical-align: top;
}
.section03 .gallery .gallery-right{
  margin-left2%;
}
.section03 .gallery .gallery-aside{
  background-colorvar(--default-active-bg-color);
  color#fff;
}
.section03 .gallery-aside .gallery-text{
  font-size30px;
  line-height19;
}
.section03 .gallery .gallery-activity{
  height50em;
  background-imageurl('../images/flower.jpg');
  --gallery-font-size20px;
}

.section03 .gallery-activity .gallery-mask-box{
  background-colorrgba(167, 167, 167, 0.507);
  heightcalc(100% - 3.5em);
}
.section03 .gallery-activity .gallery-mask-box{
  font-sizevar(--gallery-font-size);
}
.section03 .gallery-activity logo{
  display: inline-block;
  background-colorvar(--default-active-bg-color);
  height4em;
  width4em;
  line-height4em;
  text-align: center;
  text-transform: uppercase;
  margin-left1em;
  margin-top2em;
  letter-spacing0;
}
.section03 .gallery-activity .gallery-text{
  line-height2.5;
}
.section03 .gallery-activity .gallery-bottom{
  margin-top20em;
  text-align: center;
  line-height2;
}
.section03 .gallery-bottom .gallery-bottom-text{
  display: inline-block;
  text-align: justify;
}
.section03 .gallery-bottom .gallery-bottom-left{
  width70%;
  margin-left5%;
}
.section03 .gallery-bottom .gallery-bottom-right{
  width20%;
  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-indent1em;
}

.section03 .gallery-bottom .status-number{
  background-colorrgb(136, 136, 136);
  letter-spacing0;
  padding-right0.5em;
}

.section03 .gallery-bottom .star-box{
  text-align: center;
  padding0.1em 0.2em;
  margin-left0.25em;
  line-height1.2;
}
.section03 .gallery-bottom .star-number{
  letter-spacing0;
}

.section03 .gallery-right .gallery-aside{
  height23em;
  vertical-align: bottom;
}
.section03 .gallery-right .gallery-aside:first-child{
  margin-bottom4em;
  background-imageurl('../images/good01.jpeg');
}
.section03 .gallery-right .gallery-aside:last-child{
  background-imageurl('../images/good02.jpeg');
}

核心知识点

  • CSS 变量作用域
  • border-radius
  • background-size: 100% calc(100% - 5em)
  • height: calc(100% - 5.05em)
  • background-color & background-image
  • text-transform
  • letter-spacing
  • line-height
  • height
  • display
  • vertical-align

取样式名好难啊~~~~~~,取名取到词穷~~~


实现商品部分四样式效果

HTML标签结构

      <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">热销推荐</p>
            <p class="price">
              RMB:99
            </p>
          </div>
        </poster>
      </section>

CSS样式

.section04 poster{
  height45em;
  display: block;
  background-imageurl('../images/bg04.jpeg');
  background-size:100% 100%;
  background-position: center;
}
.section04 poster .contanier{
  margin3em 22%;
  background-imageurl('../images/poster04.png'),url('../images/poster05.png');
  background-size25em 20%,50% 80%;
  background-position1% 60%85% center;
}
.section04 .slogan,.section04 .price{
  font-size2.5em;
  letter-spacing0.1em;
}
.section04 .price{
  margin-top7em;
}

核心知识点

  • background-image
  • background-position

整体效果预览


今日总结


今日心情

今天主要来说就是基于CSS 变量,基础实现了电商页面中部布局,新增了很多工具样式,也领悟和实践了一下CSS 作用域~~~~~~

今天最大的感受就是取样式名好麻烦,特别在实现商品部分四样式的时候,感觉取名取到词穷~~~~~

本文使用 mdnice 排版