大家好，本篇文章分享一个简单的企业关于我们样式设计
话不多说，直接看效果图：
关于我们
从上面效果图分析，我们需要定义一个灰色背景，图片和文字介绍左右布局，左边图片宽度可以设定为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="http://img.studyofnet.com1.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; }
当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式。
,
