CSS3练习题
光说不练假把式
浅端
用最少的文字,写最多的知识。
展开
-
css元素常用居中方式3种
三种方式都可以在未知元素宽高的情况下。 一、DOM结构,很简单。 外层父元素father,内层子元素son。 <body> <div class="father"> <div class="son"></div> </div> </body> 所有结果图都是这样 二、上代码,一目了然。 1....原创 2020-03-05 14:07:51 · 275 阅读 · 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 · 345 阅读 · 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 · 649 阅读 · 0 评论 -
CSS练习题——4.利用flex做一个弹性菜单栏
目录 1.需求 2.代码 1.需求: 在项目中,菜单栏选项经常是从后台传过来的,所以不知道有几项菜单,这就要求菜单栏选项可伸缩,利用flex可以很好的解决这个问题。如果删除了两项,那么菜单将会弹性自扩展。 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...原创 2019-10-23 20:40:43 · 293 阅读 · 0 评论 -
CSS练习题——3.时钟
1.需求: 2.分析 时钟分为表框,12个刻度,时分秒针。 ① 表框可以用大的box。 ② 刻度可以先写好一根刻度,剩下5根只需要进行旋转30°,60°....再用一个白色的cover覆盖中间位置,就把表框和刻度做完了。 ③ 时分秒针,中间圆点都是一个div,只需要用left,margin,tranform进行定位就行了。 3.完整代码(注释详细) ...原创 2019-10-23 16:16:16 · 191 阅读 · 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 · 369 阅读 · 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 · 571 阅读 · 0 评论