的选择变化可由onfocus属性控制
onfocus
的变化可由onchange属性控制 selectedIndex对应当前选中option的index:select.options[selectedIndex]指向当前选项 select.value存储的是当前选中option的value HTML5 视频 // 与 之间插入的内容是供不支持 video 元素的浏览器显示的 <video src="movie.ogg" width="320" height="240" controls="controls" id="video1"> Your browser does not support the video tag. </video> //video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式 <video width="320" height="240" controls="controls" id="video1"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> //DOM控制视频的播放暂停 var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } 音频 "controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. 拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true ,ondragstart 属性调用了一个函数, drag(event),它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值.ondragover 事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法, 当放置被拖数据时,会发生 drop 事件,调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开),通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id (“drag1”), 把被拖元素追加到放置元素(目标元素)中. "div1" ondrop="drop(event)" ondragover="allowDrop(event)"> "drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } canvas //html '' height='' id=''> //js var c=document.getElementById(''); var cxt=c.getContext('2d'); cxt.strokeStyle='#eee'; //cxt.fillStyle cxt.beginPath(); cxt.moveTo(i,j); cxt.lineTo(i,j); cxt.closePath(); cxt.stroke(); //真正描绘出路径 cxt.fill(); cxt.strokeRect(0,0,width,height); //画矩形 cxt.fillRect() 地理定位 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; } 使用 getCurrentPosition() 方法来获得用户的位置, 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象.getCurrentPosition() 方法的第二个参数用于处理错误 - web存储 localstorage sessionstorage - 应用缓存 通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本,如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性: <html manifest="demo.appcache"> ... html> 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。manifest 文件的建议的文件扩展名是:”.appcache”。 请注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。 manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。manifest 文件可分为三个部分: 1. CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 2. NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存 3. FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面) //完整的 Manifest 文件 CACHE MANIFEST # 注释:2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html 一旦应用被缓存,它就会保持缓存直到发生下列情况: 1. 用户清空浏览器缓存 2. manifest 文件被修改 3. 由程序来更新应用缓存 如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。 - Web Workers 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/demo_workers.js"); } //向 web worker 添加一个 "onmessage" 事件监听器,当 web worker 传递消息时,会执行事件监听器中的代码 w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } 现在,让我们在一个外部 JavaScript 中创建我们的 web worker。在这里,我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中: var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); 以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法 - 服务器发送事件 - 新增表单元素 datalist:规定输入域的选项列表 keygen:密钥对生成器 output:定义不同类型的输出 CSS知识点整理 标准盒模型宽度=margin+border+padding+width IE盒模型宽度=margin+width 利用 box-sizing:border-box 可变成IE盒模型 左栏定宽,右边两栏各占50% .parent{display:flex} .first{width:200px} .second, .third{width:100%} 双翼三栏布局 主栏左浮动,width:100% 左栏左浮动,margin-left:-100% 右栏左浮动,margin-left:-右栏宽度 主栏内容的包裹层左右外边距设为左右栏宽度 三栏的父元素清楚浮动 overflow:hidden 动画 animation: mymove 5s infinite; @keyframes mymove{ 0% {transform: scale(1,1);} 25%{transform: scale(2,2);} 50%{transform: scale(1,1);} 75%{transform: scale(2,2);} } 不给宽高实现水平垂直居中: position:absolute; transform:translate(-50%,-50%); left:50%; top:50%; 给出宽高三种垂直水平居中法: position:absolute; left:50%; top:50%; margin-left:-width/2; margin-top:-height/2; position:absolute; left,right,top,bottom:0; margin:auto; display:flex;//父元素 margin:auto;//子元素 个人认为居中还是flex最好用啦! CSS实现右三角形 border:10px solid transparent; border-left:#f00; width:0; height:0; float使行内元素脱离文档流的同时也变成块级元素 css可继承属性 文本相关属性:font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height,text-align, text-indent, texttransform,word-spacing 列表相关属性:list-style-image, list-style-position,list-style-type, list-style 还有 color 注意:font-size继承的是计算后的像素值,如果父元素font-size:80%(*16px),那么子元素继承的是0.8*16px, 而不是 0.8*0.8(*16px) Flex布局 容器: display:flex/inline-flex flex-direction:row/row-reverse/column/column-reverse flex-wrap:nowrap/wrap/wrap-reverse flex-flow:row nowrap justify-content:flex-start/flex-end/center/space-between/space-around align-items:flex-start/flex-end/center/baseline/stretch align-content:flex-start/flex-end/center/space-between/space-around/stretch //多跟轴线对齐方式 项目: order:<integer> flex-grow:<number> flex-shrink:<number> flex-basis:auto|<length> //定义了在分配多余空间之前,项目占据的主轴空间 flex:0 1 auto align-self:flex-start/flex-end/center/baseline/stretch //覆盖父元素的align-items属性 具体可参看阮一峰的教程,总结的很好! CSS3 如果要实现背景透明而文字不透明的效果不能用opacity,可使用背景色rgba来调整 选择器 p:nth-child(n): p的父元素的第n个子元素是p元素 (p:first-child, p:last-child,p:only-child) p:first-child 选择属于父元素的第一个子元素且这个子元素是元素。 p:only-child p的父元素只有一个子元素,并且这个子元素是p元素 p:nth-last-child(2) 同上,从最后一个子元素开始计数 p:nth-of-type(n): 选择属于p的父元素的第n个 元素(p:nth-first-type, p:nth-last-type,p:only-of-type) p:only-of-type p的父元素可以有多个子元素,但是只能有一个p元素 div+p: 选择紧接在 元素之后的 元素 div~p:选择前面有div元素的p元素(div和p是兄弟元素) [title~=flower]: 选择 title 属性包含单词 “flower” 的所有元素 [lang|=en]: 选择 lang 属性值以 “en” 开头的所有元素 a[src^=”https”]: 选择其 src 属性值以 “https” 开头的每个 元素 a[src$=”.pdf”]: 选择其 src 属性以 “.pdf” 结尾的所有 元素 a[src*=”abc”]: 选择其 src 属性中包含 “abc” 子串的每个 元素 [target]: 选择带有 target 属性所有元素 :not(p): 选择非 元素的每个元素。 border-radius border-image border-shadow:x y blur color 渐变背景图 background-image:-webkit-linear-gradient(left,blue,red 25%,blue 50%,red 75%,blue 100%); 裁剪背景图, 规定背景的绘制区域 background-clip:text/border-box/padding-box/content-box; //text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果 文字透明可看见背景图 color:transparent; background-size:length/percentage/cover/contain percentage:父元素的百分比 cover:背景图像扩展至覆盖背景区域(可能看不见部分图像) contain:扩展至最大尺寸(可看见全部区域) background-attachment:scroll/fixed/inherit background-orign:padding-box/border-box/content-box规定背景图片的定位区域 background-position:top center/x% y%/x y word-wrap:normal/break-word text-shadow 自定义字体 <style> @font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; } div { font-family:myFirstFont; } style> animation:moveName duration timing-function delay iteration-count animation-fill-mode direction; time-function: linear/ease/cubic-bezier(p1x,p1y,p2x,p2y) iteration-count: n/infinite animation-fill-mode:动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用animation-fill-mode属性:forwards,backwards表示回到第一帧的状态,none是默认值,回到动画还没开始的状态 direction: normal/alternate(反向轮播) @keyframes moveName { 0%: …… 50%: …… 100%: …… } 模拟 文字逐个显示,且最后光标闪动 @keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } } h1 { font: bold 200% Consolas, Monaco, monospace; border-right: .1em solid; width: 16.5em; /* fallback */ width: 30ch; /* # of chars */ margin: 2em 1em; white-space: nowrap; overflow: hidden; animation: typing 20s steps(30, end), /* 动画分30步,不是平滑过渡 */ blink-caret .5s step-end infinite alternate; } 动画播放过程中,会突然停止,默认行为是跳回到动画的开始状态, 如果想让动画保持突然终止时的状态,就要使用animation-play-state属性 div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; } 给有宽高的元素设置阴影 box-shadow box-shadow:x y opacity color; 元素属性平滑地过渡渐变用 transition transition: property duration timing-function delay; 也可同时设置多个属性的过渡 transition:width 1s,height 2s; //当不知道确切高度时可用max-height,用auto会突变 transition:width 1s,height 2s 1s; //添加delay可让动画按顺序执行 转换 transform(旋转、缩放、移动或倾斜) transform:translate(10px,10px) transform:rotate(10deg); transform:scale(2,4); transform:rotateX(10deg);//3D转换,绕x轴旋转 style.borderTop 驼峰法 style.top/style.left 若想获取style.top/style.left的值必须以js显示定义style.top/style.left的值,或者以内联形式定义属性的值,否则获取不到。 通过全局方法 getComputedStyle(element[,伪类]).getPropertyValue(prop) 和IE下的element.currentStyle().getPropertyValue(prop)可以获取到所有的样式,包括继承的,所以就算是一个空标签用这个方法也能获取到上百个样式,getComputedStyle获取到的样式只能读 不能写,style.padding可以写,getPropertyValue同getAttribute 滤镜属性的模糊效果 -webkit-filter:blur(4px); calc() 计算属性 calc()能让你给元素的宽高做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2px)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。 创建多个列来对文本进行布局 - 就像报纸那样 columns columns:column-width,column-count column-gap: 列之间的间隔 column-rule: 2px dotted red //列之间分割线的样式 伪类和伪元素 伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。伪元素创建的抽象元素不存在于文档语言里(可以理解为html源码) 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 p>i:first-child {color: red} <p> <i>firsti> <i>secondi> p> //伪类 :first-child 添加样式到第一个子元素 如果我们不使用伪类,而希望达到上述效果,可以这样做: .first-child {color: red} <p> <i class="first-child">firsti> <i>secondi> p> 即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看伪元素: p::first-letter {color: red} <p>I am stephen lee.</p> //伪元素 ::first-letter 添加样式到第一个字母 那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢? .first-letter {color: red} <p><span class='first-letter'>Ispan> am stephen lee.p> 即我们给第一个字母添加一个 span,然后给 span 增加样式,也就是添加了一个元素来达到效果,这就是和伪类不同之处。 伪类种类 伪元素种类 伪类 :target //点击链接设置 #func 的样式 'test'> '#test'> 'func'> #test:target~#func{ ... //样式 } 3D轮播 perspective:3000px; //定义3D元素距视图的距离 transform-style:preserve-3d; transform:rotateY(60deg),translateZ(500px); 如果css3 animation动画出现卡顿怎么办? 1. 改用 transform 的css3属性(translate scale),因为用css3属性会自动开启GPU加速,提高动画的流畅度 2. 如果是在页面刚开始加载的时候并没有加载完全就执行了动画,那就可以让动画延迟执行 你可能感兴趣的:(HTML-CSS) vue3 mathjax2.7.7 数学公式 xsjCoding mathjax 1.index.html代码部分MathJax.Hub.Config({extensions:["tex2jax.js"],jax:["input/TeX","output/HTML-CSS"],tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]]}});2.在需要使用数学公式的vue页面调用方法onMounted(()=>{setTimeout(MathJa JavaWeb之HTML-CSS --黑马笔记 DaveVV javawebhtml5csscss3javaintellij-idea前端java-ee 什么是HTML?标记语言:由标签构成的语言。注意:HTML标签都是预定义好的,HTML代码直接在浏览器中运行,HTML标签由浏览器解析。什么是CSS?开发工具VSCode--安装文档和安装包都在网盘中链接:https://pan.baidu.com/s/1iZ0froMgC17TMu-9mT-jJw?pwd=8888提取码:8888HTML标签图片标签:注意:该标签为自闭合标签。-----自闭合标 HTML-CSS知识速查 Xy丶Promise htmlcss前端 HTML/CSS知识速查文章目录HTML/CSS知识速查@[toc]网页的组成浏览器**为什么需要Web标准:****web标准的构成:**HTMLHTML语法导读**1.1HTML语法规则:**1.2基本结构标签**1.3标签的关系:**1.**包含关系(Parent-ChildRelationship)**:2.**并列关系(SiblingRelationship)**:HTML常用语法2.1 独立开发者学习的技术栈 ejinxian 学习 #前端语言-HTML-CSS/Sass/PostCSS-JavaScript/TypeScriptJS框架-Vue-NuxtJS-React-NextJS-RemixJSCSS框架-Tailwindcss-Bulma#设计语言-AntDesign-MaterialDesign#后端语言-JavaScript/TypeScript-Python-Java-PHP框架-NestJS-ExpressJS HTML-CSS:边框图片 韦栋 /*设置图片作为边框内容,默认情况下会吧图片放到边框的四个顶点,边框图片的优先级要高于边框颜色,如果设置了边框图片,那么就不会显示边框颜色*/border-image-source:url("图片路径")/*如何对指定边框图片进行切割*/border-image-slice:70707070;border-image-slice:70707070fill;/*保留边框图像的中间部分*//*边框图片 前端编码规范之CSS规范 AS、SD CSScss 通用规范省略图片、样式、脚本以及其他媒体文件URL的协议部分(http:,https:),除非文件在两种协议下都不可用。这种方案称为protocol-relativeURL,好处是无论你是使用HTTPS还是HTTP,访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节。–Example–-html-css/*不推荐*/.example{background:url("https HTML-CSS:vertical-align属性 韦栋 vertical-align是什么?设置元素的垂直对齐方式。注意点:text-align是设置给需要对齐元素的父元素,vertical-align是设置给需要对齐的那个元素本身,vertical-align只对行内元素有效。/*默认情况下图片和一行文字的基线对齐,基线就是一行文字中最短那个文字的底部*/vertrical-align:baseline;/*图片和父元素的顶部对齐*/vertrica 黑马程序员2023新版JavaWeb企业开发全流程学习笔记(涵盖Spring+MyBatis+SpringMVC+SpringBoot等) Kim-Hyunyeon 阶段3:Java企业开发基础spring学习笔记webmybatisspringbootjava 目录零、Web开发一、HTML-CSS初识Web前端Web前端课程安排小结HTML、CSS介绍HTML快速入门HTML小结VSCode开发工具基础标签&样式-合集(拟新浪微博为例)标题排版样式超链接正文排版布局表格、表单标签表格标签表单标签表单项二、JavaScriptJS基本介绍JS引入方式JS基础语法书写语法变量数据类型、运算符、流程控制语句数据类型运算符流程控制JS函数JS对象ArraySt html背景百分比渐变,html-CSS背景渐变发光动画 吴玄熙 html背景百分比渐变 我想创建一个发光加载动画,该动画将出现在具有不同背景颜色的多个元素上.当前,我正在使用背景图像渐变,并且正在使用vw单位为背景位置设置动画,但是它不可缩放,我的元素将具有不同的长度.有没有一种方法可以使背景图像具有百分比单位?创建的动画body{background:black;}header{width:100%;height:50px;background-color:rebeccapurpl html-css 陈方超 今日内容1.web概念概述2.HTMLweb概念概述*JavaWeb:*使用Java语言开发基于互联网的项目*软件架构:1.C/S:Client/Server客户端/服务器端*在用户本地有一个客户端程序,在远程有一个服务器端程序*如:QQ,迅雷...*优点:1.用户体验好*缺点:1.开发、安装,部署,维护麻烦2.B/S:Browser/Server浏览器/服务器端*只需要一个浏览器,用户通过不同的 HTML-CSS的三种使用方式 傅hc 一、HTML标签的简单使用HTML标签其实是为了展示文档而发明的,而标签的出现是为了满足文档的展示效果。HTML提供的标签有很多,比如div、span、a、img、p等等,其中div、span在语义上不表示任何特定类型的内容,适合用在没有任何语义的场景。图1-1图1-2下图的demo就是HTML标签和CSS的简单使用,代码放在Github。图1-3二、CSS的三种使用方式1.(最常用)通过link HTML-CSS:颜色渐变 韦栋 线性渐变/*渐变不是一个新的属性,而是一个取值默认情况下线性渐变是从上至下的渐变我们可以通过在颜色的前面添加toxxx修改渐变的方向totoptolefttoright*//*background-image:linear-gradient(totopright,red,blue);*//*除了可以通过关键字控制渐变的方向以外,还可以通过角度来控制渐变的方向,角度是按照顺时针旋转*//*backg html兼容性问题css,[Html-Css] 兼容性问题( css) Monsterchen Xu html兼容性问题css 记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新提出时间问题描述解决方案2014/7/15table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字缺不会发生上述问题.方法1:可以使用怪异模式进行解析html,不建议(把!doctypehtml去掉方法2:设置对应的元素的css;设置为块状元素或者浮动,具体帖子http://blog.csdn.net/fg 界面控件DevExpress WinForms HTML-CSS模板:预设计UI模板加速.NET应用开发 界面开发小八哥 htmlcssUI开发界面控件devexpress 在过去的一年里,DevExpress官方引入了两个强大的功能来加速/简化.NET桌面应用的开发,当一起使用时,您可以创建优雅/个性化的用户界面,减少重复的代码,从而节省更多的项目时间。DevExpressWinForms有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。同时能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量 2013年2月 MrZac_ 在2月12日,我开始听音乐,我不记得有多长时间没有松开自己的情绪了14日,在扇贝网学习英语单词的计划,由于感觉过于消极,所以暂时搁置了,在这天,根据记录,可以知道我开始翻看初中语文教材,还为涂鸦上帝新建了一个文档,文档记录游戏里合成的各种元素,以及它们在英文百科的释义24日,笔记里增加了一些样式,因为笔记支持html-css我把在豆瓣音乐电台听到的好听曲目记录在word文档,我也在v电影挑选了一些 html-css文字特效,7款震撼人心的HTML5CSS3文字特效 号三 html-css文字特效 1、HTML5像素文字爆炸重组动画特效今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。2、HTML5/CSS33D文字特效文字外翻效果今天我们再来分享一款很酷的HTML5/CSS33D文字特效,该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果,非常不错的一款文 一个简单的CSS例子 鱼馅饼 css前端 一.欢迎来到我的酒馆从头讲一门语言总是显得很难,先借助一个小项目来学习CSS。这里我写了一个超级简单的html+css项目,项目里面就只有一个网页:index.html。解压出来点击下载一个简单的html-css例子目录一.欢迎来到我的酒馆二.什么是css三.index页面标签分析四.html基础五.css基础六.结束语打开index页面,网页的效果图:二.什么是cssCSS层叠样式表(Casca html-css里面的样式1 常婧帅 width:50px;宽50像素height:50px;高50像素background-color:red;背景颜色红色display:block;块状元素float:left;左浮动line-height:50px;行高50像素list-style-type:none;清除链接下划线 HTML-CSS常见面试题整理!面试题?看这一篇就够了 一只小可乐吖 javascriptcss前端html 请解释HTML、CSS、JavaScript分别是什么?HTML是一种标记语言,用于创建网页结构和内容。它定义了不同的标记(或元素)来表示网站中的不同部分,如标题、段落、链接和图像等。HTML是构建网页的基础。CSS是一种样式表语言,用于美化网页。它定义了不同的样式规则来控制网页中的元素,如字体、颜色、布局和大小等。CSS可以为网页带来丰富的视觉效果,使其更加吸引人眼球。JavaScript是一种 图片百分比 html,HTML - CSS图像调整自身的百分比? 一夜秋风起 图片百分比html HTML-CSS图像调整自身的百分比?我试图用自己的百分比来调整img的大小。例如,我只想将图像缩小到50%,将图像缩小一半。但应用width:50%;会将图像大小调整为容器元素的50%(例如,可能是的父元素)。问题是,我可以在不使用javascript或服务器端的情况下用一定比例调整图像大小吗?(我没有图像大小的直接信息)我很确定你不能这样做,但我只想看看是否有智能的CSS解决方案。谢谢!Min html-css特性和层叠以及外加继承 网创学长 csshtmlcss3 来,我们来看一下这个css三的特性啊,因为我们之前已经接触了大量的css吧啊那么它有哪些特性呢啊?三个,第一个呢是这个层叠性,啊第二个呢是继承性,然后第三个是优先性。我们先看第一个啊第一个层叠性。层叠性呢就是什么呢相同的选择器啊相同选择器给设置相同的样式,此时啊这个一个样式呢会去覆盖另一个样式。你敢很点样子啊。同样呢这边写的是啥呢相同的选择器啊,给同样的设置的话会覆盖啊。那么这个呢那么在这里啊有 尚学堂-HTML-CSS(基础)的学习记录 快乐的小马龙123 学习前端视频的笔记 HTML和CSS核心基础教程尚学堂的教程:https://www.bilibili.com/video/av21557880?p=1任务(1-10)20191010(11-20)20191011(21-30)20191011(31-40)20191012(41-50)20191012(51-60)20191013(61-70)20191013(71-80)20191014(81-90)201910 前端开发面试题-HTML-CSS基础类01 Diogoxiang 一、行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素:divph1h2h3h4formul行内元素:abbrispaninputselectCss盒模型:内容,border,margin,padding二、前端页面有哪三层构成,分别是什么?作用是什么?结构层;主要指DOM节点;HTML/XHTML样式层;主要是指页面渲染;CSS脚本层:主要指页面动画效果;JS/AS三、CSS引入的方式有哪 html-css Moquyun 目录Day01标签行元素Day02表单元素css选择器伪类选择符行内元素块元素表格Day03文本相关属性列表相关属性背景相关属性浮动属性Day04边框-border内边距-padding外边距-margin坑1坑2坑3Day05Day06Day07Day08Day09Day10seo,sem高级表单input高级表格Day11新增的HTML5标签datalistvideo智能表单的使用和规范Day Day01 雪落殇晨 html-css一.git的配备1.安装Git-2.17.1.2-32-bit(git软件)typora-setup-ia32软件vscode软件2.码云注册01.png新建项目02.png3.0SSH公钥设置[email protected]在码云中点击“设置”找到“ssh公钥”04.png05.png点击“确认”按钮完成4.git的三个区06. 前端学习之轮播图 何忆清风 前端前端学习css 体验地址:http://150.158.10.192/web根据b站大佬的js代码进行更改使用vue进行实现,主要用于学习css的动画效果资源下载地址:https://goatchen.coding.net/public/html-css/HTML-CSS/git/filesexportdefault{name:'Shuffling',data(){return{srcs:["1.jpg","2. 【HTML-CSS】总结-6种实现元素 上下左右居中 方法--附演示效果 Sam9029 CSS学习csshtml前端 欢迎观阅本本篇文章,我是Sam9029文章目录**上下左右居中**--**方法总结手册**使用前注意注意:每种方法的使用场景问题1.已知宽高的父元素的情形下2.未知宽高的父元素的情形下此文将介绍`6种`实现元素上下左右居中方法1.定位+transform2.flex布局实现3.gird布局实现4.`display:table`实现5.line-height实现6.未知名称法(使用纯定位)注意事项消 HTML、CSS、JavaScript 学习笔记 伍有晓俐 htmlcss HTML-CSS块级元素和内联元素HTMLdiv和spanHTML框架HTML符号实体参考手册HTML速查列表HTML基本文档基本标签BasicTags文本格式化Formatting链接Links图片Images样式区块StylesSections无序列表有序列表定义列表表格Tables框架Iframe表单Forms实体EntitiesCSS3transitionCSS-box-shadowCSS HTML-CSS(五十六)grid布局 前端小蝌蚪 css3HTMLCSS grid布局是一个二维布局方法,纵横两个方向总是同时出grid-template-columns和grid-template-rows对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应(auto)以及fr单位(网格剩余空间比例单位)。auto与1fr区别在于,auto时根据内容撑起的变宽,fr是对剩余空间的划分有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用re HTML-CSS(三十六)表单扩展 前端小蝌蚪 CSSHTML 美化表单控件label+:checked+display:none原理:用label包裹,能够实现即使点击其他的图片,input也有选中效果.将原有的input样式隐藏。使用伪类:checked控制外部新增的样式来回切换。利用兄弟元素之间的关系,改变状态复选框美化上传按钮美化position+opacity原理:将input标签透明度调为零,再将其放到div上方,看起来时点击的那个上传图,实际点击 Spring中@Value注解,需要注意的地方 无量 springbean@Valuexml Spring 3以后,支持@Value注解的方式获取properties文件中的配置值,简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac mongoDB 分片 开窍的石头 mongodb mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上,configsvr上边放的是metar信息,指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard(片)信息。 第一步启动两台以上的mongo服务 &nb OVER(PARTITION BY)函数用法 0624chenhong oracle 这篇写得很好,引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍 开窗函数 &nb Android开发中,ADB server didn't ACK 解决方法 一炮送你回车库 Android开发 首先通知:凡是安装360、豌豆荚、腾讯管家的全部卸载,然后再尝试。 一直没搞明白这个问题咋出现的,但今天看到一个方法,搞定了!原来是豌豆荚占用了 5037 端口导致。 参见原文章:一个豌豆荚引发的血案——关于ADB server didn't ACK的问题 简单来讲,首先将Windows任务进程中的豌豆荚干掉,如果还是不行,再继续按下列步骤排查。 &nb canvas中的像素绘制问题 换个号韩国红果果 JavaScriptcanvas pixl的绘制,1.如果绘制点正处于相邻像素交叉线,绘制x像素的线宽,则从交叉线分别向前向后绘制x/2个像素,如果x/2是整数,则刚好填满x个像素,如果是小数,则先把整数格填满,再去绘制剩下的小数部分,绘制时,是将小数部分的颜色用来除以一个像素的宽度,颜色会变淡。所以要用整数坐标来画的话(即绘制点正处于相邻像素交叉线时),线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的 编码乱码问题 灵静志远 javajvmjsp编码 1、JVM中单个字符占用的字节长度跟编码方式有关,而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式;2、对于单个字符:ISO-8859-1单字节编码,GBK双字节编码,UTF-8三字节编码;因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节,而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte java 求几个月后的日期 darkranger calendargetinstance Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M 数据库设计的三大范式(通俗易懂) aijuans 数据库复习 关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式,才能设计出高效率、优雅的数据库,否则可能会设计出错误的数据库. 目前,主要有六种范式:第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式,简称1NF。在第一范式基础上进一步满足一些要求的为第二范式,简称2NF。其余依此类推。 想学工作流怎么入手 atongyeye jbpm 工作流在工作中变得越来越重要,很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点,那了解一点,既不系统,也容易半途而废。好比学武功,最好的办法是有一本武功秘籍。研究明白,则犹如打通任督二脉。 系统学习工作流,很重要的一本书《JBPM工作流开发指南》。 本人苦苦学习两个月,基本上可以解决大部分流程问题。整理一下学习思路,有兴趣的朋友可以参考下。 1 首先要 Context和SQLiteOpenHelper创建数据库 百合不是茶 androidContext创建数据库 一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper 一:SQLiteOpenHelper创建数据库: 1,SQLi 浅谈group by和distinct bijian1013 oracle数据库group bydistinct group by和distinct只了去重意义一样,但是group by应用范围更广泛些,如分组汇总或者从聚合函数里筛选数据等。 譬如:统计每id数并且只显示数大于3 select id ,count(id) from ta vi opertion 征客丶 macoprationvi 进入 command mode (命令行模式) 按 esc 键 再按 shift + 冒号 注:以下命令中 带 $ 【在命令行模式下进行】,不带 $ 【在非命令行模式下进行】 一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行 数字 【Spark十四】深入Spark RDD第三部分RDD基本API bit1129 spark 对于K/V类型的RDD,如下操作是什么含义? val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect reduceByKey在这里的操作,是把 java类加载机制 BlueSkator java虚拟机 java类加载机制 1.java类加载器的树状结构 引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载,java的类加载器也有类似于继承的关系,引导类是最顶层的加载器,它是所有类的根加载器,它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时,通常会代理给父类加载器,若已经是根加载器了,就自己完成加载。 虚拟机区分一个Cla 动态添加文本框 BreakingBad 文本框 <script> var num=1; function AddInput() { var str=""; str+="<input 读《研磨设计模式》-代码笔记-单例模式 bylijinnan java设计模式 声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意,getInstance如果在多线程环境中调用,需要加上synchronized,否则存在线程不安全问题 */ class LazySingleton iOS应用打包发布常见问题 chenhbc iosiOS发布iOS上传iOS打包 这个月公司安排我一个人做iOS客户端开发,由于急着用,我先发布一个版本,由于第一次发布iOS应用,期间出了不少问题,记录于此。 1、使用Application Loader 发布时报错:Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc 工作流复杂拓扑结构处理新思路 comsci 设计模式工作算法企业应用OO 我们走的设计路线和国外的产品不太一样,不一样在哪里呢? 国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多,仅仅是在有限的了解程度上面提出这样的看法),从而避免在流程引擎中处理这些复杂的图的问题,而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性,这样一来,在引擎和流程流转控制这一个层面就会遇到很 oracle 11g新特性Flashback data archive daizj oracle 1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象,用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象,概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。 多叉树:2-3-4树 dieslrae 树 平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征: 1、有一个数据项的节点总是有2个子节点(称为2-节点) 2、有两个数据项的节点总是有3个子节点(称为3-节 C语言学习七动态分配 malloc的使用 dcj3sjt126com clanguagemalloc /* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写 本程序没有实际含义,只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节 静态分配 int * p Objective-C编码规范[译] dcj3sjt126com 代码规范 原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范 译者 : Sam Lau 0.性能优化-目录 frank1234 性能优化 从今天开始笔者陆续发表一些性能测试相关的文章,主要是对自己前段时间学习的总结,由于水平有限,性能测试领域很深,本人理解的也比较浅,欢迎各位大咖批评指正。 主要内容包括: 一、性能测试指标 吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略 生产环境相同 基准测试 预热等 htt Java父类取得子类传递的泛型参数Class类型 happyqing java泛型父类子类Class import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz = 跟我学SpringMVC目录汇总贴、PDF下载、源码下载 jinnianshilongnian springMVC ----广告-------------------------------------------------------------- 网站核心商详页开发 掌握Java技术,掌握并发/异步工具使用,熟悉spring、ibatis框架; 掌握数据库技术,表设计和索引优化,分库分表/读写分离; 了解缓存技术,熟练使用如Redis/Memcached等主流技术; 了解Ngin the HTTP rewrite module requires the PCRE library 流浪鱼 rewrite ./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s 第12章 Ajax(中) onestopweb Ajax index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/ Optimize query with Query Stripping in Web Intelligence blueoxygen BO http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936 Java开发者写SQL时常犯的10个错误 tomcat_oracle javasql 1、不用PreparedStatements 有意思的是,在JDBC出现了许多年后的今天,这个错误依然出现在博客、论坛和邮件列表中,即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个: 他们对PreparedStatements不了解 他们认为使用PreparedStatements太慢了 他们认为写Prepar 世纪互联与结盟有感 阿尔萨斯 10月10日,世纪互联与(Foxcon)签约成立合资公司,有感。 全球电子制造业巨头(全球500强企业)与世纪互联共同看好IDC、云计算等业务在中国的增长空间,双方迅速果断出手,在资本层面上达成合作,此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任,另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知,精于电子产品制造(世界第一),对于世纪互联而言,能够与结盟 按字母分类: ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.