利用纯CSS实现手机下拉菜单效果
1Deshun 发布于 6年前 (2019-04-29) 4514℃ 评论(0) 赞 (2)
今天在改一个响应式网站,兼容手机时需要写一个下拉菜单。其实用纯 CSS 就能实现,利用 checkbox 的 checked 属性,设置菜单的显示隐藏。HTML:<nav> <label fo...
Deshun 发布于 6年前 (2019-04-29) 4514℃ 评论(0) 赞 (2)
今天在改一个响应式网站,兼容手机时需要写一个下拉菜单。其实用纯 CSS 就能实现,利用 checkbox 的 checked 属性,设置菜单的显示隐藏。HTML:<nav> <label fo...
Deshun 发布于 6年前 (2019-04-25) 5461℃ 评论(0) 赞 (1)
input 的单选框 radio 和复选框 checkbox 是样式是很难调的,设置背景和边框都不起效。我们可以使用下面的方法进行样式美化:纯CSS就能实现。HTML:<h1>你喜欢我吗?</h1> <label for="ch...
Deshun 发布于 6年前 (2019-04-23) 2942℃ 评论(0) 赞 (0)
今天在写tab切换的时候,顺便封装了一个,方便以后使用。只需要填入 tab 和切换内容的父元素,即可实现。自动给 tab 添加/删除 class 类 .on ,给切换的内容添加/删除 class 类 .active ,可以根据自己的需求设置样式。HTML:<ul ...
Deshun 发布于 6年前 (2019-04-11) 6271℃ 评论(0) 赞 (8)
利用纯 CSS 设置 列表的 伪类 :after 实现不同颜色数字的排行榜效果。代码如下:HTML:<ul> <li>html中引入调用另一个公用html模板文件的方法19040 ℃&l...
Deshun 发布于 6年前 (2019-04-04) 4136℃ 评论(0) 赞 (0)
分享一个纯HTML+CSS写的下拉导航动画,代码如下:HTML部分:<div class="nav"> <ul class="clearfix"> <li>...
Deshun 发布于 6年前 (2019-03-27) 6048℃ 评论(0) 赞 (2)
在 HTML 页面中,可以通过 <script> 标签插入 JavaScript 代码,也可以引用外部 js 文件。浏览器支持:IEFirefoxChromeSafariOpera6.09.04.05.011.1插入 JavaScript 代码:&...
Deshun 发布于 6年前 (2019-03-25) 3366℃ 评论(0) 赞 (0)
标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表...
Deshun 发布于 6年前 (2019-03-18) 6826℃ 评论(0) 赞 (5)
利用CSS实现三角形效果,比较常用的思路是使用 border 边框来实现,border 边框是由四个三角形组成的,通过调整四个边来实现不同形状的三角形。通过上图应该能看懂 border 的实现原理。CSS代码如下:通过调整边框的宽度,来实现不同的形状。/*A1*/ .trian...
Deshun 发布于 6年前 (2019-03-06) 5284℃ 评论(0) 赞 (1)
纯CSS实现图片扫光效果,效果如下:html代码如下:<div class="ilogo"> <h1 class="ititle">  ...
Deshun 发布于 6年前 (2019-03-02) 7424℃ 评论(0) 赞 (6)
一般 hover 效果只用在自身元素和控制子元素,那么可以直接用 CSS 控制兄弟元素的 hover 效果吗?答案是可以的,不过只能控制相邻的元素,具体示例代码如下:1、如果 #b 元素是 #a 元素的子元素,可以直接通过 #a:hover #b {...} 这种方式来控制。示例...