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;
            width: 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;
        }

复制代码
posted @   新功夫涂鸦  阅读(255)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示