前端
文章平均质量分 56
css hrml Javascrit
tatakae
这个作者很懒,什么都没留下…
展开
-
CSS3简易教程:边框,渐变,文本效果,2d转换,3d转换,过度(transition),动画(@keyframes,animaition),多列,用户界面,按钮
css边框border-radiusbox-shadowborder-imagebox-shadow(阴影往右多少距离,阴影向下多少距离,阴影的模糊程度,阴影的颜色) box-shadow: 2px 20px 12px #888888;CSS3 边界图片有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:在 div 中使用图片创建边框:border-image:url(原创 2021-05-02 19:21:42 · 767 阅读 · 0 评论 -
JSONP
使用没有跨域限制的方式JSONPscript标签的src属性中的链接可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。我们来看 一个天气查询查询的jsonp接口 https://query.asilu.com/weather/baidu/我们先来看看 请求 https://api.asilu.com/weather/?city=${‘重庆’}&callback=weather会返回什么`/**原创 2021-04-26 09:14:19 · 110 阅读 · 0 评论 -
轮播图制作
视屏详情介绍:https://www.bilibili.com/video/BV1jb411q7axindex: <div class="recommendation"> <div class="broadcast"> <div class="container"> <img src="//i0.hdslb.com/bfs/archive/d340abc2f5a81原创 2021-02-16 09:18:10 · 228 阅读 · 0 评论 -
2020.10.21 双飞翼布局 圣杯布局
圣杯布局定义:1.使主区域先加载,左区域和右区域后加载2.主区域内适应3.左右区域固定双飞翼布局原创 2020-10-21 21:59:47 · 175 阅读 · 0 评论 -
2020/10/21 rem 媒体查询 Less语言
remrem是相对于HTML文件而言的将div文件中的大小都设置为rem就可以控制字体随着所有盒子同时缩放如;html{font-size:12px;}div{width:20rem;height:20rem;}媒体查询可以通过媒体查询 设置不同分变率的属性语法:@media mediatype not/and/only(像素限制){}//大于800像素是属性设置@midia screen and (max-width:800px ){}...原创 2020-10-21 21:40:08 · 94 阅读 · 0 评论 -
2020.10.19 品优购网站制作:favicon图标 网站描述 常用类名
品优购网站制作:favicon图标1.先切图为png再转化为icon文件2.放在根目录下,和html文件同级3.在style中添加一句:## title的写法网站名- 网站简介京东-便宜好用的购物网站## descrition描述<meta name="descrption" content=" "/>keywords网站关键字<meta name="keywords" content="电脑,手机,相机"/>常用类名...原创 2020-10-20 14:23:46 · 193 阅读 · 0 评论 -
2020.10.17 booystrap
bootstrap 适用于移动端开发学习方向: css布局 js插件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &原创 2020-10-18 10:54:22 · 137 阅读 · 0 评论 -
2020.10.16 web前端 盒子模型border-box 图片模糊处理(filter)clac的使用 CSS的过渡(trancsion hover)
盒子模型border-boxbox-sizing:content-box:border的宽等于 width+border+padding(默认的)box-sizing: border-box; border的宽等于 width图像模糊处理 filter: blur(5px);像素越大越模糊calc()的运用.sos{width:calc(100% - 80px);}// 子代宽度是父代宽度100%减80px;CSS过渡{transition: 变化属性 变化时间原创 2020-10-17 09:25:24 · 264 阅读 · 0 评论 -
2020 .10.13 web前端 伪元素的运用
伪元素的运用:直接在css中生成标签,不需要再html中生成,在html中找不到该标签语法: element::before {centent:’’} element::after{centent: ‘’}伪元素生成的是行内元素,不能设置大小 before 是放在element内元素的前面after 是放在element内元素的后面伪元素权重为1 ...原创 2020-10-13 21:51:46 · 259 阅读 · 0 评论 -
2020.10.11 单行文本溢出用省略号显示
单行文字省略显示.shenglue {/* white-space: nowrap; //强制文字单行显示/overflow: hidden;/超出部分隐藏/text-overflow: ellipsis;/溢出部分用省略号显示/多行文字某一行省略显示/强制文字单行显示/overflow: hidden;/超出部分隐藏/text-overflow: ellipsis;/溢出部分用省略号显示/display: -webkit-box;-webkit-line-clamp: 2;(原创 2020-10-12 10:27:38 · 176 阅读 · 0 评论 -
2020.10.10 CSS高阶用法
text-align可用于行内元素的文字中心对齐text-align: top middle bottom图片与父级存在空白间隙问题原创 2020-10-11 14:39:10 · 115 阅读 · 0 评论 -
2020.10.9前端 显示与隐藏 CSS高阶技术(精灵图 字体图标 三角形的做法 用户界面:鼠标样式 文本框蓝色外框消除)
显示与隐藏(不保留原来的位置)1.display: none;(隐藏)displ:block;(出现)2.visilityvisibility: hidden(隐藏保留原来的位置) visible(显现) inherit(继承父级的visibility)3.overflow(文字超过方框是否影藏)overflow: hidden(隐藏) visible(不影藏)scroll(隐藏并一定加滚动条)auto(只有当隐藏时加滚动条)精灵图用于减少服务器的负担在这里插入图片描述注意:方向是原创 2020-10-10 15:22:29 · 206 阅读 · 0 评论 -
2020.10.8 定位的叠放顺序 绝对盒子居中 浮动和定位添加的特性 页面布局总结
定位的叠放顺序1.z-index 只适用于已经定位的盒子2.如果z-index相同 则 遵循就近原则3.z-index大的在上4.*注意数字z-index: 1 ;*后面不要加单位绝对盒子的居中因为当盒子 position: absolute 以后margin:auto就不再适用了 # 相对定位可以直接auto1.left 页面的百分之五十2.margin-left:-盒子宽度的一半;css代码:效果浮动和定位添加的特性1.当添加了浮动和定位以后,盒子就脱标了可以直接定义盒子原创 2020-10-08 10:40:05 · 199 阅读 · 0 评论 -
2020.10.7定位 静态定位 相对定位 绝对定位 固定定位 粘性定位 半圆制作方法
静态定位posintion : static;(属于标准流)相对定位position: relative;1.相对于原来的位置:top :100px;(距离原来的位置向下100px)2.注意:保留原来的位置绝对定位position: absolute;1.若果没有父级或父级没有定位这相对于浏览器定位2.如果 有父级,则相对于最近有定位的父级定位3.不保留原来的位置(相当于浮动了)定位常用子绝父相:子级用绝对定位不占用位置,父级用相对定位把位置占住固定定位1.相对于浏览器的可原创 2020-10-07 19:36:06 · 236 阅读 · 0 评论 -
2020.10.6 li 控制数字和字间的距离Ps切图(合并图层) 表单写法 css书写顺序定位
list-style-position: inside;(放在li里面) outside(放在Li外面)list-style:square;(圆形小点)原创 2020-10-07 00:14:33 · 156 阅读 · 0 评论 -
2020.10.5 CSS 浮动注意点 浮动塌陷(消除浮动) ps切图
浮动注意点1.子盒子 有一个浮动则所有盒子都浮动才能在一行上2.浮动的盒子只会影响后面的标准流不会影响前面的标准流为什么需要清除浮动:浮动塌陷有些情况下父级大盒子不需要定义高度才能让更多子盒子装下.但如果没有高度,子盒子浮动后,父级大盒子就高度为0,这被称为浮动塌陷.所以要清除浮动清除浮动方法1.给父级添加一个块级元素 (最不常用的方法,布局麻烦) (float的子元素) (float的子元素) (float的子元素)(添加一个块元素 并调用clear).clear{cle原创 2020-10-05 16:37:03 · 187 阅读 · 0 评论 -
2020.10.4 前端回顾 html表格写法 图片插图 表单写法
html表格写法 (table 后面可以设置 表格线框border 单元格间距 cellspace ) (tr为行,td为小单元格)原创 2020-10-05 01:23:25 · 168 阅读 · 0 评论 -
2020.10.4 盒子阴影及hover的使用 圆形边框 文字阴影 浮动开始
盒子阴影box-shadow{h-shadow: px;(阴影水平距离)v-shadow: px;(阴影垂直距离)blur: px;模数程度spread: px; 模糊区域大小color: ;(阴影颜色)可加上inset(阴影放在图形内部)复合写法:box-shadow{h-shadow v-shadow hurl spread color}hover的应用div-hover{}(当鼠标经过div盒子时发生改变)文字阴影text-shadow{h-shadow v-sh原创 2020-10-04 16:08:18 · 377 阅读 · 0 评论 -
2020.10.3 ps基本操作 沙盒模型案例 去掉Li前面的小圆点
ps基本没操作ctrl+r 可以拉出标尺来右键标尺选择像素单位用矩形选择框可以查看像素大小盒子模型案例产品模块制作原创 2020-10-04 00:05:45 · 189 阅读 · 0 评论 -
2020-09-28 css
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-10-03 00:18:32 · 111 阅读 · 0 评论 -
2020.10.2 CSS 沙盒模型
权重的叠加1.如果是复合选择器 则会存在权重的叠加问题2.权重不存在进位沙盒模型网页制作步走构建盒子设计 盒子位置填充盒子内容1.盒子边框borderborder-style: solid(实线) dashed(线虚线) doted(点虚线)border fight left top bottomborder复合写法 border: solid red 1px;2.表格边框tr border-collapse: collapse:(原创 2020-10-03 00:07:08 · 450 阅读 · 0 评论