1. 首页
  2. 网站建设
  3. 正文

网站制作教程:css3 属性大全

Css3属性比css 2强很多。增加了很多新的属性,今天重点介绍开发中会用到的css3属于。

1、 css3媒体查询,是开发自适应网站的必备。

常规写法:

@media (min-width: 700px) { 选择器 { 样式 } }

@media mediatype and | not | only (media feature) {}

2、 布局方式使用弹性盒子

写法:

Display:flex

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-flow: <flex-direction> || <flex-wrap>;

align-self: auto | flex-start | flex-end | center | baseline | stretch;

3、 伪类选择器

:(倍数)

3D转换:

①、移动 translate3d    ②、透视perspective    ③、旋转rotate3d   ④、3D呈现transfrom-style

备注:透视 perspective写在父元素上(近大远小)

3D呈现transform-style: preserve-3d; 写给父级

(animation)动画样式属性

定义动画@keyframes

动画属性animation

动画名称animation-name

时间周期animation-duration

速度曲线animation-timing-function

规定动画的速度曲线,默认是"ease"。匀速:linear

动画开始animation-delay

播放次数animation-iteration-count

逆向播放animation-direction

    延伸阅读

  • 外贸英文网站建设怎么做?

    1、规划和设计确定网站的目标、目标受众和关键信息。设计网站结构和页面布局,包括主页、产品展示页面、联系方式等。以纺织服装行业为例,考虑到时尚和审美特点,英文网站建设设计风格应该...

  • SEO套餐的生产与加工

    任何一件事情都可以独立分割成一个完整的体系,运用程序化和步骤化加工的方法实现快速无限复制和粘贴今天我们就来分解SEO套餐在“流水线”上的生产与加工:一、前端/页编人员二、内容编...

  • 2024网络营销怎么做?ai自媒体矩阵助力企业“降本增效”

    在2024年,随着人工智能技术的快速发展,网络营销正在经历着前所未有的变革。企业需要寻找新的营销方式来提高营销效果,降低营销成本。AI自媒体矩阵成为了企业“降本增效”的新选择。...

  • 整站seo套餐(seo大神报价方案)

    我们承诺一、按照搜索引擎排名规则,手工方式对网站关键词进行优化。二、合理的增加外链(拒绝黑帽);合理的更新站内文章,一切为了网站优化排名!三、承诺的时间内,未能将关键词优化至目...

  • 小红书笔记排名优化:让你的内容高效传播

    在这个信息爆炸的时代,小红书作为一个流行的社交平台,拥有庞大的用户群体。因此,优化你的小红书笔记排名,不仅能提升内容的可见性,还能有效增加用户的参与度和互动。但是,如何才能让你...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://lnbdc.com/article/11920.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();