千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:哈尔滨千锋IT培训  >  学员心声  >  千锋哈尔滨Web学员分享前端编程实战经验

千锋哈尔滨Web学员分享前端编程实战经验

来源:千锋教育
发布人:前端学员
时间:2019-01-15 16:09:42

  为了给HTML文档优化,减少空标签的使用,使布局看起来更加的完善,使用:before;:after等伪元素是非常有必要的,配合伪元素的content和background来写效果,并使用css3进行修饰,能够写出许多非常精美的效果。

  1、string

  使用引号包一段字符串,将会向元素内容中添加字符串。如:a:after{content:""}

哈尔滨Web学员

  2.清除浮动

  清除浮动方法有多种,现在最常用的就是下面这种方法,仅需要以下样式即可在元素尾部自动清除浮动。

  :after{content“”;display:block;clear:both;}

  3、模拟float:center的效果

  float没有center这个取值,但是可以通过伪类来模拟实现。

  这个效果实现很有意思,左右通过::before float各自留出一半图片的位置,再把图片绝对定位上去。

  4、给blockquote添加引号

  经常用到给blockquote 引用段添加巨大的引号作为背景,可以用 ::before 来代替 background。好处是即可以给背景留下空间,还可以直接使用文字而非图片。

  在css3中能实现许多本来需要切图的效果,锻炼css3的技巧会显得尤为重要。

  接下来,就举例来说明css3写三角形(为了好区分姑且按方向区别)。

  (1)上三角形:

  border: 16px solid transparent;

  border-bottom: 16px solid #f00;

  width: 0;

  height: 0;

  (2)下三角形:

  border: 16px solid transparent;

  border-top: 16px solid #f00;

  width: 0;

  height: 0;

  (3)右三角形:

  border: 16px solid transparent;

  border-left: 16px solid #f00;

  width: 0;

  height: 0;

  (4)左三角形:

  border: 16px solid transparent;

  border-right: 16px solid #f00;

  width: 0;

  height: 0;

  学习Web前端编程是一个漫长的过程,在千锋哈尔滨前端培训班学习到的知识能够帮助我们高薪就业。但是,想要在这条路上走下去,想要走的更加高远,还要继续努力,保持热情,保持对知识的渴求!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

最新文章NEW

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>