奇乐网 - 草根博客网站

HTML+CSS网页设计,简单的企业关于我们样式

寻梦xunm 142 0

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

大家好,本篇文章分享一个简单的企业关于我们样式设计,话不多说,直接看效果图。
154027395603981.png
从上面效果图分析,我们需要定义一个灰色背景,图片和文字介绍左右布局,左边图片宽度可以设定为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;
}

当然,布局的方式有很多种,这只是其中一个方法,也欢迎大家留言分享一下其他的布局方式。

CSS代码:

首先需要引入响应式代码:https://www.tpt360.com/thread/33.html

.tpt-about{background:#f2f2f2;width:100%;position:relative;padding:60px 0}
.tpt-about .a{margin:0 20px}
.tpt-about img{width:100%}
.tpt-about .b{margin:0 20px}
.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}

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

消灭零回复

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