随笔分类 -  Css

CSS流式布局 仿京东
摘要：个人自学demo。 效果图： 地址：https://files-cdn.cnblogs.com/files/y112102/JdH5.7z 总结： 1：流式布局 宽度使用百分比。 2：默认样式 body { width: 100%; /* 最小最大宽度 */ min-width: 320px; ma 阅读全文
posted @ 2020-02-21 14:08 s_p 阅读(453) 评论(0) 推荐(0) 编辑
Flex 实现仿 携程网 手机端布局
摘要：个人自学，测试使用Demo，仅限制学习测试。最终效果图 附件下载地址：https://files-cdn.cnblogs.com/files/y112102/H5.7z 参考资料：pink老师Flex自学 附加： 2倍精灵图定位 1：下载Adobe Fireworks CS6 用Adobe Fire 阅读全文
posted @ 2020-02-20 15:47 s_p 阅读(726) 评论(0) 推荐(0) 编辑
css，js 学习记录
摘要：记录一些自己曾经阅读，值得收藏的网址 --（css3新特性) https://segmentfault.com/a/1190000010780991#articleHeader41 --CSS3 3D transform变换 大神博客 张鑫旭 https://www.zhangxinxu.com/w 阅读全文
posted @ 2019-07-27 10:52 s_p 阅读(182) 评论(0) 推荐(0) 编辑
CSS工作记录
摘要：1：行内元素 设置背景图片(假设 给span) /*span 标签加背景图片 需要设置快级元素 定义高度宽度，当高度宽度很小的时候 需要设置背景图片大小*/ 待续 阅读全文
posted @ 2019-07-06 11:33 s_p 阅读(162) 评论(0) 推荐(0) 编辑
css悬浮提示框
摘要：效果图： code： 阅读全文
posted @ 2019-01-11 11:12 s_p 阅读(5361) 评论(0) 推荐(1) 编辑
css3 进度条
摘要：来源：参考 bootstrap 效果图： 、 code： 知识点：animation ，transition 阅读全文
posted @ 2019-01-11 11:01 s_p 阅读(220) 评论(0) 推荐(0) 编辑
CSS 实现滚动进度条效果
摘要：参考：https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言：细化总结。参考的文章作者已经写的很详细了。这里在从初学者 补充，也对自己的学习的过程补充记录（图片比较多）。 1:滚动条效 (图来源于第3方)。 第一眼看到 阅读全文
posted @ 2019-01-11 10:53 s_p 阅读(724) 评论(0) 推荐(0) 编辑
CSS3 media 入门
摘要：css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式。而流式布局 则才算是响应式布局。 css3 media 语法： 在这之前一直对媒体查询有两个关键词min-width和max-width,模糊今天特意梳理下。 width： demo: body默认红色 阅读全文
posted @ 2016-08-11 10:07 s_p 阅读(843) 评论(0) 推荐(0) 编辑
纯 CSS 绘制图形（心形、六边形等）
摘要：<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> div { width: 50px; height: 50px; background-color: red; margin: 5px; text 阅读全文
posted @ 2016-02-22 10:42 s_p 阅读(872) 评论(0) 推荐(0) 编辑
css 定位以及文字超长省略
摘要：定位： 文字隐藏： 强制不换行white-space:nowrap;自动换行word-wrap: break-word; word-break: normal; 强制英文单词断行word-break:break-all; 电子狗table td：换行例子 word-break: break-all; 阅读全文
posted @ 2012-12-21 17:13 s_p 阅读(477) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示