专注优质Wordpress企业网站搭建与优化

一花一世界：纯CSS实现图文呼应链接



纯CSS实现图文呼应链接- 西米CC

原文地址：Remote Linking

翻译整理：西米CC

所谓的图文呼应链接，就是指在一组超链接中，每个链接都有图片和文字两种元素，当鼠标经过任何一个元素时，两种元素都会在外观样式上产生变化，好处就是我们可以利用灵活的布局模式达到图文并茂的链接描述方式：

>>> 浏览本教程效果示例页面

汇聚博客资源,点亮博客价值 - 西米CC

基本思路

其实里面没有什么深奥的东西，在HTML中我们只要稍微组织一下超链接内的元素结构：

  1. <a HREF="#" id="ximicc">
  2. <span CLASS="name">Title</span>
  3. Description...
  4. <img SRC="kyogo_0.jpg" ALT="kyogo" />
  5. </a>

可以看到在链接对象中我们依次加入了文本标题、文本描述以及图片等元素，其中有些元素我们指定了ID名或者类样式名，并把文本标题放置在了SPAN容器中。本例中我们要做四个这样的链接，它们的结构是一模一样的，只要复制四个把里面的内容替换掉就行了。

CSS代码

首先：

  1. .people{
  2. position: relative;
  3. width:600px;
  4. }

把外围容器设置为相对定位，因为之后我们要对四张图片设置绝对定位。事实上本例中的关键就在于图片的绝对定位上，当然首先还是要设置一些基本的样式：

  1. a{
  2. text-decoration: none;
  3. color: #222;
  4. display: block;
  5. margin: 0 0 0 270px;
  6. outline: none;
  7. padding: 5px;
  8. }
  9.  
  10. a:hover{
  11. background: #ffefcd;
  12. }

这里涉及的属性很基础，就不详细解释了，其中空出270像素的左边界是用于容纳图片的，而且注意本例中一行要放两张图，它们之间有一些间隔，所以这里左边界的数值要比两张图片宽度之和还要大一点。接下来看看关于图片的样式定义：

  1. a img {
  2. border: 1px solid #ccc;
  3. display: block;
  4. position: absolute;
  5. }
  6. a:hover img {
  7. border: 5px solid #222;
  8. margin: -4px;
  9. }

默认状态下我们为图片设置了绝对定位和边框属性，当鼠标经过图像时，原本1像素的边框变成5像素，而第二条CSS中的4像素负值边界正是为了加粗的边框腾出空间的。接下来为链接中的文本标题定义一些颜色和粗细上的变化：

  1. a .name {
  2. font: 18px Georgia, Serif;
  3. }
  4.  
  5. a:hover .name {
  6. color: #900;
  7. font-weight: bold;
  8. }

最后就是利用绝对定位来排列四张图片的位置，Top和Left两个属性很好理解，重要的是它们的四组数值要体现规律，使四张图片在一个正方形区域分别占据四个角落，并在水平和垂直方向精确对齐：

  1. #toby img {
  2. top: 0;
  3. left: 0;
  4. }
  5. #tom img {
  6. top: 0;
  7. left: 134px;
  8. }
  9. #gail img {
  10. top: 134px;
  11. left: 0;
  12. }
  13. #padma img {
  14. top: 134px;
  15. left: 134px;
  16. }

>>> [ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment