最新消息:文章中包含代码时,请遵守代码高亮规范!

标签:CSS

如何清除浮动?【转载】

HTML+CSS Cindy 11个月前 (01-18) 480浏览 0评论

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。 关于清除浮动的四种方式: 方式一:使用ove...

为什么清除浮动?清除css浮动的三种方法【原创】

HTML+CSS 陈, 梦娟 11个月前 (01-18) 564浏览 0评论

一,我们为什么要浮动 为什么浮动,为什么要清除浮动,以及清除浮动的方法。在网页布局的时候有时需要元素并排显示,如果不选择浮动,那么那些块状元素就会一行一行显示,占用空间不说,用户体验也是极为不好的。 以下是没有浮动的元素代码 <di...

纯css自定义radio,checkbox样式,提高用户体验【原创】

HTML+CSS 陈, 梦娟 11个月前 (01-18) 578浏览 0评论

在页面编写的时候我们需要自定义radio样式,每个浏览器的渲染效果不一样,而且样式是系统默认的,不太美观,所以为了提高用户体验以及美观,我们需要对radio,chenckbox样式进行美化。 这里只选取radio进行样式编写,checkbox以此类推...

inline-block与float浮动的区别【原创】

HTML+CSS 陈, 梦娟 11个月前 (01-18) 590浏览 0评论

在给网页布局的时候有多种方法,采用float,display,position.其中inline-block也可以实现网页布局,这里就说一下float和inline-block布局的差异。 通常情况下小编是喜欢inline-block。而float浮...

用div模拟select下拉菜单【原创】

HTML+CSS Cindy 12个月前 (12-19) 624浏览 0评论

select下拉菜单在不同版本的浏览器下显示的样式会有所不同,特别是在ie低版本中,select自带的样式去不掉。以下是用div来模拟select下拉菜单具体代码: <!DOCTYPE html> <html lang=&qu...

巧妙运用css让弹窗居中【原创】

HTML+CSS Cindy 12个月前 (12-19) 715浏览 0评论

在开发项目时,有时候需要登录界面或者弹窗要始终居中在电脑屏幕中间,由于屏幕大小不确定,不用js,仅用margin-top和margin-left难以使弹窗刚好显示在屏幕中间。 以下是实现弹窗居中具体代码,大家可以参考一下。 弹窗样式代码: .ma...

js+css实现全屏【转载】

HTML+CSS Cindy 1年前 (2017-12-17) 550浏览 0评论

在html5中,全屏方法可以适用于很多html 元素,不仅仅是video。以下是实现全屏具体代码: css样式: *{ padding: 0px; margin: 0px; } body div.videobox{ width: 400px; hei...

解决vertical-align垂直居中无效bug【原创】

HTML+CSS Cindy 1年前 (2017-10-18) 895浏览 0评论

在写页面布局的时候,有时候需要元素垂直居中显示,直接设置vertical-align: middle;会没有效果。加上display: table-cell;属性,让元素作为一个表格单元格显示(类似 <td> 和 <th>),...

利用css如何控制图片高度根据自适应宽度进行调整【原创】

HTML+CSS Aimee 1年前 (2017-10-18) 1389浏览 0评论

在手机页面中,图片的尺寸需要根据手机的屏幕大小自适应宽高,当使用js获取图片宽度赋予图片高度时,最初进入手机页面时,图片高度会发生明显的变化,用户体验不好。因此,使用css控制图片的高度是一个更好的选择。 以正方形图片为例: html代码如下: &l...

利用css实现文字或图像的旋转,缩放,倾斜和移动效果【转载】

HTML+CSS Aimee 1年前 (2017-10-15) 818浏览 0评论

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意...

如何利用纯css绘制三角形【转载】

HTML+CSS Aimee 1年前 (2017-10-15) 648浏览 0评论

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。 今天给大家带来 CSS 三角形绘制方法: #t...

Web前端开发遇到的问题及解决方案【转载】

HTML+CSS Cindy 1年前 (2017-08-18) 1775浏览 0评论

我在平时工作中经常会遇到一些小问题,我将这些问题汇总到了一起,具体如何收集的已经记不清楚了,我将这些问题总结起来,希望对以后的工作能够带来便利和帮助。 1).margin-top,margin-bottom不能正常显示时 一.有时会遇到外层中的子层使...

移动端自制作输入键盘,实现验证码签到【原创】

原创文章 Ann 2年前 (2017-02-07) 1384浏览 0评论

最近做的一个兼职类的项目,要实现6位数字验证码签到功能,效果图如下 看似很简单的页面,刚开始编写的代码的时候,我也是抱着轻松地态度,心里想着这并没有什么难处,用js实现了输入数字的效果。 但是后来就发生了尴尬的事情,测评中心那边测试的时候,手机切换...

HTML5中使用js控制audio标签的方法【转载】

HTML+CSS Ann 2年前 (2017-01-06) 1023浏览 0评论

<audio>标签可以在HTML5浏览器中播放音频文件。 <audio>默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。 这里我们可以使用JS来进行控制,代码如下: var aud...

手机页面城市选择点击首字母定位到对应城市顶部【原创】

HTML+CSS Ann 2年前 (2017-01-06) 1364浏览 0评论

之前做的一个关于兼职的手机微信端的项目,有的也面要求我们实现选择城市的效果,主要就是点击城市的首字母定位到对应的城市顶端,这可把我难倒了,没做过啊,之前都是用的插件 后来想到之前做公司的官网也要求点击新闻列表对应到相应的新闻位置,当时记得用的是锚点定...

多列表内容下勾选框对应内容显示隐藏【原创】

HTML+CSS Ann 2年前 (2017-01-06) 801浏览 0评论

最近写公司的客户服务系统,遇到了一个页面,很多内容列表,然后勾选框,相对应的内容显示隐藏,以前也遇到过类似的,只是列表内容比较少,我都是通过给选框和列表分别添加不同类名,然后勾选指定那个类名显示隐藏,这样效果最后是达到了,但是消耗了大量的时间和精力,...

display:none和visibility:hidden详解【转载】

杂项 Nersk 2年前 (2016-12-28) 903浏览 0评论

一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。一个一个看。 { display: none; /* 不占据空间,无法点击 */ } /********...