项目实战，代码分享，文字排版代码。h5移动端开发


UI原图

image.png


代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>枝数花语</title>
    <style type="text/css">
 *{
            margin: 0;
 padding: 0;
 }
        body{
            background-image: url("../img/zshybg.png");
 }
        a{
            text-decoration: none;
 color: #f0f0f0;
 }
        header{
            width: 100%;
 font-size: 3em;
 display: flex;
 background-color: black;
 color: #fff;
 }
        .header-left{
            width: 30%;
 height: 2em;
 line-height: 2em;
 padding-left: 20px;
 }
        h3{
            width: 40%;
 height: 1.7em;
 line-height: 1.7em;
 text-align: center;
 }
        .header-right{
            width: 30%;
 height: 2em;
 line-height: 2em;
 text-align: right;
 padding-right: 20px;
 }

        .list{
            width: 100%;
 font-size: 3em;
 padding-top: 50px;
 color: #9e9e9e;
 }
        .list-title{
            height: 70px;
 }
        .list-title span{
            display: inline-block;
 float: left;
 width: 10%;
 color: red;
 text-align: center;
 }
        .list-title,.list-eseay{
            line-height: 70px;
 }
        .list-eseay{
            padding-left: 10%;
 font-size: 0.3em;
 }
        .list-eseay span,.list-title{
            color: black;
 }
    </style>
</head>
<body>
<header>
    <div class="header-left">
        <a href="#">
            <span>< </span>返回
        </a>
    </div>
    <h3>枝数花语</h3>
    <div class="header-right">·&nbsp;·&nbsp;·</div>
</header>
<div class="list">
    <div class="list-title">
        <span>⭕</span>
 不同的送花对象
    </div>
    <div class="list-eseay">
        <p><span>恋人：</span>适合送玫瑰以及百合、郁金香、马蹄莲登。</p>
        <p><span>父母/长辈/老师：</span>适合送康乃馨，最好是康乃馨搭配百合、扶朗、玫瑰的花束和花篮。</p>
    </div>
</div>
<div class="list">
    <div class="list-title">
        <span>⭕</span>
 不同的颜色的鲜花
    </div>
    <div class="list-eseay">
        <p><span>红色：</span>红色代表吉祥、喜气、热烈，红色鲜花适合出现在喜庆的场合，以及用来表达炽热的情感，如代表热恋的玫瑰。</p>
        <p><span>粉色：</span>粉色代表可爱、温馨、青春、恋爱登，多用在女性身上，粉色花朵主要用来送女性，所以粉色康乃馨被认为是母亲的象征。</p>
        <p><span>白色：</span>白色代表纯洁、圣洁、严肃，白色花束适合出现在庄重的场合，以及用来表达真挚的感情，如白玫瑰代表纯真的爱。</p>
        <p><span>黄色：</span>黄色被认为是快乐的希望的颜色，黄色花朵适合用来祝愿病人早日康复，以及表达祝福。不过，黄玫瑰比较特别，虽然可代表美好的祝愿，但重在为爱道歉。</p>
    </div>
</div>
<div class="list">
    <div class="list-title">
        <span>⭕</span>
 花朵朵数的选择
    </div>
    <div class="list-eseay">
        <p><span>时下，比较常见且受欢迎的是11朵、19朵、29朵、33朵、66朵、9朵的花束。</span></p>
        <p><span></span>11朵代表一心一意，经济实惠之选，常用来表白示爱。</p>
        <p><span></span>19朵代表期待陪伴，正式恋爱后可赠送，特别适合异地恋情侣。</p>
        <p><span></span>29朵代表不需要言语的爱，热恋时送花的心意之选。</p>
        <p><span></span>33朵代表三生三世的爱，适合在相恋纪念日赠送。</p>
        <p><span></span>66朵代表真爱不变，适合恋爱走过轰轰烈烈后送给对方。</p>
        <p><span></span>99朵代表长长久久的爱，较多用于示爱，求婚。</p>
        <p><span></span>如果是很有纪念意义的重要场合，通常送29朵。</p>
        <p><span></span>66朵，99朵这种朵数较多的花束比较适合的场合。</p>
    </div>
</div>
</body>
</html>


成品效果图：

image.png