网页设计html:企业项目介绍的布局样式实例

编玩边学的粉丝及游客们,大家好!今天我们将分享一个企业项目的布局设计样式,这种样式就是常见的企业网站的上方的栏目介绍或者服务介绍,就是更好的突出企业核心和品牌特色。且这种设计多是用网页设计html,一起来看看网页设计html的布局样式。

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

网页设计html:企业项目介绍的布局样式实例-少儿编程网

企业项目介绍的布局样式

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;
}
当然,布局的方式多种多样,网页设计html只是其中一种,也欢迎大家留言分享一下其他的布局方式,关注编玩边学了解更多获取全部CSS代码。

本文链接:网页设计html:企业项目介绍的布局样式实例

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:少儿编程网,谢谢!^^


*文章为作者独立观点,不代表少儿编程网立场
发表评论

坐等沙发
相关文章
很多人都不知道少儿编程是学什么的
很多人都不知道少儿编程是学什么的
少儿编程优点有哪些?
少儿编程优点有哪些?
2019年海淀区中小学生“世纪杯”计算机竞赛
2019年海淀区中小学生“世纪杯”计算机竞赛
2019年CSP-JS深圳市报名数据
2019年CSP-JS深圳市报名数据
第十一届蓝桥杯大赛青少年创意编程组比赛细则
第十一届蓝桥杯大赛青少年创意编程组比…
家长须知~少儿编程几岁学合适
家长须知~少儿编程几岁学合适
学生都说我是编程界的“吴彦祖”