css
文章平均质量分 62
Caishunqi
本人在校从事Java学习,想从事前端的工作,现在在自学阶段,希望能通过博客交流提升自己,希望看过博客的博友们能指出博文中的不足和错误
展开
-
自学Css3第一天笔记
选择器:.box:类名选择器, #box:ID选择器 ,div p:后代选择器, div.box:交集选择器 ; div,p,span:并集选择器 , div>p :子代选择器; *:通配符,div+p:选中div后面的第一个P,div~p:选中div后面所有的P伪类选择器::hover鼠标经过 , :link正常状态, :action点击, :...原创 2018-08-23 14:50:18 · 234 阅读 · 0 评论 -
web前端实现局部左右滑动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial原创 2018-10-19 09:43:12 · 6725 阅读 · 1 评论 -
bootstrap文档地址
http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html原创 2018-09-13 16:59:25 · 224 阅读 · 0 评论 -
轮播实现
jquery-3.1.1.min.js版本,图片大小为1080px*432px<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery焦点图蓝色箭头按钮切换代码 - 站长素材</title>原创 2018-09-11 11:57:35 · 329 阅读 · 0 评论 -
css第三天
伸缩布局:display:flex;,不需要浮动就实现浮动效果,默认从左至右,也可使用flex-direction调整主轴方向row 水平方向 , row-reverse 反转 , column 垂直 , column-reverse反转列 justtify-content(主轴对齐的方式):flex-start从主轴开始的方向对齐,flex...原创 2018-08-29 15:53:00 · 134 阅读 · 0 评论 -
点击出现幻灯片效果
<style> *{ margin: 0; padding: 0; list-style: none; } html,body{ height: 100%; } .img-box{ pos...原创 2018-08-29 11:10:31 · 148 阅读 · 0 评论 -
CSS3第二天
3D动画 透视:perspective:像素{指距离,人与平面之间的距离,} 父盒子:perspective:200px 子盒子:.xxx:hover img{ transform:rotateZ(360deg)[可以有rotate(x,y,z...原创 2018-08-24 16:49:21 · 102 阅读 · 0 评论 -
动态立方体
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> .box {原创 2018-08-24 16:47:43 · 329 阅读 · 0 评论 -
立体文字翻动效果代码
body{ background-color: #eee; } .box{ width: 500px; margin: 100px auto; } .box span{ float: left; width: 100...原创 2018-08-24 14:47:59 · 245 阅读 · 0 评论 -
使用CSS3实现3D翻面
body{ background-color: #FFC0CB; } .box{ width: 200px; height: 200px; /*border: 1px solid #000000;*/ margin: 100px auto; ...原创 2018-08-24 11:45:53 · 511 阅读 · 0 评论 -
使用H5+CSS3实现心形
<style> .heart{ width: 200px; height: 300px; margin: 100px auto; position: relative; } .heart::before,.heart::after{ ...原创 2018-08-24 10:17:11 · 4193 阅读 · 0 评论 -
携程页面(适配)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> /*适配头*/ <meta name="viewport" content="width=device-width,user-scalable=no,ini原创 2018-08-31 10:42:04 · 1221 阅读 · 0 评论 -
立体导航栏
*{ margin: 0px; padding: 0px; list-style: none; } ul{ width: 600px; margin: 100px auto; } ul li{ ...原创 2018-08-28 14:44:10 · 233 阅读 · 0 评论 -
web移动布局所需:rem
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">/*所需JS*/<script type="text/javascript"> (function(doc...转载 2018-10-19 10:26:26 · 148 阅读 · 0 评论