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

3,290 阅读10分钟

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

今日学习目标

按照昨天的规划,基于昨天学习的CSS变量实现基础店铺页面上半部分样式效果了,加油,小又又!!!!


确认通用的 CSS 样式

CSS 变量

:root{
  --default-font-colorrgb(51, 51, 51);
  --default-active-bg-colorrgb(66, 107, 110);
  --default-good-bg-colorrgb(242, 242, 242);
  --default-good-font-colorrgb(254, 254, 254);
  --default-title--font-weight: bolder;
}
body{
  colorvar(--default-font-color);
}

CSS 工具样式

/*    通用的页面布局居中   */
.contanier{
  max-width70vw;
  margin0 auto;
  height100%;
  padding2rem;
  box-sizing: border-box;
}

/*    背景图片默认不重复   */
.bg-img-n-r{
  background-repeat: no-repeat;
}

实现头部分样式效果

HTML标签结构

    <header>
      <div class='contanier'>
        <logo>
          <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-1 -1 59 59" 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 0.9999865293502808C43.6877977848053 0.9999865293502808 55.99995470046997 13.312144875526428 55.99995470046997 28.49996030330658C55.99995470046997 43.68777573108673 43.6877977848053 55.99993407726288 28.499981999397278 55.99993407726288C13.312166213989258 55.99993407726288 0.9999445676803589 43.68777573108673 0.9999445676803589 28.49996030330658C0.9999445676803589 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">
            稿定墙饰旗舰店 <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 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>
            <span class="shop-name"><br/>收藏店铺</span>
          </p>

        </star>
      </div>

    </header>

CSS样式

header{
  --header-height10em;
  background-colorvar(--default-good-bg-color);
  heightvar(--header-height);
  overflow: hidden;
}

header>.contanier>*{
  display: inline-block;
}

logo text{
  font-size20px;
  line-height50px;
  width50px;
}

header .logo-text{
  vertical-align: top;
  margin-left0.5em;
}

header .shop-logo-name{
  font-size35.9px;
  text-transform: uppercase;
  line-height1.6;
}

header .shop-name{
  font-size17.9px;
  letter-spacing0.5em;
  font-weight: bold;
}
header star{
  widthcalc(100% - 330px);
}
header star .star-container{
  text-align: right;
}
header star .star-box{
  text-align: center;
  display: inline-block;
  padding0.4em 0.5em;
  border2px solid var(--default-font-color);
  border-radius100%;
  margin-right2.5em;
}

核心知识点

  • <text>标签的位置调整
  • font-size
  • text-transform
  • letter-spacing
  • vertical-align
  • calc

实现海报部分样式效果

HTML标签结构

    <banner>
      <menu>
        <ul class="contanier font-bold menu-box">
          <li>首页</li>
          <li>所有宝贝</li>
          <li>摆件</li>
          <li>置物架</li>
          <li>盆栽</li>
          <li>墙纸</li>
          <li>铁艺墙饰</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">
            墙饰挂画<br />
            只为遇见<br />
          </p>
          <p class="price">
            RMB:99 
          </p>
        </div>
      </poster>
    </banner>

CSS样式

banner menu{
  background-colorvar(--default-active-bg-color);
  color:#fff;
  margin-block-start0;
  margin-block-end0;
  margin-inline-start0;
  margin-inline-end0;
  padding-inline-start0;
}
banner .menu-box{
  padding0.5em 0;
}
menu li{
  display: inline;
  padding0 4em;
  font-size15px;
}
banner poster{
  height40em;
  display: block;
  background-imageurl('../images/bg01.png');
  background-size:100% 100%;
  background-position: center;
}
banner poster .contanier{
  background-imageurl('../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.5em 19em,13em 17em,14.5em 19em,13em 17em,14.5em 19em,13em 17em;
  background-position: left 3em35.4% 4.3em35% 5em55.7% 4.3em,55% 5em76.4% 4.3em,75% 5em;
}
banner .date,banner .slogan,banner .price{
  margin-top1em;
  font-size2.5em;
  letter-spacing0.1em;
}

banner .date{
  margin-top2.5em;
}

核心知识点

  • margin-block-start
  • background-image
  • background-size
  • background-position

实现商品部分一样式效果

HTML标签结构

      <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">收藏店铺<br />无门槛</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">满 299 使用</span><br />
            <span class="receive"></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">满 399 使用</span><br />
            <span class="receive"></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">满 599 使用</span><br />
            <span class="receive"></span>
          </li>
        </ul>
      </section>

CSS样式

.section01{
  margin3em 21%;
}
.section01 .discount{
  display:  inline-block;
  padding2em 0;
  background-colorvar(--default-good-bg-color);
  margin2em 1em;
  height13em;
  width7.2em;
  box-sizing: border-box;
  font-size27px;
  text-align: center;
  vertical-align: top;
  text-transform: uppercase;
}

.section01 .discount.active{
  background-colorvar(--default-active-bg-color);
  color:#fff;
}

.section01 .discount .amount{
  font-size100px;
  line-height1.2;
}

.section01 .discount .multiply{
  transformrotate(-45deg);
  display: inline-block;
}

.section01 .discount .description{
  margin-bottom0.2em;
  display: inline-block;
}

.section01 .discount .receive{
  background-color :rgb(245, 61, 64);
  border-radius100%;
  padding0.2em;
  color#fff;
  margin-top0.2em;
}

核心知识点

  • display
  • box-sizing
  • vertical-align
  • font-size
  • text-transform
  • transform

整体效果预览


今日总结


今日心情

今天主要来说就是基于CSS 变量,基础实现了电商页面上半部分布局,变量真的很给力呢~~,感觉今天写图片定位好啰嗦麻烦,主要有很多重复的 CSS 代码,不知道是不是我没设计好~~~~

本文使用 mdnice 排版