宗波尘客是宗九尘个人博客，用于分享学习经验、个人笔记。分享：web前端开发,网站后端,php代码,html+css,网站运营
个人博客网站我的技能板块开发：
接上篇文章（html5手机端个人博客网站首页单页开发教程），我们依然用w3c出的一个小案例来做教程，教程简单易学，只要稍微有点前端基础的同学都能看得懂，如果没有前端基础的同学可以自行百度或者搜索本站以前的文章学习。这篇文章是写我的技能板块内容，废话不多说，先上我的技能成品效果截图，和代码上传！
个人博客网站我的技能效果图展示：
个人博客网站我的技能板块开发代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的博客</title>
<style>
html {
margin: 0;
padding: 0;
}
body {
/*font-family: "微软雅黑", "黑体";*/
/*在body中设置字体是为了让字体属性继承到下面所有标签中，此处我们暂时不设置字体*/
font-size: 14px;
color: #333;
background-color: #efefef;
padding: 10px;
margin: 0;
}
h2 {
font-size: 20px;
color: #d9534f;
text-align: center;
/*text-align: center;设置文本居中。这里是设置了我的技能这个h2标题居中*/
padding: 18px 0 18px 0;
margin: 0 0 10px 0;
}
.section {
background-color: #fff;
padding: 20px;
margin-bottom: 10px;
border-radius: 8px;
/*border-radius: 8px;向类名为section的div设置边框圆角为8像素*/
}
li {
margin-bottom: 15px;
font-weight: bold;
/*font-weight: bold;定义字体的粗细，bold是定义粗体*/
}
</style>
</head>
<body>
<div class="section">
<h2><span>我的技能</span></h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>网站开发</li>
</ul>
</div>
</body>
</html>个人博客网站我的技能板块代码注意点：
我们先放个div在body中，等于在网页中放了一个容器，div本身就是容器，我们可以称之为盒模型。然后给div赋予了一个名为section的类，类是用来设置css的。然后在div里面添加了一个h2标题标签和ul/li这个无序标签。先标签选择器在css里面设置了html的内边距(padding)和外边距(margin)为0，然后用标签选择器设置了一些可继承的属性，然后分别给h2和li标签设置颜色字体大小，样式等等。
宗波尘客(www.zbck123.com)宗九尘博客 联系QQ：203239351
