新功夫涂鸦

摘要： 1、HTML代码命名规范及格式规范 1.1 HTML代码所有的标签名和属性应该都为小写，属性值应该使用双引号闭合。 1.2 给所有的关键元素定义元素的id和class，便于和CSS、JavaScript交互。id和class的命名一定要规范。 推荐：根据语义和DOM树的层级关系来定义合适的名称。名称 阅读全文

摘要： 第八部分——Team 简要介绍： 本部分有一个不一样的地方：图片是圆形的。通过设置<img>的border-radius属性为50%，来达到此效果。 页面效果： HTML代码： CSS代码： Team And Contact部分的CSS代码： Contact部分的CSS代码： 阅读全文

摘要： 第九部分——Contact And Footer 简要介绍： 本部分包括两个板块。一个用<form>元素实现的联系页面，另一个是页脚。 页面效果： Contact: Footer: HTML代码： Contact部分的代码: Footer部分的代码： CSS代码： Team and Contact的 阅读全文

摘要： 第七部分——news 简要介绍： 本部分利用<article>标签实现了一种卡片式效果。 页面效果： HTML代码： CSS代码： 总结： 本部分遇到两个问题： 1、图片的宽度会超过其父元素的宽度。 2、时间戳会和h2在同一行，使得h2不够宽度放置会变成两行。 解决： 1、设置图片的宽度为100%， 阅读全文

摘要： 第六部分——testimonials 简要介绍： 本部分运用了一个新HTML标签，<blockquote>。 页面效果： HTML代码： CSS代码： 总结： display:table-cell; “table-cell”表示元素作为一个表格单元格显示（类似 <td> 和 <th>）。 <bloc 阅读全文

摘要： 第五部分——Service 简要介绍： 页面效果： HTML代码： CSS代码： 阅读全文

摘要： 第四部分——Portfolio 简要介绍： 本部分内容看着比较多，其实它的许多地方是一样的。所以只需要设置好一个类的样式，就可以运用到它们所有的上面。 页面效果： HTML代码： CSS代码： 总结： 本部分没有什么难点，就是调整样式比较繁琐。 遇到两个自己不熟悉的属性： text-transfor 阅读全文

摘要： 第三部分——feature 简要介绍： 这部分比较简单。主要用<p>元素写了两句话。用一张图片设置背景。 页面效果： HTML代码： CSS代码： 阅读全文

摘要： 第二部分——headerwrap 简要介绍： 本部分有两个标题<h1><h2>，两个<input>元素，还有无序列表<ul>和链接<a>实现的5个链接。 页面效果： HTML代码： CSS代码： 总结： 这部分的实现过程中没有遇到大问题。 阅读全文

摘要： 第一部分navbar-wrapper 简要介绍： 本部分为导航部分，会固定在浏览器页面的顶部，不会随文档的滚动而移动。运用无序列表中放入链接（<ul><li><a></a></li></ul>）的方式来实现导航。当鼠标放在该元素上面时，其样式会发生变化。 页面效果： 字体的引入： HTML代码： C 阅读全文