发表于: 2018-11-29 20:48:38

2 614


编辑日报

今天完成的事:

今天开始做任务7的第二个页面了,遇到的第一个问题就是那个对话框的样式,之前也没接触过,就在网上查了下:

拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。

我们只需要其中的一个三角形,那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色,就能模拟出一个三角来,推荐将其他三边颜色设置为透明,即color的值为transparent,如果其他三边颜色跟页面背景一样,虽然视觉上只能看到一个三角,但背景颜色一旦改变,其他三边颜色也要随之改变。

1
#test{ width:0height:0border-width:75pxborder-style:solidborder-color:#09F transparent transparentfont-size:0line-height:0;}

通过实验发现把border-style设置为dashed后,IE6下其他三边就能透明了!

1
#test{ width:0height:0border-width:75pxborder-style:solid dashed dashedborder-color:#09F transparent transparentfont-size:0line-height:0;}

 到这一步我们已经成功的模拟出了一个小三角,下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框,然后把小三角定位到矩形框上。先来写出HTML结构:

1
2
3
4
<div class="tag">
      <em></em>   
      CSS气泡框实现
</div>

CSS样式:

1
2
.tag{ width:300pxheight:100pxborder:5px solid #09Fposition:relative;}
.tag em{display:blockborder-width:20pxposition:absolutebottom:-40pxleft:100px;border-style:solid dashed dashedborder-color:#09F transparent transparent;font-size:0line-height:0;}

 效果如下:

现在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:


在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:

1
2
3
4
5
<div class="tag">
      <em></em>   
      <span></span>
      CSS气泡框实现
</div>

CSS样式修改为:

1
2
3
.tag{ width:300pxheight:100pxborder:5px solid #09Fposition:relativebackground-color:#FFF;}
.tag em{display:blockborder-width:20pxposition:absolutebottom:-40pxleft:100px;border-style:solid dashed dashedborder-color:#09F transparent transparent;font-size:0line-height:0;}
.tag span{display:blockborder-width:20pxposition:absolutebottom:-33pxleft:100px;border-style:solid dashed dashedborder-color:#FFF transparent transparent;font-size:0line-height:0;}

最终效果如下所示:

然后自己根据任务的实际情况修改了下,写出来了。因为bootstrap实在看的有点心塞,心态有点崩,就先写了第三个页面,目前还没遇到什么问题。

明天的任务:

明天因为个人原因,请假一天

今天遇到的问题:

还是那个bootstrap,实在没看到

收获:

一点一滴的成长

内容...


返回列表 返回列表
评论

    分享到