摘要: 1、HTML代码命名规范及格式规范 1.1 HTML代码所有的标签名和属性应该都为小写,属性值应该使用双引号闭合。 1.2 给所有的关键元素定义元素的id和class,便于和CSS、JavaScript交互。id和class的命名一定要规范。 推荐:根据语义和DOM树的层级关系来定义合适的名称。名称 阅读全文
posted @ 2017-10-11 16:22 新功夫涂鸦 阅读(1580) 评论(0) 推荐(1) 编辑
摘要: 第八部分——Team 简要介绍: 本部分有一个不一样的地方:图片是圆形的。通过设置<img>的border-radius属性为50%,来达到此效果。 页面效果: HTML代码: CSS代码: Team And Contact部分的CSS代码: Contact部分的CSS代码: 阅读全文
posted @ 2017-09-28 16:33 新功夫涂鸦 阅读(270) 评论(0) 推荐(0) 编辑
摘要: 第九部分——Contact And Footer 简要介绍: 本部分包括两个板块。一个用<form>元素实现的联系页面,另一个是页脚。 页面效果: Contact: Footer: HTML代码: Contact部分的代码: Footer部分的代码: CSS代码: Team and Contact的 阅读全文
posted @ 2017-09-28 16:25 新功夫涂鸦 阅读(192) 评论(0) 推荐(0) 编辑
摘要: 第七部分——news 简要介绍: 本部分利用<article>标签实现了一种卡片式效果。 页面效果: HTML代码: CSS代码: 总结: 本部分遇到两个问题: 1、图片的宽度会超过其父元素的宽度。 2、时间戳会和h2在同一行,使得h2不够宽度放置会变成两行。 解决: 1、设置图片的宽度为100%, 阅读全文
posted @ 2017-09-27 16:15 新功夫涂鸦 阅读(317) 评论(0) 推荐(0) 编辑
摘要: 第六部分——testimonials 简要介绍: 本部分运用了一个新HTML标签,<blockquote>。 页面效果: HTML代码: CSS代码: 总结: display:table-cell; “table-cell”表示元素作为一个表格单元格显示(类似 <td> 和 <th>)。 <bloc 阅读全文
posted @ 2017-09-26 20:44 新功夫涂鸦 阅读(192) 评论(0) 推荐(0) 编辑
摘要: 第五部分——Service 简要介绍: 页面效果: HTML代码: CSS代码: 阅读全文
posted @ 2017-09-26 11:28 新功夫涂鸦 阅读(254) 评论(0) 推荐(0) 编辑
摘要: 第四部分——Portfolio 简要介绍: 本部分内容看着比较多,其实它的许多地方是一样的。所以只需要设置好一个类的样式,就可以运用到它们所有的上面。 页面效果: HTML代码: CSS代码: 总结: 本部分没有什么难点,就是调整样式比较繁琐。 遇到两个自己不熟悉的属性: text-transfor 阅读全文
posted @ 2017-09-25 23:50 新功夫涂鸦 阅读(602) 评论(0) 推荐(0) 编辑
摘要: 第三部分——feature 简要介绍: 这部分比较简单。主要用<p>元素写了两句话。用一张图片设置背景。 页面效果: HTML代码: CSS代码: 阅读全文
posted @ 2017-09-24 19:38 新功夫涂鸦 阅读(212) 评论(0) 推荐(0) 编辑
摘要: 第二部分——headerwrap 简要介绍: 本部分有两个标题<h1><h2>,两个<input>元素,还有无序列表<ul>和链接<a>实现的5个链接。 页面效果: HTML代码: CSS代码: 总结: 这部分的实现过程中没有遇到大问题。 阅读全文
posted @ 2017-09-24 19:03 新功夫涂鸦 阅读(314) 评论(0) 推荐(0) 编辑
摘要: 第一部分navbar-wrapper 简要介绍: 本部分为导航部分,会固定在浏览器页面的顶部,不会随文档的滚动而移动。运用无序列表中放入链接(<ul><li><a></a></li></ul>)的方式来实现导航。当鼠标放在该元素上面时,其样式会发生变化。 页面效果: 字体的引入: HTML代码: C 阅读全文
posted @ 2017-09-24 18:18 新功夫涂鸦 阅读(760) 评论(0) 推荐(0) 编辑