微信公众号页面

女爷i 2022-04-15 00:13 200阅读 0赞

*  写了一个公众号微网页
 *  栏目用到这个，记录一下，好久没写css了，?都忘了。
 *                               ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70][]
 *  直接上代码
 *  html：
 *  <div class="sigma-content">
    
    <div class="sigma-middle-line">
    
       <span class="sigma-line-text">必买好物</span>
    
    </div>
 *  </div>
    
     
    
     
    
    css:
    
     
    
    .sigma-content \{
    
    margin: 20px;
    
    text-align: center;
    
    background-color: \#fff;
    
    \}
    
     
    
    .sigma-middle-line:before \{
    
    content: '';
    
    display: block;
    
    height: 1px;
    
    width: 40%;
    
    background-color: \#B4A078;
    
    /\*颜色需与主题大背景色一致\*/
    
    position: relative;
    
    top: 10px;
    
    /\*调节线高\*/
    
    left: 30%;
    
    \}
    
     
    
    .sigma-line-text \{
    
    display: inline-block;
    
    background: \#fff;
    
    padding: 0 18px 0 18px;
    
    position: relative;
    
    width: 68px;
    
    font-size: 14px;
    
    font-weight: 500;
    
    color: \#B4A078;
    
    \}

完整html:

<!DOCTYPE html>

<head>

<title>养无限旗舰店</title>

</head>

<body>

</div>

</div>

</div>

<a href="javascript:;">指定商品可用</a>

</div>

</div>

</div>

<a href="javascript:;">指定商品可用</a>

</div>

</div>

</div>

<a href="javascript:;">指定商品可用</a>

</div>

</div>

</div>

<a href="javascript:;">指定商品可用</a>

</div>

</div>

<dl>

</dt>

<dd>

<a class="event\_detail\_text">恒寿堂紫菊 精选千岛湖无污染原料 匠心精制 养生好物</a>

</p>

</dd>

</div>

<dl>

</dt>

<dd>

<a class="event\_detail\_text">恒寿堂紫菊 精选千岛湖无污染原料 匠心精制 养生好物</a>

</p>

</dd>

</div>

<dl>

</dt>

<dd>

<a class="event\_detail\_text">恒寿堂紫菊 精选千岛湖无污染原料 匠心精制 养生好物</a>

</p>

</dd>

</div>

<dl>

</dt>

<dd>

<a class="event\_detail\_text">恒寿堂紫菊 精选千岛湖无污染原料 匠心精制 养生好物</a>

</p>

</dd>

</div>

</div>

<dl>

</dt>

<dd>

<a class="event\_detail\_text">恒寿堂紫菊 精选千岛湖无污染原料 匠心精制 养生好物</a>

</p>

</dd>

</div>

<dl>

</dt>

<dd>

<a class="event\_detail\_text">恒寿堂紫菊 精选千岛湖无污染原料 匠心精制 养生好物</a>

</p>

</dd>

</div>

<a class="font15 goHome\_text">返回活动列表</a>

</div>

</body>

</script>

</html>

完整css:

/\*reset\*/

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

blockquote,

pre,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video \{

margin: 0;

padding: 0;

border: 0;

font: inherit;

font-family: 'PingFangSC';

vertical-align: baseline;

\* \{

margin: 0;

padding: 0;

/\* HTML5 display-role reset for older browsers \*/

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section \{

display: block;

body \{

line-height: 1;

ol,

ul \{

list-style: none;

blockquote,

q \{

quotes: none;

table \{

border-collapse: collapse;

border-spacing: 0;

a \{

color: \#4A4A4A;

text-decoration: none;

\[v-cloak\] \{

display: none;

\#eventPage \{

text-align: center;

overflow: hidden;

position: relative;

padding-bottom: 21px;

.banner \{

height: 150px;

width: 100%;

/\* background: url('../images/eventPage.png') no-repeat center; \*/

/\* background-size: cover; \*/

.font\_weight \{

font-weight: 500;

.color\_White \{

color: \#fff;

.color\_gree \{

color: \#B4A078;

.font8 \{

font-size: 8px;

.font9 \{

font-size: 9px;

.font10 \{

font-size: 10px;

.font11 \{

font-size: 11px;

.font12 \{

font-size: 12px;

.font13 \{

font-size: 13px;

.font14 \{

font-size: 14px;

.font15 \{

font-size: 15px;

.font16 \{

font-size: 16px;

.fon20 \{

font-size: 20px;

.border5 \{

border-radius: 5px;

.border\_tl5 \{

border-top-left-radius: 5px;

.border\_tr5 \{

border-top-right-radius: 5px;

.border10 \{

border-radius: 10px;

.border15 \{

border-radius: 15px;

.border23 \{

border-radius: 23px;

.greeShadow \{

box-shadow: 0px 5px 8px RGBA(0, 0, 0, 0.02);

.banner img \{

display: inline-block;

height: 150px;

width: 100%;

.setTime \{

width: 92%;

height: 80px;

margin: 0 auto;

background: \#fff;

/\* position: absolute; \*/

z-index: 9999;

transform: translateY(-15px);

display: flex;

justify-content: space-between;

color: \#FFF0F0F5;

.moringLeft \{

width: 80%;

height: 80px;

line-height: 80px;

display: flex;

justify-content: space-between;

.moringLeft dt \{

width: 29%;

height: 80px;

line-height: 80px;

/\* background : red; \*/

.moringLeft dt img \{

width: 60px;

height: 60px;

line-height: 60px;

background: hotpink;

.moringRight \{

width: 20%;

height: 80px;

line-height: 80px;

/\* background: red; \*/

.moringLeft dd \{

flex: 1;

height: 80px;

line-height: 80px;

/\* background : \#4A4A4A; \*/

display: felx;

flex-direction: column;

justify-content: space-between;

color: \#B4A078;

text-align: left;

.moringLeft>dd>h3 \{

font-size: 20px;

height: 28px;

line-height: 28px;

margin-bottom: 6px;

margin-top: 13px;

.moringLeft>dd>h4 \{

font-size: 13px;

height: 28px;

line-height: 28px;

.moringLeft dd>h4>a \{

color: \#B4A078;

border: 1px \#B4A078 solid;

border-radius: 10px;

padding: 0 3px;

.coupon \{

width: 92%;

height: 225px;

margin: 0 auto;

/\* background: \#B4A078; \*/

box-shadow: 0px 5px 8px RGBA(0, 0, 0, 0.02);

margin-bottom: 15px;

overflow: hidden;

.coupon img \{

width: 140px;

height: 20px;

line-height: 20px;

margin: 10px 0;

.couponList \{

overflow: hidden;

color: \#fff;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

.coupon\_items \{

width: 43%;

/\* height : 66px;

line-height : 66px; \*/

overflow: hidden;

padding: 7px 10px;

display: flex;

flex-direction: column;

justify-content: space-between;

margin-bottom: 10px;

.items\_top \{

text-align: left;

width: 100%;

height: 33px;

line-height: 33px;

border-bottom: 1px \#fff solid;

overflow: hidden;

display: flex;

flex-direction: row;

justify-content: space-between

.items\_top .items\_top\_left \{

display: inline-block;

width: 100%;

height: 39px;

overflow: hidden;

.items\_top .items\_top\_left a \{

color: \#fff;

.no\_own \{

width: 55px;

height: 20px;

line-height: 20px;

display: inline-block;

background: \#fff;

padding: 3px 5px;

.coupon\_items\_Hasbg \{

.coupon\_items\_Nohasbg \{

.items\_bottom \{

text-align: left;

width: 100%;

overflow: hidden;

/\* padding: 10px 0; \*/

.bottom\_t \{

width: 100%;

height: 14px;

line-height: 14px;

.bottom\_t>a,

.bottom\_b>a \{

font-size: 10px;

color: \#fff;

.bottom\_b \{

width: 100%;

display: flex;

justify-content: space-between;

.bottom\_t \{

/\* margin: 3px; \*/

margin: 3px 0;

.has\_own \{

width: 55px;

height: 20px;

line-height: 20px;

display: inline-block;

padding: 3px 5px;

color: \#fff;

.recommendation \{

height: 220px;

width: 92%;

background: \#F0F0F5;

margin: 0 auto;

margin-bottom: 15px;

.recommendation\_items \{

height: 220px;

width: 100%;

margin: 0 auto;

margin-bottom: 15px;

position: relative;

.recommendation\_items dt img \{

height: 150px;

width: 100%;

.recommendation\_items dd \{

text-align: left;

.recommendation\_items>dd>h3 \{

font-size: 16px;

font-weight: 500;

color: \#3E2B2E;

margin: 13px 0px 8px 10px;

.recommendation\_items>dd>h4 \{

font-size: 12px;

font-weight: 100;

color: \#9B9B9B;

margin: 13px 0px 8px 10px;

.recom\_Taging \{

display: inline-block;

position: absolute;

width: 60px;

height: 20px;

line-height: 20px;

top: 10px;

left: -5px;

z-index: 999;

.recom\_Taged \{

display: inline-block;

width: 60px;

height: 20px;

line-height: 20px;

background: \#9B9B9B;

position: absolute;

top: 10px;

left: -5px;

z-index: 999;

.goHome \{

width: 165px;

height: 45px;

line-height: 45px;

position: fixed;

left: 15px;

bottom: 100px;

background: \#fff;

z-index: 99999;

overflow: hidden;

.goHome img \{

margin: 3px 8px 0 18px;

.goHome>a \{

padding-left: 10px;

display: inline-block;

height: 21px;

line-height: 21px;

border-left: 1px \#4A4A4A solid;

margin-bottom: 2px;

/\* 活动详情页 \*/

.banner \{

margin-bottom: 15px;

.sigma-content \{

margin: 20px;

text-align: center;

background-color: \#fff;

.sigma-middle-line:before \{

content: '';

display: block;

height: 1px;

width: 40%;

background-color: \#B4A078;

/\*颜色需与主题大背景色一致\*/

position: relative;

top: 10px;

/\*调节线高\*/

left: 30%;

.sigma-line-text \{

display: inline-block;

background: \#fff;

padding: 0 18px 0 18px;

position: relative;

width: 68px;

font-size: 14px;

font-weight: 500;

color: \#B4A078;

.event\_detail\_list \{

height: 120px;

width: 92%;

margin: 0 auto;

.event\_detail\_list>dl \{

width: 100%;

height: 120px;

display: flex;

justify-content: space-between;

.event\_detail\_list>dl>dt \{

overflow: hidden;

width: 120px;

height: 120px;

line-height: 120px;

.event\_detail\_list>dl>dt>img \{

display: inline-block;

margin-top: 10px;

height: 100px;

width: 100px;

.event\_detail\_list>dl>dd \{

flex: 1;

display: flex;

flex-direction: column;

text-align: left;

height: 120px;

overflow: hidden;

.event\_detail\_text \{

display: inline-block;

font-size: 14px;

width: 100%;

line-height: 20px;

padding: 3px 25px 0 0;

color: \#4A4A4A;

margin: 20px 0 15px 0;

.event\_detail\_price \{

width: 100%;

height: 35px;

line-height: 35px;

overflow: hidden;

.event\_detail\_price a:nth-child(1) \{

font-size: 14px;

width: 20%;

color: \#FF4600;

.event\_detail\_price a:nth-child(2) \{

font-size: 14px;

color: \#9B9B9B;

.event\_detail\_price a:last-child \{

/\* padding : 7px 17px; \*/

width: 70px;

height: 30px;

line-height: 30px;

font-size: 14px;

background: \#B4A078;

float: right;

overflow: hidden;

text-align: center;

color: \#fff;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70]: /images/20220415/71ef991639d94c88a422b71779c2e9fd.png