通过css在网页中实现容器内元素横向滚动 PetitQ HTML/CSS 2022-9-26 770 0 0 网页中元素默认是纵向排列的,我们可以通过css属性将容器内子元素实现横向排列,超出隐藏,并可以横向滚动。 基础结构如下: 1 2 3 4 5 . . . item可以根据实际需要增加更多 横向浮动,隐藏,滑动相关css如下: .it…
通过css在网页中实现容器内元素横向滚动 PetitQ HTML/CSS 2022-9-26 770 0 0 网页中元素默认是纵向排列的,我们可以通过css属性将容器内子元素实现横向排列,超出隐藏,并可以横向滚动。 基础结构如下: 1 2 3 4 5 . . . item可以根据实际需要增加更多 横向浮动,隐藏,滑动相关css如下: .it…
Flexbox 可视化信息图 PetitQ HTML/CSS 2021-12-07 761 0 0 这是一张 CSS Flexbox 属性可视化信息图,有助于前端工程师更好的了解Flexbox的各个参数属性的用法,Flexbox在网页的布局上非常实用,这是一个重要的WEB布局属性,必修要学会。如果要下载这个图,直接把图像另存为就可…
Flexbox 可视化信息图 PetitQ HTML/CSS 2021-12-07 761 0 0 这是一张 CSS Flexbox 属性可视化信息图,有助于前端工程师更好的了解Flexbox的各个参数属性的用法,Flexbox在网页的布局上非常实用,这是一个重要的WEB布局属性,必修要学会。如果要下载这个图,直接把图像另存为就可…
CSS 截取图片只显示部分图片 PetitQ HTML/CSS 2021-11-29 761 0 0 页面中需要在某个位置显示固定长宽的正方形图片,图片中有接近正方形比例但不是正方形,用PHP生成裁剪后的缩略图显然不合适,经过研究发现用CSS可以完美切割图片,经过测试Chrome,FF,IE6-9没问题。css有一个clip属性可以…
CSS 截取图片只显示部分图片 PetitQ HTML/CSS 2021-11-29 761 0 0 页面中需要在某个位置显示固定长宽的正方形图片,图片中有接近正方形比例但不是正方形,用PHP生成裁剪后的缩略图显然不合适,经过研究发现用CSS可以完美切割图片,经过测试Chrome,FF,IE6-9没问题。css有一个clip属性可以…
Zepto Lazy 实现CSS背景图像实现延迟加载jQuery插件 PetitQ HTML/CSS 2020-9-14 757 0 0 Zepto Lazy 实现CSS背景图像实现延迟加载jQuery插件,我们知道大部网站使用的图片延迟加载只对img标签中src属性的图片起作用,对CSS背景(background-image)中的图片无效,例如: 上面的写法一般应该…
Zepto Lazy 实现CSS背景图像实现延迟加载jQuery插件 PetitQ HTML/CSS 2020-9-14 757 0 0 Zepto Lazy 实现CSS背景图像实现延迟加载jQuery插件,我们知道大部网站使用的图片延迟加载只对img标签中src属性的图片起作用,对CSS背景(background-image)中的图片无效,例如: 上面的写法一般应该…
Javascript 实现虚线边框旋转效果 PetitQ HTML/CSS 2021-9-18 750 0 0 看到百度ueditor编辑器网站首页,底部有一个滚动虚框的效果(原谅我不会做gif 图),如图: 就去看了一下,开始以为是CSS,后来打开F12 ,哦原来是js,那就尝试写一下吧。 HTML 部分 内容区 CSS 部分: .box{…
Javascript 实现虚线边框旋转效果 PetitQ HTML/CSS 2021-9-18 750 0 0 看到百度ueditor编辑器网站首页,底部有一个滚动虚框的效果(原谅我不会做gif 图),如图: 就去看了一下,开始以为是CSS,后来打开F12 ,哦原来是js,那就尝试写一下吧。 HTML 部分 内容区 CSS 部分: .box{…
如何给网页表单添加滑动验证 PetitQ HTML/CSS 2023-3-31 746 0 0 为了防止网站上的表单被恶意的提交垃圾信息,我们会给网页表单添加验证功能。常见的验证就是验证码验证,之外还有滑动验证。通过滑块的滑动来进行表单验证。 如何给网页表单添加这种滑动验证功能呢?下面介绍一下方法。 第一步:制作表单框,使用以…
如何给网页表单添加滑动验证 PetitQ HTML/CSS 2023-3-31 746 0 0 为了防止网站上的表单被恶意的提交垃圾信息,我们会给网页表单添加验证功能。常见的验证就是验证码验证,之外还有滑动验证。通过滑块的滑动来进行表单验证。 如何给网页表单添加这种滑动验证功能呢?下面介绍一下方法。 第一步:制作表单框,使用以…
浅谈 CSS3 盒布局与弹性盒布局 PetitQ HTML/CSS 2022-6-11 737 0 0 在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 section 什么是CSS3 盒…
浅谈 CSS3 盒布局与弹性盒布局 PetitQ HTML/CSS 2022-6-11 737 0 0 在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 section 什么是CSS3 盒…
企业网站上添加位置地图的方法 PetitQ HTML/CSS 2021-12-02 720 0 0 现在很多企业网站上都有位置地图功能,方便用户查看公司的位置。让企业网站更有信任感。效果如下图: 网站上添加位置地图功能,一般是使用百度地图API来做的。下面介绍一下企业网站上添加位置地图的具体方法。 第一步 引入百度地图API,将下…
企业网站上添加位置地图的方法 PetitQ HTML/CSS 2021-12-02 720 0 0 现在很多企业网站上都有位置地图功能,方便用户查看公司的位置。让企业网站更有信任感。效果如下图: 网站上添加位置地图功能,一般是使用百度地图API来做的。下面介绍一下企业网站上添加位置地图的具体方法。 第一步 引入百度地图API,将下…
优化阅读体验网站全局字体CSS最佳写法 PetitQ HTML/CSS 2021-12-07 714 0 0 英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 Mac OS 两个系统,这两个系统的默认字体是不同的…
优化阅读体验网站全局字体CSS最佳写法 PetitQ HTML/CSS 2021-12-07 714 0 0 英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 Mac OS 两个系统,这两个系统的默认字体是不同的…
伪类与伪元素区别 PetitQ HTML/CSS 2021-12-04 700 0 0 在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before,:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解。 …
伪类与伪元素区别 PetitQ HTML/CSS 2021-12-04 700 0 0 在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before,:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解。 …
响应式网页中如何插入响应式图片 PetitQ HTML/CSS 2021-12-02 682 0 0 现下流行的网页基本都是基于响应式布局设计(responsive web design)的,本文讲解在响应式布局的网页中如何正确的插入图片使其能自适应屏幕大小,同时还能获得最佳的加载性能与显示效果,这种方式叫做”响应式图片”(resp…
响应式网页中如何插入响应式图片 PetitQ HTML/CSS 2021-12-02 682 0 0 现下流行的网页基本都是基于响应式布局设计(responsive web design)的,本文讲解在响应式布局的网页中如何正确的插入图片使其能自适应屏幕大小,同时还能获得最佳的加载性能与显示效果,这种方式叫做”响应式图片”(resp…
解决absolute绝对定位高度塌陷无法撑开父元素 PetitQ HTML/CSS 2023-6-10 681 0 1 网站上某个元素设置了absolute绝对定位后,它的高度是不会影响父元素的高度的。这在某些情况下会影响布局。怎么解决这种absolute绝对定位高度问题呢?让absolute绝对定位的高度自动添加到父元素上。 解决absolute绝…
解决absolute绝对定位高度塌陷无法撑开父元素 PetitQ HTML/CSS 2023-6-10 681 0 1 网站上某个元素设置了absolute绝对定位后,它的高度是不会影响父元素的高度的。这在某些情况下会影响布局。怎么解决这种absolute绝对定位高度问题呢?让absolute绝对定位的高度自动添加到父元素上。 解决absolute绝…