- 博客(17)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 鼠标放上去出现相机效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .img_div { .
2021-12-23 16:30:07
638
原创 鼠标放上去出现四条线在上面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .img_div { .
2021-12-23 16:26:28
526
原创 鼠标放上去会出现遮罩层并且图片放大
先给父盒子设置宽高 父盒子里边添加图片 给遮罩层的子盒子设置子绝父相，并且设置遮罩层的透明度 给图片设置过渡效果，是鼠标放上去会有放大效果做铺垫 鼠标放上去会有遮罩并且放大（一定记得兄弟盒子之间要用 + ）css内容<style> .img_div { margin: 50px auto; position: relative; overflow: hidden; wi
2021-12-23 16:22:02
1081
原创 选择器（总结）
css主要由两部分组成选择器：html页面与css对接名 css的样式：写在大括号里，每个以“名：值”书写的属性，结束使用分号来分隔两个css属性选择器的分类满足选择器和HTML对应标签，找到元素后可以从，兄弟、子父、外层到内层，完整标签样式标签选择器利用html标签名来完成选择器的书写类选择器以class为HTML属性名，对于css “.”操作ID选择器以id为HTML属性名，对于css“#”操作后代选择器利用空格完成子元素的寻找.box p{}子元
2021-12-08 17:45:56
153
原创 单位值（拖动屏幕字体改变）
文本单位px：像素，固定大小单位 vh / vw：视口单位 view height / view width rem / em：比例单位 rpx：微信单位 pt：磅 百分数vh / vw（css3中的规范）VW：1VW等于视口宽度的1%VH：1vh等于视口高度的1%em / remem：相对长度单位，相对于当前对象内文本的字体尺寸特点：em不是固定值 em会继承父元素的字体大小1em = 16px12px=0.75em10px=0.625em0.6
2021-12-08 09:34:41
136
原创 折叠菜单（ul）
<style> ul { list-style: none; } .nav2 { display: none; } .nav1 li:hover .nav2 { display: block; } </style></head><body> <ul class=".
2021-12-08 09:34:04
551
原创 margin特性
margin有两个特性重叠性 传递性margin重叠性盒子和盒子之间如果兄弟是】时，margin在垂直方向上会发生重叠效应，以大值为准示例：效果：margin传递性盒子和盒子之间如果是父子关系，子盒子设置margin-top会直接传递给父元素（即会变成父元素的margin-top）效果：说明：子元素是需要在设置margin-top时给出父元素的边框，如下设置可以是透明颜色border：1px solid transparent；...
2021-12-07 17:12:05
158
原创 盒子模型01
标准盒子模型一个标准的的盒子模型是有：content：内容 padding：内边距（内容到元素边框的距离） border：边框，可以分开设置四边 margin：外边框（此控件和相邻控件之间的距离）border边框设定border有四个方向的值可以设定top，right，bottom，leftborder-方位-width：边框宽度像素border-方位-style：solid（实线） dashed（虚线） dotted（点线） double（双边线）border-方位-..
2021-12-07 16:42:07
89
原创 无序和有序列表
list设置HTML中有序或无序列表的样式list-style-type：设置列表的标记<style> /* 正方形：square 空心圆：circle 十进制：decimal 无：none */ ul { list-style-type: square; } </style><ul> <li
2021-12-07 10:07:18
81
原创 css权重进阶
权重的设置相同的选择器：内联（行内）>内部>外部>标签>通配符 不容选择器的优先级： id>class>标签>通配符<style> .divstyle { color: red; } div { color: royalblue; } /* #idstyle { color: seagree
2021-12-06 14:09:35
111
翻译 css标签——文本标签
文本标签针对文本的样式操作（渲染）color：设置文本的颜色 text-align：设置文本的对齐方式left：默认值，左对齐 center：居中对齐 right：右对齐注意：text-align可以设置文本的对齐方式，在设置时可以设置里面的对齐元素格式。通常配合着line-height一起使用，使文字垂直居中显示效果：说明：在一个元素div中，如果设置了text-align只能对其字标签中的文本有设置效果，对其容器和表格之类的不能有效。line-height：行高..
2021-12-06 11:10:34
1720
原创 雪碧图sprites
概念是将多张图片组合在一张图片上，通过减少服务器的请求次数来优化页面原理ton过设置css样式的background-images和background-position 来实现元素（盒子）中显示的图标步骤差UN构建一个只能放一个图标大小的盒子（标签元素） 通过background-image引入雪碧图，在通过background-position跳转背景图片的显示位置<style> div { width: 35px;
2021-12-06 10:16:34
58
原创 HTML02
锚点（超链接进阶）概念：锚点是在超链接中一个定位跳转位置的设置方式，跳转就有三种跳转当前页面顶部跳转 当前页面指定位置跳转 其他页面指定位置跳转说明：#+标记名大玉玉id=标记名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini..
2021-12-03 10:25:37
60
原创 HTML发展史与部分标签
HTML前端的发展网页开发（pc），web开发（网站开发 网页+后端+数据库），移动端开发（微信公众号、小程序），接口开发（安卓、ios、第三方）1991年，出现了第一个网页，早期网页，大学、政府、学术研究和报告1994年，第一代动态编程易操作的语言（PHP）51job，动态网站的先驱1995年，JavaScript为了实现网页的动画和交互98-99年，Ajax（异步技术）像百度地图一直在刷新位置，Java出现2007年，第一步iPhone的诞生2014年，HTML5版本发布
2021-12-02 10:00:43
171
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人