css
wenmin1987
这个作者很懒,什么都没留下…
展开
-
flex布局(弹性盒子布局,盒子布局)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。1.解决传统border带来影响 一行显示4个div块,两端贴着边框...原创 2018-11-21 18:01:51 · 811 阅读 · 0 评论 -
css基础--设计动画2(滑动和渐隐渐显)
滑动:主要是通过动态修改元素的坐标来实现,技术点如下: 1.考虑元素的初始化坐标、最终坐标,以及移动坐标等定位要素2、移动的速度、频率等问题<style type="text/css"> .block{ width:20px;height:20px; position:absolut...原创 2019-06-16 17:52:03 · 1510 阅读 · 0 评论 -
css基础--设计动画1(setTimeout和setInterval)
在JavaScript中设计动画,主要是利用循环体和定时器(setTimeout和setInterval)来实现,动画的设计思路:通过循环改变元素的某个CSS样式属性,从而达到动态效果,如移动位置、缩放大小、渐隐渐显等-----高频率 小步伐 快速修改样式属性值例:为集合中每个元素都绑定一个事件延时处理函数<p>p1</p> <p&g...原创 2019-06-16 16:52:05 · 681 阅读 · 0 评论 -
css基础--显示和隐藏(display,opacity)
visibility和display属性,控制元素的显示和隐藏,区别:visibility能够隐藏元素,但是会留下一片空白区域,影响页面的视觉效果display会破坏页面结构,破坏页面布局,不会留下一片空白<body> <p>p1</p> <p class="main">p2</p>...原创 2019-06-16 13:31:27 · 1679 阅读 · 0 评论 -
css基础--控制大小
获取大小<div id="div" style="border:solid;"></div> <script type="text/javascript"> var div=document.getElementsByTagName("div")[0];// alert(div.style.width...原创 2019-06-03 23:15:58 · 471 阅读 · 0 评论 -
css基础--位移和定位2(鼠标位置,滚动条位置)
获取鼠标指针的页面位置e.pageX||e.clientX获取鼠标指针在元素内的位置e.offsetX||e.layerX获取滚动条的位置 self.pageXOffset||(document.documentElement&&document.documentElement.scrollLeft)||document.body.scrollLeft设置滚...原创 2019-06-09 23:09:03 · 2049 阅读 · 0 评论 -
css基础--位移和定位1
元素定位是动态网页设计的基础,用户通过访问和设置元素的css位置属性(left和top)可以模拟各种网页的运动效果;获取相对包含框的位置;获取定位包含框的位置;设置元素的偏移位置;设置元素的相对位置<div id="warp"> <div id="sub"> <div id="box"> ...原创 2019-06-09 17:17:53 · 1354 阅读 · 0 评论 -
css基础--复杂环境下的元素尺寸(可视区域、浏览器窗口尺寸等)
与元素尺寸相关的属性 元素的专用属性 描述 clientWidth 获取元素可视部分的宽度,即CSS的width+padding,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域 clientHeight 获...原创 2019-06-08 23:51:33 · 3832 阅读 · 0 评论 -
css基础---使用offsetWidth和offsetHeight获取元素的尺寸
获取元素的尺寸(display显示情况 和display:none两种情况 来获取)offsetWidth表示元素在页面中所占用的总宽度offsetHeight表示元素在页面中所占用的总高度<div style="width:200px;height:50%;"><div style="width:50%height:50%;;">...原创 2019-06-08 17:37:32 · 4863 阅读 · 0 评论 -
css基础---操作样式表
使用style对象可以操作行内样式,但无法访问样式表,而使用styleSheets对象可以访问<style>标签定义的内部样式表,以及<link>标签或@import命令导入的外部样式表,styleSheets对象属于document,通过document.styleSheets进行访问。styleSheets为每个样式表定义了一个cssRules对象,用来包含指定样式...原创 2019-06-02 18:29:04 · 616 阅读 · 0 评论 -
css基础-----操作行内样式
一、CSS在页面中可以帮助用户完成如下任务:1.显隐特效:借助CSS的display和visibility实现。再结合渐隐、渐显和各种动画序列,可以设计出复杂的视觉效果2.尺寸缩放:使用CSS的width和height实现。在变形动画中常见,如设计图像、栏目、页面展开、收缩等;动态控制目标对象的大小,设计变化的页面布局等3.对象定位:使用CSS的position、left、top、ri...原创 2019-06-01 19:05:24 · 3183 阅读 · 0 评论 -
css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
https://blog.csdn.net/erdouzhang/article/details/70842177最近系统项目,遇到较多表格 和 div 需要根据 写样式的1.first-child(IE7兼容)、last-child(IE8不兼容) html:<body> <h2>列表</h2> <ul> <li...原创 2018-11-23 18:10:08 · 5407 阅读 · 0 评论 -
css基础--验证设计
1滑块验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2019-06-16 22:27:52 · 323 阅读 · 0 评论