CSS
clqxmt
这个作者很懒,什么都没留下…
展开
-
3D立方体的制作
3D立方体的制作<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { widt...原创 2019-08-06 20:53:54 · 173 阅读 · 0 评论 -
visibility:hidden和display:none的区别
visibility:hidden和display:none的区别都可以实现隐藏visibility:hidden内容会隐藏但是位置会保留display:none内容会被隐藏但是不保留位置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ti...原创 2019-07-27 17:00:19 · 185 阅读 · 0 评论 -
CSS中高度塌陷
CSS中高度塌陷1.高度塌陷产生的原因:子元素浮动,父元素高度自适应。2.解决方法:(1)给父元素添加overflow:hidden;优点:简单易写缺点:如果父元素中有内容溢出会被裁切掉。(2)给浮动的元素后边添加一个空div,设置clear:both;为了防止往空div里添加内容,加上height:0;overflow:hidden;优点:如果父元素中有内容溢出不会被裁切缺点:不...原创 2019-07-27 16:57:08 · 122 阅读 · 0 评论 -
CSS中的滑动门
CSS中的滑动门原创 2019-07-27 08:45:19 · 158 阅读 · 0 评论 -
图片整合
图片整合(雪碧图、精灵图)1.图片整合需要先在Photoshop中把图片整合在一张图片上,然后在CSS代码中使用。2.图片整合的好处:(1)减少向服务器的请求次数。(2)减小图片体积,提高页面加载速度。(3)减少网络带宽占有,提高用户体验度。3.图片整合的原理:利用背景图片的可移动性。核心属性是background-position:;4.图像整合的注意事项:(1)只有作为背景图...原创 2019-07-27 08:31:21 · 251 阅读 · 0 评论 -
CSS中设置透明度
CSS中设置透明度1.使用rgbar:红色值。 值可以是正整数或百分数g:绿色值。 值可以是正整数或百分数b:蓝色值。 值可以是正整数或百分数a:Alpha透明度。取值0-1之间rgba使背景透明,背景上面的字体不会透明。rgba在CSS3中才出现,低版本浏览器不支持,2.opacity值是0-1 例如:opacity:0.5; IE不兼容opacity不仅会使背景透明...原创 2019-07-27 08:20:25 · 472 阅读 · 0 评论 -
CSS中宽高度自适应
CSS中宽高度自适应1.宽度自适应宽度自适应可以写一个min-width,如果小于最小的宽度,那么浏览器可以以滚动条的形式去显示,如果大于最小宽度,浏览器默认会占一整行。max-width元素的宽度最大可以达到的值,可以无限缩小,但是不能扩大。2.高度自适应(1)如果不写高度默认是内容撑开。(2)设有高度为auto,也是由内容撑开。(3)设置min-height会随内容的增多而改变。...原创 2019-07-27 13:54:50 · 1122 阅读 · 0 评论 -
CSS实现鼠标放上图片放大
CSS实现图片放大<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片放大</title> <style> *{margin:0;padding:0;} .photo{width:622px; height:427p...原创 2019-07-27 13:04:03 · 1111 阅读 · 0 评论 -
CSS中的边框显示圆角
CSS中的边框显示圆角属性:border-radius语法格式:border-radius:左上 右上 右下 左下;四个值border-radius:左上右下 右上左下 (对角线)两个值border-radius:左上右 右下左下; 一个值还可以通过x轴y轴设置:border-radius:20px(X轴)/30px(y轴);border-radius:20px(X轴1) 30px...原创 2019-07-27 12:27:43 · 209 阅读 · 0 评论 -
HTML视频、音频插入
1.插入视频:video :是块状元素第一种写法: <video src="路径" >第二种写法: <video> <source src="路径" type="video/拓展名"></source> type属性一定要写 </video>2.插入音频:audio:是内联元素<audio ...原创 2019-07-31 23:26:33 · 733 阅读 · 0 评论 -
HTML新增标签
1.HTML新增标签带来的是网页布局的改变提升,对搜索引擎的友好。2.新增结构型标签:(有意义的div)标记定义一个页面或一个区域的头部。标记定义导航链接标记定义一个区域定义一篇文章标记定义页面内容部分的侧边栏标记定义文件中一个区块的相关信息。标记定义一组媒体内容以及它们的标题。标签定义figure元素的标题标记定义一个页面或一个区域的底部。标记定义一个对话框(会话框)类似微...原创 2019-07-31 23:14:35 · 193 阅读 · 0 评论 -
如果没有doctype html会发生什么 标准盒模型 怪异盒模型
1.如果没有<!doctype html>会发生什么IE浏览器会触发怪异盒模型;2.怪异盒模型会如何解析宽高?解析为实际给定的宽和高,不包括边框,内边距3.标准盒模型实际宽高的计算方式:border+padding+width/height(给定宽高)4.怪异盒模型与标准盒模型的转换属性:box-sizing值:border-box为怪异盒模型content-box为标...原创 2019-07-31 22:47:17 · 635 阅读 · 0 评论 -
使用HTML5新增的结构性标签布局时解决IE浏览器的兼容问题
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--> 放在HTML文档中(就是注释,无需更改)var e=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,h...原创 2019-07-31 21:59:19 · 320 阅读 · 0 评论 -
重新定义的HTML标签
原创 2019-08-01 09:01:07 · 287 阅读 · 0 评论 -
其他标签
1.<mark>标记定义有标记的文本(默认黄色选中状态)可以用CSS改变颜色<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .mark1{background:#f0f;} ...原创 2019-08-01 08:57:27 · 1332 阅读 · 0 评论 -
注释标签
<ruby>标记定义注释或音标<rp>告诉那些不支持ruby元素的浏览器如何去显示<rt>标记定义对ruby的注释内容文本。在这里插入代码片原创 2019-08-01 08:35:44 · 103 阅读 · 0 评论 -
伪对象选择符
伪对象选择符1.:after{content:“value”;}:元素的后边添加content里边的内容例如:div:after{content:"111";}content中的内容也可以是图片例如:div:after{content:url(logo.jpg);}2.:before{content:"value";}在元素内容的前边添加content里边的内容。语法格式和:after一...原创 2019-07-27 17:47:20 · 399 阅读 · 0 评论 -
CSS中存在的兼容问题
CSS中存在的兼容问题1.网页中插入图片会出现的问题:向下撑大三像素解决方法:(1)将结束标签例如与img在同一排显示(只有IE6支持)(2)将图片变成块状 display:block(3)利用图片垂直方向对齐方式 vertical-align:top/middle/bottom(4)给图片写浮动 float:left/right;(5)给父元素设置 font-size:0;如果...原创 2019-07-27 18:14:26 · 104 阅读 · 0 评论 -
元素宽高自适应窗口宽高
元素宽高自适应窗口宽高设置HTML,body{height:100%}元素本身{width:100%;height:100%;}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ma...原创 2019-07-27 18:43:53 · 384 阅读 · 0 评论 -
CSS3中的3D效果
CSS3中的3D效果1.rotateX()方法(围绕其在一个给定度数X轴旋转的元素)div{ width:100px;height:75px; background-color:red; border:1px solid black; transition: all 5s; } div:hover{ transform:rotateX(-180deg); -webkit-...原创 2019-08-06 20:29:35 · 293 阅读 · 0 评论 -
CSS3中的关键帧动画
CSS3中的关键帧动画1.创建动画第一种方法:@keyframes 动画名称(必须是英文){ from{当前样式 } (可省略) to{当前样式};}第二种方法:@keyframes 动画名称{ 0%{}; 25%{}; 50%{}; 75%{}; 100%{}; /*表示在不同的时间段实现什么样的效果*/}...原创 2019-08-06 20:15:17 · 542 阅读 · 0 评论 -
CSS3中的过渡属性
CSS3中的过渡属性1.属性:transition(1)transition-property规定应用过渡的CSS属性的名称。(2)transition-duration定义过渡效果花费的时间。默认是0。(3)transition-timing-function规定过渡效果的时间曲线。默认是“ease”。ease规定慢速开始,然后变快,然后慢速结束的过渡效果。linear规定以相同的速...原创 2019-08-06 19:42:47 · 3301 阅读 · 0 评论 -
CSS3中背景颜色的渐变
CSS3中背景颜色的渐变1.线性渐变语法:background:gradient (有兼容性问题 -moz- -webkit-)例1. div{ width:500px; height:500px; background:-webkit-gradient(linear,0 0,0 100%,from(#f00),to(#00f); backg...原创 2019-08-06 18:13:05 · 585 阅读 · 0 评论 -
CSS3中2D属性
CSS3中2D属性:transformtransform的属性值:(1)translate:原来位置的偏移(可以设置负值)例如:transform:translate(50px,100px);可以设置一个方向,translatex()或者translatey()如果设置的值为50%,应该为元素自身的一半。注:x和y大小写都可以。(2)rotate()设置旋转角度(可以设置负值)例如...原创 2019-08-06 17:53:53 · 226 阅读 · 0 评论 -
3d旋转相册
3d旋转相册<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; position: fixed;...原创 2019-08-06 17:21:21 · 1650 阅读 · 1 评论 -
手风琴效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} div{border:10px solid #666;} a{height:50px...原创 2019-08-01 23:18:03 · 88 阅读 · 0 评论 -
结构伪类选择器
1.:first-child 整个结构中的第一个:last-child 整个结构中的最后一个2.:first-of-type :last-of-type 这个元素类型的第一个和最后一个3.:nth-child(n) 整个结构中的第n个n可以写成2n或even,指的是偶数2n-1或2n+1或odd是奇数:nth-of-type(n) 这个类型的第几个4.:nth-last-...原创 2019-08-01 17:59:38 · 122 阅读 · 0 评论 -
目标伪类选择器 :target
目标伪类选择器 :target原创 2019-08-01 17:28:12 · 606 阅读 · 0 评论 -
关系选择器
关系选择器1.后代选择器:用空格隔开2.子代选择器:用>号连接3.兄弟选择器:用+号连接(向下找相邻的第一个兄弟)4.通用选择符:用~号连接(向下找所有的这类)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...原创 2019-08-01 17:26:09 · 249 阅读 · 0 评论 -
浏览器兼容前缀
1.浏览器兼容前缀-ms-:IE浏览器-moz-:火狐浏览器-o-:欧朋浏览器-webkit-:谷歌、苹果浏览器2.渐进增强写法和优雅降低写法(1)渐进增强:先针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。/*<!--渐进增强:transition必须在最后,其他可以调换顺序-->*/ .tra...原创 2019-08-01 17:21:13 · 1746 阅读 · 0 评论 -
智能表单
Autocomplete="on"自动补全列表原创 2019-08-01 16:57:52 · 542 阅读 · 0 评论 -
BUG :CSS 样式不能正常显示
错误描述:div cp 的css样式一直显示不出来,有宽度,高度也能根据div里面的内容高度显示,但是就是CSS样式显示不出来,在CSS文档中设置背景颜色颜色也没用解决:一行一行的把CSS代码看了一遍,发现不小心在cp样式前面的空白处写了东西,导致挨着多出来的文字的div样式显示不出来。...原创 2019-07-28 13:22:43 · 1069 阅读 · 0 评论 -
轮播图区域定位
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>banner区域定位</title> <style> *{margin:0;padding:0;} body{height:10000px;} .top1{h...原创 2019-07-27 19:05:56 · 1142 阅读 · 0 评论 -
五大浏览器的内核
五大浏览器的内核代表作品1 .Trident: IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器,**代表作品IE,**因为IE捆绑在Windows中,所以 占有极高的市场份额,又称IE内核或是MSHTML,此内核只能应用于windows平台,且是不开源的。2.Gecko(壁虎):代表作品Mozilla Firefox是开源的,它的最大优势是跨平台,能在Micr...原创 2019-07-27 19:01:20 · 322 阅读 · 0 评论 -
web应用标签
1.<menu>命令列表 type=“context”2.<menuitem>menu列表标签FF(嵌入系统)3.<command>menu标记定义一个命令按钮,大多数浏览器 不支持,只有火狐支持4.<meter>状态标签(实施状态显示:气压,气温)5.<progress>状态标签(任务过程:安装、加载)6.<data...原创 2019-08-01 08:26:22 · 154 阅读 · 0 评论 -
两栏布局时左侧栏出现下移问题的解决方法
使用两栏布局,给left设置float:left; 给right设置overflow:hidden;时会出现left往下移动的问题,如下:.left{height:820px; width:196px;background:#417ec8;float:left }/*right*/.right{height:820px;overflow:hidden;}解决方法:使用定位可以解决....原创 2019-07-31 21:14:04 · 242 阅读 · 0 评论 -
属性伪类选择器
input[value]{}:含有指定属性input[value="abc"]:含有指定属性值input[value^="abc"]:属性值起始位置存在的元素input[value$="abc"]:属性值结束位置存在的元素input[value*="abc]:属性值任意位置存在的元素<!DOCTYPE html><html> <head> &...原创 2019-08-02 16:41:57 · 342 阅读 · 0 评论 -
元素类型的转换
元素类型的转换属性:display值:加上inherit一共19个block:变成块元素。如果给元素添加float属性,相当于给元素设置blockinline:变成内联元素inline-block:变成行内块 例如:img可以设置宽度和高度 支持vertical-align;none:隐藏大多数块状元素的display属性是blockli标签的display属性是list-ite...原创 2019-07-25 12:04:07 · 1028 阅读 · 0 评论 -
元素类型
元素类型元素类型:分为内联元素和块状元素。div是块状元素的代表span所示内联元素的代表块状元素和内联元素的区别:(1)块状元素可以设置宽高,内联元素不可以,内联元素的宽高就是其内容。(2)块状元素自上而下独占一行,内联元素自左向右在一排显示,直到遇到边界换行。(3)块状元素和内联元素都遵循盒模型设置,但是内联元素的某些属性不能正常显示。(4)块状元素一般作为其他内联元素的盒子使...原创 2019-07-25 11:51:09 · 157 阅读 · 0 评论 -
显示省略号
显示省略号text-overflow:ellipsis/clip;ellipsis:省略号clip:裁切单行文本溢出显示省略号的必要条件:(1)有一定的宽度:width:value;(2)强制内容在一排显示:white-space:nowrap;(3)溢出裁剪:overflow:hidden;(4)显示省略号:text-overflow:ellipsis;...原创 2019-07-25 11:37:02 · 149 阅读 · 0 评论