- 博客(9)
- 收藏
- 关注
RSS订阅原创 ＜前端练习＞ 京东移动端首页
1.技术选型方案：采取单独制作移动页面方案技术：布局采取流式布局2.搭建相关文件夹结构3.设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/><link rel="stylesheet" type="text/css" href="css/nor
2021-07-14 21:56:53
774
2
原创 ＜CSS练习＞案例-旋转木马
一个大盒子section里面放6个小盒子div6个小盒子 分别绕y轴递进旋转60度 再往Z轴正向移动300px 先旋转再移动最后给父级加一个动画@keyframes move{ 0%{ transform: rotateY(0); } 100%{ transform: rotateY(360deg); } }效果图代码：<!DOCTYPE html><html> <head> <me
2021-06-25 11:15:48
213
原创 ＜CSS练习＞ 3D旋转 翻转的盒子
效果图:正面反面1.先搭建HTML构架：<div class="box"> <div class="front"> 你好 </div> <div class="black"> 再见 </div> </div>建立三个盒子 box是翻转的盒子 front是前面的盒子 black是后面的盒子2.CSS样式box指定大小 要添加3D呈现black先沿Y轴旋转180度 最后将bo
2021-06-24 14:09:56
337
原创 ＜CSS练习＞ 奔跑的小熊 CSS3动画 含素材
本案例用了2个动画第一个动画是整张的素材（文章末尾） 从左往右依次划过 这里animation属性用步长steps()第二个是第一个的动画 一直运动到浏览器的中央 animoaion-fill-mode:forwards;因为素材是白色的 我这里设置了背景图为粉色 更方便看出效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
2021-06-22 13:21:38
2642
原创 ＜CSS3练习＞ CSS动画综合案例 热点图（含素材）
CSS动画分为两个步骤：1.先定义动画2.再调用动画语法如下1.定义：@keyframs 动画名称 { from（0%）{} to（100%）{} }这里的数字可以从0%~100% 可以任意 代表 ：动画开始~动画结束2.使用div {animation-name:动画名称（与上面的对应）;animation-duiation：持续时间；}animation还有其他属性 可自己查表案例效果图注意的点：在这里插入/* 保证子级在父级水平垂直居中 */ posi
2021-06-21 21:04:15
326
原创 ＜CSS练习＞ 综合案例-学成网 含素材 静态网页
效果图浏览器缩放缩小之后的正常打开的：这个案例综合了html css很多知识点盒子的使用 伪链接选择器 定位position 浮动float ul li的用法 以及外边距margin 边框border 内边距padding等 但是没有添加Javasript的效果一半情况下 如果是一排的盒子 如图中 绿色的图片 摆放很整齐 用浮动盒子上有固定的小图标就用定位 如图中绿色图片上的hot 以及左侧固定的侧边栏下面简单说明一下注意的点：左侧固定的侧边栏的位置主要是看版心这是它跟绝对定的盒子居中知
2021-06-20 12:28:39
764
原创 ＜CSS练习＞ 淘宝轮播图案例 含素材（CSS定位）
本案例综合了CSS定位的使用以及一些前端基础知识的结合效果图如下：首先主要图片设置为一个大盒子左按钮利用绝对定位 设置在主要图片的左中位置右按钮同理下面的5个点 设置为主要图片的中中位置参考上一篇博客：添加链接描述...
2021-06-19 20:31:42
613
原创 ＜CSS练习＞ 绝对定位的盒子居中
拓展：绝对定位的盒子居中（注：绝对定位/固定定位的盒子 不能通过margin：auto 设置水平居中）若盒子的width 和 hight 都为200px盒子位置为上中：left：50%（让左侧盒子移动到父级元素的水平位置）margin：-100px；（让盒子向左移动自身宽度的一半）同理 下中 左中 右中 中中的代码如下： ```运行图如下：
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人