• HTML+CSS页面练习——legend第五部分


    第五部分——Service

    简要介绍:

    页面效果:

    HTML代码:

    <section id="services">
            <div class="container">
                <div class="align"><i class="icon-cog-circled"></i></div>
                <h1>Services</h1>
                <div class="row">
                    <div class="span3">
                        <div class="align"><i class="icon-desktop sev_icon"></i></div>
                        <h2>Web design</h2>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                    <div class="span3">
                        <div class="align"><i class="icon-vector sev_icon"></i></div>
                        <h2>Print Design</h2>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                    <div class="span3">
                        <div class="align"><i class="icon-basket sev_icon"></i></div>
                        <h2>Ecommerce</h2>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                    <div class="span3">
                        <div class="align"><i class="icon-mobile-1 sev_icon"></i></div>
                        <h2>Marketing</h2>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>
            </div>
        </section>

    CSS代码:

           #services{
                padding: 50px 70px;
                margin-top:0px;
                margin-bottom: 50px;
            }
            #services .span3{
                background:#e9e9e9;
                padding: 3px 0 15px 10px;
                transition: all 0.3s ease-in-out;
                 22%;
                display: inline-block;
                margin: 9px;
            }
            #services .span3:hover{
                background: #e3e3e3;
                box-shadow: 1px 1px 6px #c1bac1;
            }
            #services h1{
                font-size: 3em;
                margin:0em 0 0.7em 0;
                font-family: 'Patua One',cursive;
                text-align: center;
            }
            #services h2{
                font-size: 22px;
                font-family: 'Patua One',cursive;
                font-weight: lighter;
                margin: 0;
                padding: 0;
                text-align: center;
            }
            #services p{
                margin: 10px;
                float: left;  
                line-height: 25px;      
            }
            #services .align{
                font-size: 6em;
                text-align: center;
                padding: 0;
            }
            #services .align .sev_icon{
                text-align: center;
                margin: 10px 0 20px 0;
                font-size: 0.6em;
                color: #F0BF00;
            }

  • 相关阅读:
    整型
    圆的面积和周长
    买菜
    keil 生成 bin 文件 gd32为例
    内存中 1k 代表什么
    正反转 步进电机 驱动器 编码器
    stlink 无法再keil中识别 按下复位键可以识别
    单片机的时钟,系统时钟
    db9串口接头的定义
    E面波导和H面波导的问题
  • 原文地址:https://www.cnblogs.com/209yin/p/7595856.html
Copyright © 2020-2023  润新知