![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 78
学Java的小李
上班中,没有太多的时间,偶尔写点
展开
-
父div中多个子div并排显示---弹性布局
第一步:我们先定义一个父div和4个子div,并给他们定义相应的class类名class=“one”为父div的类名,以下为四个子div的类名。第二步:根据类名设置不一样的样式效果如下图,div 是一个块级元素,默认一个div独占一行:第三步:用弹性布局Flex设置父divdispiay:flex是使父div使用弹性布局效果如下:justify-content属性定义了项目...原创 2019-06-15 17:09:33 · 7087 阅读 · 0 评论 -
js实现轮播(淡入淡出)
原理:所有图片都叠放在一起,透明度为0,当点击按钮时 ,给相应的图片加上透明度,并 使用 transition: opacity 1s linear;来控制效果效果图:代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></titl...原创 2019-08-03 10:23:39 · 556 阅读 · 0 评论 -
js实现轮播图(简单滚动轮播)
原理:在页面上有一个可视区域(a),用来显示图片,还有一个放所有需要轮播的图片的区域(b) ,当执行操作时 ,b需要移动 ,移动一个a的宽度,使下一张图片显示,需要实现一下效果:1.自动播放2.左右按钮切换3.下标圆点切换代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /...原创 2019-08-02 15:52:51 · 3765 阅读 · 1 评论 -
js 实现简单的点击div改变背景颜色
思路:点击div改变背景颜色,是通过判断点击的次数,达到改变背景颜色,主要运用了数的加,累加。效果:代码;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js实现点击div改变背景颜色</title> &l...原创 2019-07-19 15:03:06 · 19211 阅读 · 0 评论 -
网站网页通用底部
效果:代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题名</title><style> *{margin:0px;padding:0px;box-sizing:border-box} body{margin:0 au...原创 2019-07-19 09:16:04 · 2476 阅读 · 0 评论 -
htm+css+jquey实现二维码
点击按钮时,弹出二维码页面,可以通过点击单选框来改变微信支付还是支付宝支付效果如下:附上代码:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; cha...原创 2019-07-18 16:21:40 · 235 阅读 · 1 评论 -
html写轮播图
这个用到定时器来实现;思路:使用<ul><li>来放图片,按照我们的要求来排版;溢出的隐藏,还需要用到最主要的一个属性;就是动画属性:animation @keyframes;代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <t...原创 2019-07-18 11:19:45 · 1454 阅读 · 0 评论 -
居中显示
1.多个块盒并排水平显示(三个div为例子)第一步:先三个div并给他们设置宽高背景色<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ ...原创 2019-06-30 19:04:38 · 583 阅读 · 0 评论 -
使用html写一个水平二级菜单
(1) 写标题我们一般用到<nav>这个标签,<nav>这个标签就是定义导航链接部分的一个标签。(2)还有会用到<ul><li>标签来实现导航菜单功能。(3)在这里呢,我用的是<nav>标签,<ul><li>标签和<a>标签来实现的一个水平的二级菜单,废话不多说,看代码!!!<!DOCTYP...原创 2019-07-09 21:46:09 · 2048 阅读 · 1 评论 -
点击按钮 改变主题(二)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JavaScript修改CSS样式</title> <script type="text/javascript"> var aa = 0; function mydom...原创 2019-07-02 18:31:12 · 431 阅读 · 1 评论 -
html+js+css实现点击咱开显示(二)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-07-02 10:22:28 · 375 阅读 · 0 评论 -
html+js+css实现点击展开显示
实现思路:首先我们需要定义一个容器来存放内容;将溢出内容先隐藏,当点击按钮或文字时使原先定义的容器变大,并且能放下所有内容。代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>下拉与收起</title>...原创 2019-07-01 16:13:04 · 4329 阅读 · 0 评论 -
点击按钮时div显示再次点击时隐藏(白天夜间切换)
position: fixed; 生成绝对定位的元素,相对于浏览器窗口进行定位opacity: 0.6; 设置透明度outline: 1000px solid rgba(0, 0, 0, 0.3); 设置轮廓大小及颜色 0.3为透明度值z-index: 999999;将div在顶层显示效果图:...原创 2019-06-16 19:39:43 · 697 阅读 · 0 评论 -
html实现手风琴菜单
原理:内容溢出隐藏,当鼠标放到指定位置时,下面内容出现,使用transition来添加过度效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...原创 2019-08-05 14:53:14 · 3822 阅读 · 0 评论