Web网站模板-小清新企业个人营销宣传响应式网站模板(HTML+CSS+JavaScript)

最新推荐文章于 2024-09-30 15:42:36 发布

sgegv

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量355

点赞数 4

分类专栏：程序员文章标签：前端 html css

本文链接：https://blog.csdn.net/sgegv/article/details/138882101

版权

程序员专栏收录该内容

290 篇文章 0 订阅

订阅专栏

          <!--[-->This is <strong>搞前端的半夏</strong>, 欢迎关注公众号

          <a href="https://"></a>.搞前端的半夏，一个和你一起学习JavaScript,

          HTML5 and CSS3 等等大前端领域的知识，欢迎加我：frontpicker:)<!--]-->

        </p>

        <ul class="actions">

          <li>

            <a

              href="#first"

              class="button special color1 circle icon fa-angle-right"

              >Next</a

            >

          </li>

        </ul>

      </div>

      <div class="image filtered span-1-75" data-position="25% 25%">

        <img src="images/pic01.jpg" alt="" />

      </div>

    </section>




[]( )定价

------------------------------------------------------------



![image-20220408210323009](https://img-blog.csdnimg.cn/img_convert/471246ca69ce875d6f3c30f7298fa6bf.png)

<div class="tm-item-container">

        <img src="img/2.jpg" alt="Image">

        <p class="tm-item-description">pellentesque eu, pretium quissem</p><hr>

        <div class="tm-item-price-container">

          <span class="tm-item-price">$ 134,000</span>

          <a href="#" class="tm-item-link">

            <span class="tm-item-action">Add to Cart</span>

            <img src="img/plus.png" class="tm-item-add-icon" alt="Image">

          </a>

        </div>            

      </div>




[]( )服务介绍

==============================================================



![image-20220408210246246](https://img-blog.csdnimg.cn/img_convert/a0f5e3fab2e6c82c74a26e4bbb50d7b6.png)

    <section class="panel color1">

      <div class="intro joined">

        <h2 class="major">Amet lorem</h2>

        <p>

          Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis

          congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum

          amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna

          etiam.

        </p>

      </div>

      <div class="inner">

        <ul class="grid-icons three connected">

          <li>

            <span class="icon fa-diamond"

              ><span class="label">Lorem</span></span

            >

          </li>

          <li>

            <span class="icon fa-camera-retro"

              ><span class="label">Ipsum</span></span

            >

          </li>

          <li>

            <span class="icon fa-cog"

              ><span class="label">Dolor</span></span

            >

          </li>

          <li>

            <span class="icon fa-paper-plane"

              ><span class="label">Sit</span></span

            >

          </li>

          <li>

            <span class="icon fa-bar-chart"

              ><span class="label">Amet</span></span

            >

          </li>

          <li>

            <span class="icon fa-code"

              ><span class="label">Nullam</span></span

            >

          </li>

        </ul>

      </div>

    </section>




[]( )照片墙

=============================================================



![image-20220408210335629](https://img-blog.csdnimg.cn/img_convert/5f7a52a564c5d0c3965afa0b15e6cd0e.png)

    <div class="services-blocks-container">

      <div class="services-block">

        <div class="services-header">

          <i class="fa fa-plus services-icon"></i>

          <h3 class="services-title-2">aenean consequat</h3>  

        </div>          

        <p class="services-description">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagiittis sem   nibh id elit. Duis sed odio sit amet nibh.a sit amet mauris um auctor, nisi elit. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>

      </div>

      <div class="services-block">

        <div class="services-header">

          <i class="fa fa-plus services-icon"></i>

          <h3 class="services-title-2">duis sedodio</h3>  

        </div>          

        <p class="services-description">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagiittis sem   nibh id elit. Duis sed odio sit amet nibh.a sit amet mauris um auctor, nisi elit. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>

      </div>                    

    </div>  

  </div>




[]( )联系我们

==============================================================



![image-20220408210338246](https://img-blog.csdnimg.cn/img_convert/1e5fb50074db736b480f531da58584d4.png)

    <!-- Panel -->

    <section class="panel color4-alt">

      <div class="intro color4">

        <h2 class="major">Contact</h2>

        <p>

          Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis

          congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum

          amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna

          etiam.

        </p>

      </div>

      <div class="inner columns divided">

        <div class="span-3-25">

          <form method="post" action="#">

            <div class="field half">

              <label for="name">Name</label>

              <input type="text" name="name" id="name" />

            </div>

            <div class="field half">

              <label for="email">Email</label>

              <input type="email" name="email" id="email" />

            </div>

            <div class="field">

              <label for="message">Message</label>

              <textarea name="message" id="message" rows="4"></textarea>

            </div>

            <ul class="actions">

              <li>

                <input

                  type="submit"

                  value="Send Message"

                  class="button special"

                />