CSS
莓莓儿~
这个作者很懒,什么都没留下…
展开
-
CSS基础 :样式+选择器
CSS样式一:css行内样式 <h1 style="font-family: '宋体';">CSS层叠样式表(Cascading Style Sheets)</h1>二:css内部样式 <style type="text/css"> /* p,h1,h2,h3,h4{font-size: 20px;} /*不同内容设置相同属性时...原创 2019-04-16 15:27:16 · 257 阅读 · 0 评论 -
魔方转转转
这次做了个空心的魔方,能够转转转呀<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>魔方</title> <style> *{ padding:0; ...原创 2019-05-10 19:25:23 · 370 阅读 · 0 评论 -
叮当猫css3
最近迷恋上了哆啦A梦,就想着用刚学的CSS3做一个动画的叮当猫。(老夫的少女心有点泛滥)原创 2019-05-10 19:21:34 · 680 阅读 · 0 评论 -
css3动画——2d动画,过渡动画
css3的动画分类: 2d 动画 ,3d 动画, 2d转3d,过渡动画和帧动画《一》2d转换:transfrom转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。属性描述translate()平移(沿x,y,z轴方向平移 px)rotate()旋转(沿x,y,z轴方向平移 deg)scale()放大skew(变形 deg)trans...原创 2019-05-07 21:02:44 · 983 阅读 · 0 评论 -
京东终极版
<div class="J_corechn2"> <div class="coreoon"> <div class="corechn1_inner core_after " style="background: transparent"> <div class="core_in" > ...原创 2019-05-09 22:14:37 · 323 阅读 · 0 评论 -
CSS3边框,背景,渐变.........
一:css3的边框border-radius:创建圆角处理兼容性:-webkit-border-radius: 10px; /谷歌/-moz-border-radius: 10px; /火绒/-ms-border-radius: 10px; /IE/.b{ width: 200px; height...原创 2019-05-06 19:35:51 · 2347 阅读 · 0 评论 -
京东页面仿制后续来啦。。。
这次又做了中间选项卡部分 <!--搜索--><div class="search"> <div class="search-h"> <div class="logo"> <a href="#">京东</a> </div> <di...原创 2019-05-08 21:50:41 · 612 阅读 · 0 评论 -
边线动画小案例
1:爱的魔力转圈圈<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body,html{ padding:0; ...原创 2019-05-08 21:36:42 · 191 阅读 · 0 评论 -
3D动画
3D 转换方法:rotateX(angle) 定义沿 X 轴的 3D 旋转。rotateY(angle) 定义沿 Y 轴的 3D 旋转。rotateZ(angle) 定义沿 Z 轴的 3D 旋转。语法transform-style:preserve-3d;转换属性属性描述transform向元素应用 2D 或 3D 转换。transform-origin...原创 2019-05-08 21:28:29 · 8502 阅读 · 0 评论 -
京东页面一
这个页面分为四大块,头部,搜索栏,选项卡部分和主体推荐部分今天先只做了头部。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="icon" href="//www.jd.com/favicon.ico" type="image/x-...原创 2019-04-30 17:55:34 · 709 阅读 · 0 评论 -
CSS网页设计》》
这是跟着老师做的一个小案例,小小的有了一点成就感,下次努力<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>css 网页布局</title> <link rel="stylesheet" href="ind...原创 2019-04-30 17:43:53 · 2273 阅读 · 0 评论 -
CSS布局案例+选项卡
第一个:使用列表更方便 <meta charset="UTF-8"> <title>布局案例1</title> <style> .pagenation{ width:958px; height:40px; border:1px solid #0...原创 2019-04-16 17:17:48 · 530 阅读 · 0 评论 -
CSS的伪类+盒子模型
链接的伪类伪类说明:link未访问的链接:visited已访问的链接:hover鼠标悬停状态:active激活的链接伪类的顺序:link>:visited>:hover>:active <style> /* 访问之前*/ a:link{ color: d...原创 2019-04-16 17:08:27 · 553 阅读 · 0 评论 -
CSS中的float position display
css中的浮动:float四个参数:float:left; 左浮动float:right; 右浮动float:none; 不浮动float:inherit; 不浮动元素的水平浮动 left right块级元素 :元素在浮动之后 会脱离文档流要想水平浮动,浮动的子元素的总宽小于父元素的宽注:子元素在浮动之后会导致父元素不能撑开overflow:hidden 超...原创 2019-04-16 16:06:02 · 240 阅读 · 0 评论 -
加载动画
前端工程师在网页设计上做加载动画是必不可少的。今天做了两种加载动画,一种就是常见的六个圆圈依次出现和依次消失,第二种就是比较艺术一点有创意感的动图。第一个:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>loading加载<...原创 2019-05-10 19:36:58 · 377 阅读 · 0 评论