网页设计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:企业项目介绍的布局样式实例

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


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

坐等沙发
相关文章
少儿编程学习中,scratch与python的区别?
少儿编程学习中,scratch与python的区别?
儿童学习编程有什么好处
儿童学习编程有什么好处
对MIT的Scratch官网注册地选择的抗议
对MIT的Scratch官网注册地选择的抗议
编玩边学寒假冬令营又开营了
编玩边学寒假冬令营又开营了
2019 GET大会编玩边学CEO郝祥林: C-B-S三端,如何合力突围编程下半场
2019 GET大会编玩边学CEO郝祥林: C-B-S…
做一名小创客
做一名小创客
学生都说我是编程界的“吴彦祖”