奇乐网 - 草根博客网站

HTML+CSS网页设计,企业项目介绍的布局样式

寻梦xunm 119 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

大家好,本篇文章分享企业项目介绍的布局设计,这种样式设计通常用于企业网站上方的项目介绍或者服务介绍,可以更好的突出企业的核心特点和品牌形象。

话不多说,直接看效果图:

154044466602885.png

HTML代码 :

<div class="tpt-list cl">
<div class="tpt-wp cl">
<div class="tpt-md-3">
<div class="a">
<i class="layui-icon"></i>
<h3>HTML网页设计</h3>
<p>感谢您使用本套网站内容管理系统,致力于为您创建一个高效简洁但稳定实用的网站程序。</p>
</div>
</div>
<div class="tpt-md-3">
<div class="a">
<i class="layui-icon"></i>
<h3>HTML网页设计</h3>
<p>感谢您使用本套网站内容管理系统,致力于为您创建一个高效简洁但稳定实用的网站程序。</p>
</div>
</div>
<div class="tpt-md-3">
<div class="a">
<i class="layui-icon"></i>
<h3>HTML网页设计</h3>
<p>感谢您使用本套网站内容管理系统,致力于为您创建一个高效简洁但稳定实用的网站程序。</p>
</div>
</div>
<div class="tpt-md-3">
<div class="a">
<i class="layui-icon"></i>
<h3>HTML网页设计</h3>
<p>感谢您使用本套网站内容管理系统,致力于为您创建一个高效简洁但稳定实用的网站程序。</p>
</div>
</div>
<div class="tpt-md-3">
<div class="a">
<i class="layui-icon"></i>
<h3>HTML网页设计</h3>
<p>感谢您使用本套网站内容管理系统,致力于为您创建一个高效简洁但稳定实用的网站程序。</p>
</div>
</div>
<div class="tpt-md-3">
<div class="a">
<i class="layui-icon"></i>
<h3>HTML网页设计</h3>
<p>感谢您使用本套网站内容管理系统,致力于为您创建一个高效简洁但稳定实用的网站程序。</p>
</div>
</div>
</div>
</div>

部分CSS代码分析:

首先我们给网页定义一个白色背景

body {
    background: #fff;
}

定义整个布局的宽度为1200像素,并居中显示

.tpt-wp {
    width: 1200px;
    margin: 0 auto
}

使布局分成三个相等的宽度,各占百分之三十三点三,并往左浮动

.tpt-md-3 {
    width: 33.3%;
    float: left
}

给每份布局定义外边距20像素,内边距为上下50像素,左右20像素

.tpt-list .a {
    margin: 20px;
    padding: 50px 20px;
}

给上方的图标标签定义一个56像素的大小,颜色为红色

.tpt-list i {
    font-size: 56px;
    color: #ff5722;
}

给h3标题定义20像素的大小,黑色的字体颜色,行高为30像素,内边距为上下10像素

.tpt-list h3 {
    color: #333;
    font-size: 20px;
    line-height: 30px;
    padding: 10px 0
}

最后给文字介绍14像素的大小,灰色的字体颜色,行高为24像素

.tpt-list p {
    color: #999;
    font-size: 14px;
    line-height: 24px;
}

当然,布局的方式有很多种,这只是其中一个方法,也欢迎大家留言分享一下其他的布局方式,点击下面了解更多获取全部CSS代码。

body {background: #fff;}
.tpt-wp{width:1200px;margin:0 auto}
.tpt-md-3{width:33.3%;float:left}
.tpt-list{width: 100%;position: relative;padding: 50px 0;}
.tpt-list .a{text-align: center;margin: 20px;padding:50px 20px;cursor: pointer;box-shadow: 0 0 8px rgba(0,0,0,.1);transition:all .30s ease-in-out;}
.tpt-list .a:hover{transform: translate(0,-6px);}
.tpt-list i{font-size:56px;color:#ff5722;cursor:pointer;}
.tpt-list h3{color:#333;font-size:20px;line-height:30px;padding:10px 0}
.tpt-list p{color:#999;font-size:14px;line-height:24px;}

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)