随笔分类 - HTML+CSS页面练习
摘要:第八部分——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
阅读全文