大家好，本篇文章分享一个简单的企业关于我们样式设计
话不多说，直接看效果图：
关于我们
从上面效果图分析，我们需要定义一个灰色背景，图片和文字介绍左右布局，左边图片宽度可以设定为100%像素，右边文字介绍直接用h2定义标题，h3定义副标题，再插入一行边框，然后是用p标签写一段文字简介，最后则是定义一个红色背景的按钮样式。
HTML代码：
<div class="tpt-about cl"> <div class="tpt-wp cl"> <div class="tpt-md-2"> <div class="a"> <img src="1.png"> </div> </div> <div class="tpt-md-2"> <div class="b"> <h3>TPTCMS专注于轻量级网站内容管理系统开发</h3> <h4>模块化、扁平化、简单化</h4> <p>程序基于ThinkPHP5开发框架，结合Layui以及其他开源组件，致力于为用户提供设计简约且操作简单的网站程序，没有多余的功能与复杂的样式，设计简约而又不失便捷实用，让用户拥有良好的视觉体验和操作习惯。</p> <a href="#">全部产品</a> </div> </div> </div> </div>
首先我们给tpt-about定义一个背景颜色：
.tpt-about {
background: #f2f2f2;
}
定义左边图片宽度：
.tpt-about img {
width: 100%;
}
定义标题、副标题和下边框：
.tpt-about h3 {
color: #333;
font-size: 20px;
line-height: 30px;
padding: 20px 0 10px 0;
}
.tpt-about h4 {
color: #999;
font-size: 14px;
line-height: 24px;
padding: 0 0 40px 0;
margin: 0 0 20px 0;
border-bottom: 1px solid #ccc;
}
定义一段文字简介：
.tpt-about p {
color: #999;
font-size: 14px;
line-height: 24px;
padding: 0 0 20px 0;
}
最后定义超链接按钮：
.tpt-about a {
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 36px;
color: #fff;
background: #FF5722;
font-size: 14px;
}
当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式。
本文内容来自网友供稿，文章观点仅代表作者本人，本站非盈利且无偿提供信息存储空间服务，不拥有所有权，如有文章有不实信息或侵犯了您的权益，请发送邮件至 cfseo1997@163.com 反馈核实，如需转载请注明出处：https://www.taobobolive.com/254208.html
