仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1016|回复: 9

[DIV+CSS] CSS教程之CSS伪元素before和after制造时髦核心图相框

[复制链接]
逍遥一派 该用户已被删除
发表于 2015-1-15 22:52:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
结构清晰,容易被搜索引擎搜索到,天生优化了seo

破洛洛文章简介:CSS伪元素before、after妙用:制造时髦核心图相框
在css标签中有如许子的标签div:before、div:after,关于before、after来讲有部分人是相称生疏的,那末这两个标签是甚么呢?有甚么用途?
:befor、:after是CSS的伪元素,甚么是伪元素呢?伪元素用于向某些选择器设置特别效果。
我们用CSS手册能够查询到其基础的用法:


  • E:before/E::before设置在工具前(根据工具树的逻辑布局)产生的内容。用来和content属性一同利用
  • E:after/E::after设置在工具后(根据工具树的逻辑布局)产生的内容。用来和content属性一同利用
  • Ie6-7不撑持
既然说到了before、after,那末我们也要也许的懂得下content,content用来和:after及:before伪元素一同利用,在工具前或后显现内容。基础的用法以下:
  1. div:after{content:恣意字符串;}
复制代码
如今我们也许晓得before和after的也许用法了,那末我们就能够在元素的内容之前大概以后拔出新内容。而拔出的内容我们也能够用css款式来加以把持和丑化。大概在寻常中如许子的标签用途不年夜,可是存期近是真谛,哈哈,一定有他的妙用的地方,明天就来看看使用before和after制造的一个创意的时髦核心图相框,今后制造这类边框线的时分我们能够完整丢弃图片的做法,并且做出来的十分的优美。
制造思绪和办法:

1、在图片层加多一层div,设置1像素的边框线,边框线有高低摆布四条边框,而我们想要的只是每两条边框线构成的相似小三角形的外形,那末我们只需把四条边框线的两头部分往失落,那不就完成了我们的效果。那我们应当怎样把四条边框线两头部分往失落?大概用甚么器材把他挡住,不让他显现出来?办理举措就是,我们晓得before和after伪元素能够在元素之前大概以后增加新的内容,那我们就使用这两个伪元从来挡住四条边框线的两头部分。
2、我们先往失落摆布双方的边框线,在边框层,使用before伪元素,利用css款式的定位,设置红色边框,为何要红色的边框呢?由于要把之前的摆布边框两头部分遮失落,色彩设置成和背景致(本例的背景为红色背景)分歧,如许子看起来就相称于两头部分被裁剪失落了。
3、我们持续祷告上线两条边框线,办法同上,使用after伪元素,利用css款式的定位,设置为红色边框,遮失落高低边框线的两头部分。如许子一来,基础的外形就呈现了
4、丑化步骤,调剂我们的细节,边框线调剂为虚线。

懂得了基础的思绪和办法,是否是很复杂呢?那我们就入手下手下手写代码吧。
HTML代码:
  1. <divclass="content"><ul><li><ahref="http://www.jiawin.com"target="_blank"></p></a></li><li><ahref="http://www.jiawin.com"target="_blank"></p></a></li></ul></div>
复制代码
CSS款式代码
  1. .content{width:788px;margin:auto;height:auto;overflow:hidden;padding:30px;}.contentulli{float:left;height:176px;border-right:1pxsolid#DDDDDD;position:relative;padding:10px;}.focus{background:rgba(250,250,250,0.25);width:174px;height:174px;border:1pxdashed#666;position:absolute;left:10px;top:10px;display:none;}.focus:before{width:174px;height:134px;border-left:1pxsolid#fff;border-right:1pxsolid#fff;content:;position:absolute;left:-1px;top:20px;}.focus:after{width:134px;height:174px;border-top:1pxsolid#fff;border-bottom:1pxsolid#fff;content:;position:absolute;top:-1px;left:20px;}.contentulli:hover.focus{display:block;}#noborder{border-right:0none;}
复制代码
经由过程这个例子是否是很便利的把这个效果做出来了呢?并且看看我们的代码,是否是很简便呢!哈哈……也许另有更好的办法来完成,我们能够一同切磋。我团体感到实在div+css是很好的一门很简单手上可是功效性很强的手艺,并且他很好玩很风趣。使用你的奇思妙想,你能够做出各类意想不到的效果。等候你的作品哦。
</p>
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站。
深爱那片海 该用户已被删除
发表于 2015-1-17 19:15:45 | 显示全部楼层
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
admin 该用户已被删除
发表于 2015-1-17 19:15:45 | 显示全部楼层
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
柔情似水 该用户已被删除
发表于 2015-1-26 21:51:16 | 显示全部楼层
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
若天明 该用户已被删除
发表于 2015-2-5 04:00:33 | 显示全部楼层
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
只想知道 该用户已被删除
发表于 2015-2-11 04:57:17 | 显示全部楼层
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
乐观 该用户已被删除
发表于 2015-3-1 22:05:58 | 显示全部楼层
可以使用 CSS 检查工具进行设计。
莫相离 该用户已被删除
发表于 2015-3-11 02:27:54 | 显示全部楼层
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
分手快乐 该用户已被删除
发表于 2015-3-17 20:55:06 | 显示全部楼层
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
简单生活 该用户已被删除
发表于 2015-3-25 04:08:46 | 显示全部楼层
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-3-29 19:24

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表