发表于: 2018-11-29 20:48:38
2 617
编辑日报
今天完成的事:
今天开始做任务7的第二个页面了,遇到的第一个问题就是那个对话框的样式,之前也没接触过,就在网上查了下:
拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。
我们只需要其中的一个三角形,那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色,就能模拟出一个三角来,推荐将其他三边颜色设置为透明,即color的值为transparent,如果其他三边颜色跟页面背景一样,虽然视觉上只能看到一个三角,但背景颜色一旦改变,其他三边颜色也要随之改变。
1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
通过实验发现把border-style设置为dashed后,IE6下其他三边就能透明了!
1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
到这一步我们已经成功的模拟出了一个小三角,下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框,然后把小三角定位到矩形框上。先来写出HTML结构:
1 2 3 4 | < div class="tag"> < em ></ em > CSS气泡框实现 </ div > |
CSS样式:
1 2 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ;} .tag em{ display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
效果如下:
现在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:
在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:
1 2 3 4 5 | < div class="tag"> < em ></ em > < span ></ span > CSS气泡框实现 </ div > |
CSS样式修改为:
1 2 3 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ; background-color : #FFF ;} .tag em{ display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} .tag span{ display : block ; border-width : 20px ; position : absolute ; bottom : -33px ; left : 100px ; border-style : solid dashed dashed ; border-color : #FFF transparent transparent ; font-size : 0 ; line-height : 0 ;} |
最终效果如下所示:
然后自己根据任务的实际情况修改了下,写出来了。因为bootstrap实在看的有点心塞,心态有点崩,就先写了第三个页面,目前还没遇到什么问题。
明天的任务:
明天因为个人原因,请假一天
今天遇到的问题:
还是那个bootstrap,实在没看到
收获:
一点一滴的成长
内容...
评论