![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3练习题
光说不练假把式
浅端
用最少的文字,写最多的知识。
展开
-
css元素常用居中方式3种
三种方式都可以在未知元素宽高的情况下。一、DOM结构,很简单。外层父元素father,内层子元素son。<body> <div class="father"> <div class="son"></div> </div></body>所有结果图都是这样 二、上代码,一目了然。1....原创 2020-03-05 14:07:51 · 241 阅读 · 0 评论 -
CSS练习题——6.3D翻转轮播图
目录1.需求2.关键步骤3. 图片4.代码(注释清晰)1.需求: 点击左右按钮会出现3D翻转的效果,具体请复制文末代码自行运行2.关键步骤 ① 此轮播图只有4张图片,初始是重合在一起的 ② 代码思想:轮播图使用5个li标签,每个li有4个span,初始给li和span进行定位,让span重合在一起,span的背景是要翻转的图片,之后对s...原创 2019-10-25 09:41:59 · 268 阅读 · 0 评论 -
CSS练习题——5.携程首页demo
目录1.需求2.代码1.需求2.代码(注释清晰)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>携程首页demo</title> <style> * { ...原创 2019-10-24 13:56:45 · 607 阅读 · 0 评论 -
CSS练习题——4.利用flex做一个弹性菜单栏
目录1.需求2.代码1.需求:在项目中,菜单栏选项经常是从后台传过来的,所以不知道有几项菜单,这就要求菜单栏选项可伸缩,利用flex可以很好的解决这个问题。如果删除了两项,那么菜单将会弹性自扩展。2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-10-23 20:40:43 · 285 阅读 · 0 评论 -
CSS练习题——3.时钟
1.需求:2.分析 时钟分为表框,12个刻度,时分秒针。 ① 表框可以用大的box。 ② 刻度可以先写好一根刻度,剩下5根只需要进行旋转30°,60°....再用一个白色的cover覆盖中间位置,就把表框和刻度做完了。 ③ 时分秒针,中间圆点都是一个div,只需要用left,margin,tranform进行定位就行了。3.完整代码(注释详细)...原创 2019-10-23 16:16:16 · 169 阅读 · 0 评论 -
CSS练习题——2.三维正方体
目录1.需求2.步骤详解3.改变视角(不是必须)4.完整代码1.需求:2.步骤详解: 2.1.布局 布局是最外层div(控制里面的属性)包括6个div <div class="box"> <div class="front"></div> <div clas...原创 2019-10-23 11:40:39 · 326 阅读 · 0 评论 -
CSS练习题——1.正方形居中圆
目录1.技术点2.需求 3.步骤4.完整代码1.技术点:margin居中 transform居中2需求: 3.步骤: 3.1 首先布局很简单: .circle{ width: 400px; height: 400px;...原创 2019-10-23 09:11:03 · 484 阅读 · 0 评论