请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351
前言：
今天给大家实现一下网站首页开发四，做网站首页内容部分的第四个内容，专业技能这一内容！
首页内容四功能：
1、布局
2、插入图片
3、文字排版
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.center7{
width: 100%;
height: 768px;
display: table;
text-align: center;
padding-top: 104px;
box-sizing: border-box;
background: linear-gradient(to bottom, #f4d03f 70%, #c3a632 100%);
}
.center7_top{
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
display: block;
font-family: microsoft yahei, sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
line-height: 1.42857143;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
clear: both;
/*clear: both;左右两侧不允许出现浮动元素*/
}
.center7_top_top{
padding: 30px 0 0 0;
text-align: center;
box-sizing: border-box;
display: block;
color: #444;
font-family: microsoft yahei, sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-size: 14px;
line-height: 1.42857143;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.center7_top_top h2{
font-size: 30px;
}
.center7_top_top hr{
height: 4px;
width: 70px;
text-align: center;
position: relative;
/*background: #F4D03F;*/
margin: 0 auto;
margin-bottom: 30px;
border: 0;
box-sizing: content-box;
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
}
.center7_bottom_bottom{
margin-right: -15px;
margin-left: -15px;
/*display: block;*/
color: #444;
font-family: microsoft yahei, sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-size: 18px;
line-height: 1.42857143;
/*display: table;*/
content: " ";
clear: both;
}
.center7_bottom_bottom_left{
width: 48%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
display: block;
}
.center7_bottom_bottom_left img{
margin-top: -30px;
margin-left: 10px;
display: block;
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.center7_bottom_bottom_right{
width: 46%;
float: right;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.center7_bottom_bottom_right div{
margin-left: 10px;
display: block;
}
.center7_bottom_bottom_right div div{
padding-left: 50px;
display: block;
}
.center7_bottom_bottom_right div div h4{
font-size:20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="center7">
<div class="center7_top">
<div class="center7_top_top">
<h2><strong>专业</strong> 技能</h2>
<hr>
</div>
<div class="center7_bottom_bottom">
<div class="center7_bottom_bottom_left">
<img src="../img/about.png" alt="">
</div>
<div class="center7_bottom_bottom_right">
<div>
<div>
<h4>PC端</h4>
<p>熟练使用HTML/CSS技术，精通Javascript/jquery编程,能够熟练使用angularjs，reactjs等前端MVC框架进行模块开发，熟练的使用grunt，gulp等前端工具，了解less，sass，stylus，coffeescript等前端新技术</p>
</div>
<div>
<h4>移动端</h4>
<p>熟练使用zepto.js，Frozen ui，Amaze ui等移动框架进行移动页面的开发，熟练使用threejs等js引擎进行3d效果和H5游戏的开发.</p>
</div>
<div>
<h4>其他</h4>
<p>懂网站性能优化，网站百度排名和SEO优化，熟练使用photoshop等切图工具，会常见的UI技巧，懂Java，php等后台语言开发.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>代码解说：
大家有不懂的代码直接百度一下就可以了，或者在下方留言
效果图展示：
说明：
背景颜色大家自行搭配！
宗波尘客(www.zbck123.com)宗九尘博客 联系QQ：203239351
