随笔分类 -  CSS

1 2 下一页
CSS的几个核心概念（复盘大纲~）
摘要：点击链接进入相应网页~ 1 CSS基本语法 2 CSS引用方式 3 CSS注释： /* 注释内容 */ （html注释：<!-- 注释内容 -->） 4 选择器 5 CSS书写规范 6 CSS字体和文本样式 字体样式 文本样式 7 盒子模型 8 CSS背景，渐变和列表 9 浮动（float） 10 阅读全文
posted @ 2020-02-06 15:25 阿江是个程序猿 阅读(269) 评论(0) 推荐(0)
CSS3过渡
摘要：什么是过渡（Transition） Transition属性 1 transition-property 检索或设置对象中的参与过渡的属性。 2 transition-duration 3 transition-timing-function linear匀速 ease|ease-in结束比较生硬 阅读全文
posted @ 2020-02-06 11:19 阿江是个程序猿 阅读(143) 评论(0) 推荐(0)
CSS经典布局
摘要：版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、100 阅读全文
posted @ 2020-02-05 23:18 阿江是个程序猿 阅读(321) 评论(0) 推荐(0)
CSS3转换
摘要：1 Transform 2 2D转换 1）rotate() 旋转 2）translate() 平移 只写一个参数，第二个参数默认为0 要写具体的值（相对or绝对单位长度，或百分比）。可以为负值。 3）scale() 缩放 只写一个参数，第二个参数默认与第一个相同。保证图片等比例缩放。 4)skew( 阅读全文
posted @ 2020-02-05 18:59 阿江是个程序猿 阅读(177) 评论(0) 推荐(0)
CSS3边框和圆角
摘要：回顾CSS边框属性： border-width border-color border-style 具体见CSS盒模型及应用。 CSS3圆角 border-radius 一个最多可以指定四个border-*-*-radius属性的复合属性，这个属性允许我们为元素添加圆角边框。 语法： 兼容性： 补充 阅读全文
posted @ 2020-02-04 16:34 阿江是个程序猿 阅读(188) 评论(0) 推荐(0)
Photoshop基本操作
摘要：PS 工具是我们使用频率比较高的软件之一， 我们学习PS目的不是为了设计海报做电商和UI的，而是要求： 会简单的抠图 会简单的修改PSD效果图 熟练的切图 能和网站美工美眉有共同话题。。。。。 Photoshop基本使用 PS界面组成： 菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、 阅读全文
posted @ 2019-10-23 16:10 阿江是个程序猿 阅读(1109) 评论(0) 推荐(0)
CSS3——伸缩布局及应用
摘要：CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右，侧轴默认从上到下 主 阅读全文
posted @ 2019-10-22 11:23 阿江是个程序猿 阅读(286) 评论(0) 推荐(0)
CSS3动画
摘要：动画（animation） animation属性 1 animation-name 2 animation-duration 3 animation-timing-function 4 animation-delay 5 animation-iteration-count 6 animation- 阅读全文
posted @ 2019-10-22 11:20 阿江是个程序猿 阅读(159) 评论(0) 推荐(0)
CSS3——2D变形和3D变形
摘要：2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform transform 变换 变形的意思 阅读全文
posted @ 2019-10-22 11:15 阿江是个程序猿 阅读(558) 评论(0) 推荐(0)
CSS W3C统一验证工具
摘要：CssStats 是一个在线的 CSS 代码分析工具 如果你想要更全面的，这个神奇，你值得拥有： W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆ 因为它可以检测本地文件哦！！ 阅读全文
posted @ 2019-10-21 17:37 阿江是个程序猿 阅读(592) 评论(0) 推荐(0)
CSS压缩
摘要：通过W3C 统一验证工具的检测没有错误后，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。 w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢 还可以去站长之家进行 阅读全文
posted @ 2019-10-21 17:37 阿江是个程序猿 阅读(143) 评论(0) 推荐(0)
CSS——BFC
摘要：BFC(块级格式化上下文) BFC(Block formatting context) 直译为"块级格式化上下文"。 元素的显示模式 我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 哪些元素会具有BFC的条件 不是所有的元素模式 阅读全文
posted @ 2019-10-21 17:34 阿江是个程序猿 阅读(206) 评论(0) 推荐(0)
CSS3——过渡
摘要：过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画（ 阅读全文
posted @ 2019-10-21 15:04 阿江是个程序猿 阅读(433) 评论(0) 推荐(0)
CSS——优雅降级和渐进增强
摘要：什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？ 渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验 阅读全文
posted @ 2019-10-21 14:59 阿江是个程序猿 阅读(729) 评论(0) 推荐(0)
CSS——垂直居中
摘要：vertical-align 垂直对齐 以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto; 以前我们还讲过让文字居中对齐，是 text-align: center; 但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。 vertical-alig 阅读全文
posted @ 2019-10-20 09:45 阿江是个程序猿 阅读(154) 评论(0) 推荐(0)
CSS——用户界面样式
摘要：所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 鼠标放我身上查看效果哦： 尽量不要用hand 阅读全文
posted @ 2019-10-19 15:11 阿江是个程序猿 阅读(388) 评论(0) 推荐(0)
CSS——before和after伪元素
摘要：之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪 阅读全文
posted @ 2019-10-18 14:21 阿江是个程序猿 阅读(165) 评论(0) 推荐(0)
CSS——滑动门技术及应用
摘要：先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构 阅读全文
posted @ 2019-10-17 16:39 阿江是个程序猿 阅读(490) 评论(0) 推荐(0)
CSS案例3（在线教育网站）
摘要：案例练习目的是总结以前的css和html 还有ps的使用。 制作步骤： 头部通栏： 共四部分 logo、导航、搜索栏、个人中心 前两个左浮动，后两个右浮动 banner部分： 背景图片+左侧侧边导航栏+右侧我的课表模块 text-align: center; /* 文字水平居中 */ font-we 阅读全文
posted @ 2019-10-16 19:56 阿江是个程序猿 阅读(268) 评论(0) 推荐(0)
CSS——背景渐变
摘要：在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。 兼容性问题很严重，我们这里只讲解线性渐变 语法格式： background:-webkit-linear-gra 阅读全文
posted @ 2019-10-16 19:09 阿江是个程序猿 阅读(274) 评论(0) 推荐(0)

1 2 下一页