VML画连线箭头,line线加粗_vml:line-程序员宅基地

技术标签: 连线  vml  line  JAVA开发  

var div=document.createElement("div");
  div.innerHTML=' <div id="line_div" style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border-left:1px solid #cdcdcd;border-top:1px solid #cdcdcd;"></div>';
  document.body.appendChild(div);


一、什么是VML

VML相当于浏览器的画笔,它可以在浏览器中画出任何你想要的图形:小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形;大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程,下边我们只限于讨论使用VML在浏览器中画一些直线、圆形、圆弧等小图。

VML是微软1999年前(具体时间不详)制作推出的,并集成到了IE5+浏览器,同样也是Microsoft Office Art(艺术图型,如word的艺术文字)的核心结构。VML由微软Visio、Autodesk、Macromedia等企业推荐给W3C(WWW最高权利协会),W3C采取、综合了各方的推荐,于1999年初开始发展SVG,并随后不久推出。SVG是综合VML、GML等的改进(输出效率、图型质量、标记扩展),被推荐为标准,但SVG需要专门的图像阅读器如(Adobe SVG Viewer),无法直接被浏览器引擎解析,以我见,SVG更适合于精度矢量图型应用软件开发、VML则适合应用在WEB页,有不少文章说VML已过时,但仁者见仁、智者见智,VML我感觉相当健全(图型质量、输出速度),它编写简单、浏览器可以解析、与HTML等语言完全兼容,它更具有实际WEB页应用的可行性、深层开发的可行性。但遗憾的是目前支持VML的浏览器仅有IE。

二、VML基础知识

如果你熟悉HTML的话,那么学VML并不是一件复杂的事,因为VML和HTML几乎一样,不仅表现在语法上,还有其对CSS、JS的支持都和HTML如出一辙。

1.基本语法
·标签以<V:XXX>开头</V:XXX>结尾,也支持空标签如<V:XXX />
·标签不区分大小写
·标签中间可嵌套其他标签,可以是VML,也可以是HTML
·属性的写法为"parameter=value",如<V:XXX parameter="value"></V:XXX>,属性值可加双引号、单引号、也可不加

2.对CSS和JS的支持
·对CSS支持:<V:XXX style="parameter1:value1;parameter2:value2"></V:XXX>

3.VML文件扩展名
·可以是htm、html、asp、php、jsp等,即网页格式

4.VML编辑器
·任何文本编辑器都可以,如记事本、Editplus、Dreamweaver,也有专业的工具如FlashVml3.0

5.一个简单的范例

程序代码 程序代码
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>第一个VML范例</title>
<style>
v/:* { behavior: url(#default#VML);} 
o/:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>


说明:
·xmlns:v="urn:schemas-microsoft-com:vml" //关键语句,表示创建一个叫v的XML命名空间,其中v可自行修改
·xmlns:o="urn:schemas-microsoft-com:office:office" //表示引用office相关的标记处理扩展,WEB中很少用,下边不讲
·v/:* { behavior: url(#default#VML);}    //关键语句,指明XML名域v引用的数据是VML标记语言
.<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/> //创建一条直线,VML在浏览器中画图的语句都是写在<BODY></BODY>之间

三、通用属性

下边这些属性大部分的VML标签中都是可用的,为了便于记忆将其分成了三类,其中第二类和HTML相同、第三类和CSS相同。

1.line(直线)

a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>

b.专用属性:from    起点坐标;
                    to    终点坐标

2.Oval(圆)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>
</html>b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定

3.rect(矩形)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽100高100的矩形</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>

b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定

4.roundrect(圆角矩形)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆角矩形</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>

b.专用属性:arcsize    描述圆矩形四角的弧度值,0-0.5,默认值0.05
c.其他说明:其高宽主要由style中的width和height决定

5.arc(圆弧)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆弧</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>

b.专用属性:startangle    圆弧的起点缺口,取值范围-360-360,默认值-180;
                    endangle    圆弧的终点缺口,取值范围-360-360,默认值null(0)
c.其他说明:其高宽主要由style中的width和height决定

6.polyline(多边形)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个多边形</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
</body>
</html>
b.专用属性:points    各折点坐标,上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点

7.curve(曲线)

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条曲线</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
</body>
</html>

b.专用属性:from    起点
                    to       终点
                    control1    曲线的第一个曲度
                    control2    曲线的第二个曲度
c.其他说明:control1、control2可用都不用、用一个或用两个都用

8.shape(任意形状)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>
b.专用属性:path    路径(m    起点、 l     画直线、 c    画曲线、x    曲线自动闭合、 e    结束)
                   coordsize    比例(实际宽:width*100/coordsize第一个值;实际高:height*100/coordsize第二个值)
                   type    引用模板的名称
9.shapetype(模板)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>
b.其他说明:shapetype是专门用来定义形状摸版的(不可见),而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形(可见)。
10.background(背景)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>
11.group(容器)
a.示例:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>
b.其他说明:当使用group后,容器内图形的left、top、width、height等值都是相对group的值。

五、二级标记
二级标记可以看作是对有限的属性进行扩展,就像CSS和HTML的关系一样,利用它我们可以做出更漂亮的图画出来,如上边background(背景)中就使用了fill二级标记,下边我们再来看下如何利用二级标记画一条带箭头的直线:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二级标记示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>
例子中的stroke即为二级标记,它可以用来设置边框样式,除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性,我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单,直接嵌套于图形标签中即可

js vml 画图
2008-10-28 21:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com: vml" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>WawaMind beta v1.0</title>
</head>
<style type="text/css">
v/:* { BEHAVIOR: url(#default#VML) }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
cursor:default;
width:1000px;
}
.wen{
   padding-top:3px;
   padding-left:3px;
   padding-bottom:3px;
   padding-right:3px;
   FONT-SIZE: 9.2pt; LINE-HEIGHT: 20px;
   BACKGROUND-COLOR: #99ccff;
   BORDER-BOTTOM: #330099 1px solid; 
   BORDER-LEFT: #330099 1px solid; 
   BORDER-RIGHT: #330099 1px solid; 
   BORDER-TOP: #330099 1px solid; 
   /*filter:Alpha(Opacity="80",FinishOpacity="90",Style="0");*/
   cursor:move;
   z-index:100;
   
}
.editdiv
{
    OVERFLOW: auto; background-color:#fff999; cursor:default;
    height:50px;
}
.editdiv p
{
margin:0;
}
.expanbutton
{
cursor:hand; font-weight:bold; font-size:20px;
}
</style>
<script type="text/javascript">
var xx=0,yy=0,oldvalue="",poly1,zz=1 
//有关移动的过程和函数
var dragapproved=false
var eventsource,x,y
var popeventsource=""
var Pencil = true;
var selectObj,selectObjBorder = null;

//页面双击创建编辑框
function dbClick() {
    if (event.srcElement.className!="body") return;
    var markhtml ="<div class='wen' style='position:absolute;left:"+window.event.offsetX+";top:"+window.event.offsetY+";width:150px;z-index:9'></div>";
    var newMark=document.createElement(markhtml);
    document.body.appendChild (newMark);
    newMark.innerHTML = "<span class=/"expanbutton/" οnclick=/"expandMemo(this)/">-</span><span></span><div class=/"editdiv/" contentEditable=true onselectstart=/"event.cancelBubble=true/"></div>";
    newMark.fromline = new Array();
    newMark.toline = new Array();
}

//鼠标按下
function msDown() {
    if(event.button==1){
        var isclickScroll= (event.y < 0 || event.y > document.body.clientHeight 
            || event.x < 0 || event.x > document.body.clientWidth)
        if(selectObj){ //清空选择
                selectObj.style.borderStyle = selectObjBorder;
                selectObj = null;
        }
        if(event.srcElement.className=="wen" ||
           event.srcElement.tagName == "curve" ||
           event.srcElement.tagName == "shape"
           ) //选择要删除的对象
        {
            selectObj = event.srcElement;
            selectObjBorder = selectObj.style.borderStyle;
            selectObj.style.borderStyle = "dotted";
            selectObj.style.borderWidth = "1px";
            
        }
        if (event.srcElement.className=="wen")
        {
            if(event.shiftKey) //画两个物体间的线
            {
                eventsource=event.srcElement;
                return;
            }
            dragapproved=true //拖动物体
            eventsource=event.srcElement
            temp1=eventsource.style.pixelLeft
            temp2=eventsource.style.pixelTop
            x=event.clientX
            y=event.clientY
        }else{ //铅笔
             dragapproved=false;
             if (event.srcElement.className!="body" || isclickScroll) //防止在物体上画线
             {

                 Pencil = false;
                 return;
             } 
             Pencil = true;
            document.body.setCapture(); 
            color1="red"
            size1=1 
            xx=event.offsetX;yy=event.offsetY;zz+=1
            poly1=document.body.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>")) 
            oldvalue=poly1.path.value.replace("e","") 
        }
    }
}
//鼠标移动
function msMove() {
    if(event.button==1)
    {
        if(event.shiftKey) //画两个物体件的线
        {
            return;
        }
        if(dragapproved){ //拖动物体
            var newleft=temp1+event.clientX-x
            var newtop=temp2+event.clientY-y
            eventsource.style.pixelLeft=newleft
            eventsource.style.pixelTop=newtop
            
            //移动线
            for(var i = 0; i< eventsource.fromline.length;i++)
            {
                eventsource.fromline[i].from = newleft +","+ newtop;
            }   
            for(var i = 0; i< eventsource.toline.length;i++)
            {
                eventsource.toline[i].to = newleft +","+ newtop;
            }        
        }
        else if(selectObj && selectObj.tagName == "curve")
        { //调整曲线
            if(!event.altKey)
                selectObj.control1 = event.x+","+event.y;
            else
                selectObj.control2 = event.x+","+event.y;
        }
        else{//铅笔功能
            if (event.srcElement.className!="body") return; //防止在物体上画线
            if(Pencil)
            {
                oldvalue+=","+(event.offsetX-xx)+","+(event.offsetY-yy);
                poly1.path.value=oldvalue 
                poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e")     
            }
        }        
    }
}
//鼠标弹起
function msUp() {
document.body.releaseCapture(); 
    if (event.shiftKey && event.srcElement.className=="wen") //画两个物体见的连线。
    {
        var target = event.srcElement;
        var newline=document.createElement("<v:curve filled=/"false/" from="+eventsource.style.pixelLeft+","+eventsource.style.pixelTop+"/" to=/""+target.style.pixelLeft+","+target.style.pixelTop+"/"></v:curve>");
        document.body.insertBefore(newline);
        eventsource.fromline[eventsource.fromline.length] = newline;
        target.toline[target.toline.length] = newline;
    }
}
//控制编辑框的展开和收缩
function expandMemo(o)
{
    var expand = o.innerText == "+";
    var text = o.parentNode.childNodes[2].innerText;
    o.parentNode.childNodes[1].innerText = expand ? "":text.substring(0,10);
    o.parentNode.childNodes[2].style.display = expand ? 'block':'none';    
    o.innerText = expand ? "-" :"+";
}
function keyDown() {
if(event.keyCode == 46) //删除
{
    if(selectObj)
    {
       document.body.removeChild(selectObj);
       selectObj = null;
    }
}
}
document.onkeydown = keyDown 
</script>
<body class="body" οndblclick="dbClick()" οnmοusedοwn="msDown()" οnmοusemοve="msMove()" οnmοuseup="msUp()" onselectstart="return false;">


</body>
</html>


地址栏里面输入:
javascript:document.body.innerHTML%20=%20"<textarea%20style='height:300;%20width:90%'>"+document.body.innerHTML+"</textarea>"    
可以查看运行时生成的html



VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了,所以vml到2011年12月已经归档不再更新了,也就是说vml已经在慢慢退出市场,在此我讲这个的原因是虽然退出市场了,但是ie5-8仍旧占据绝大部分的市场,我们不能小视。某种角度看vml的用户更多。我们可以展望未来,但还是不能忘记现在的环境。
用法:
1,添加xml的命名空间 xmlns ,写法如下:
[html]  view plain copy
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
2,添加行为和命名空间的关系,至于这句话的意思后面有详细解释
[html]  view plain copy
  1. <style>v\:*{behavior:url(#defualt#vml);display:inline-block}</style>  
有了上面的两个步骤我们就可以开始用vml“画画了”。
先上一个例子再解释你就明白个中奥妙了:
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yinxianluo/article/details/45334837

智能推荐

冀教版五年级计算机教学计划,-冀教版五年级数学上册教学计划-程序员宅基地

文章浏览阅读149次。教师的教学工作是有计划性的,在正式上课之前,对要进行的教学任务及流程进行详细的计划,YJBYS小编为大家准备了最新冀教版五年级数学上册教学计划,希望对你有所帮助!一、班级学生情况分析:全班共有学生74人,大部分学生对数学有上进心,但接受能力还有待提高,学习态度还需不断端正。有部分学生自觉性不够,不能及时完成作业等,对于学习数学有一定困难。所以在新的学期里,在端正学生学习态度的同时,应加强培养学生各..._冀教版五年级数学上册教学进度计划博客

随机点名小程序 tkinter_python和tk随机不重复点名-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏24次。随机点名小程序随机点名小程序问题描述随机点名程序(越不来上课的人,被点中的概率越高,实现抽查问题、预警等功能)问题分析采用python 的 tkinter 库实现用户图形界面,采用 pickle 存储数据,可以对点名对象进行插入或删除。user_info.pickle文件中存储着一个字典,包括名字和缺勤次数,根据迟到的次数往列表中增加名字的个数,越不来上课的人被点中的概率越高。代码分析..._python和tk随机不重复点名

LTP4.0 docker 安装使用说明;ltp工具包使用说明_ltp 4.0-程序员宅基地

文章浏览阅读2.7k次。ltp4.0 6月份放出来了,一个模型进行多任务学习,立马测试了一下效果,确实不错。1、首先下载docker,使用pytorch1.4版本,python版本3.7https://hub.docker.com/r/pytorch/pytorch/tagsdocker pull pytorch/pytorch:1.4-cuda10.1-cudnn7-devel2、docker run 一个容器nvidia-docker run -p 8889:8888 --name torch_py.._ltp 4.0

使用IDEA创建maven多个Module模块的项目(创建SpringBoot多个Module项目)_idea maven 里面显示两个modoul-程序员宅基地

文章浏览阅读1.9k次,点赞3次,收藏12次。1.2.3._idea maven 里面显示两个modoul

2016MUTC9-1010 Jong Hyok and String_hdu 5853 jong hyok and string-程序员宅基地

文章浏览阅读581次。题解:将p串翻转,间隔不同字符连接起来,进行一次后缀数组的操作。若strange set(Q)>0,那么Q肯定是p串中一个的子串。所以Q串翻转后,二分直接在后缀数组中找到边界位置,lower和upper。当不存在时,答案为0;当lower==upper时,答案为最大长度(sa[lower]到间隔字符的长度)-最小长度(max(height[lower],height[upper+1])+1_hdu 5853 jong hyok and string

已解决UnicodeDecodeError: ‘ascii‘ codec can‘t decode byte 0x8e in position 0: ordinal not in range(128)_unicodedecodeerror: 'ascii' codec can't decode byt-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏9次。已解决(Python编码问题)UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0x8e in position 0: ordinal not in range(128)_unicodedecodeerror: 'ascii' codec can't decode byte 0xe8 in position 0: ordi

随便推点

商城系统(SpringBoot后端+Vue管理员前端+微信小程序)正式开源啦!_springboot农商电商平台前端-程序员宅基地

文章浏览阅读1.2w次,点赞17次,收藏149次。mall是一套商城系统,包括 Spring Boot后端、 Vue后台管理员前端 、微信小程序用户前端 。主要功能有商品管理、订单管理、用户管理、商品收藏、加购物车、地址管理等。_springboot农商电商平台前端

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度_html网页所有元素都相对于页面尺寸设置百分比参数-程序员宅基地

文章浏览阅读653次。原链接:https://www.cnblogs.com/libaoli/p/5779629.html作者:请叫我阿力这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果。对CSS3不是特别的熟练,只能去网上找找案例看了。发现一个不错的文章。写的比较入门,也很仔细。所以拿过来分享给大家。如..._html网页所有元素都相对于页面尺寸设置百分比参数

基于 SpringBoot + MyBatis 的在线音乐播放器_springboot播放mp3-程序员宅基地

文章浏览阅读1k次。value="删除音乐" οnclick="deleteMusic(\''+list.musicId+'\')">';return new ResponseBodyMessage(-1,"没有你要删除的音乐",false);_springboot播放mp3

Flex调用GP服务实现按划选范围切割地图(二)_flex drawevent.draw_end-程序员宅基地

文章浏览阅读1.7k次。具体代码实现:http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:esri=”http://www.esri.com/2008/ags“ xmlns:mx=”library://ns.adobe.com/flex/mx”minWidt_flex drawevent.draw_end

css图标与文字对齐实现方法-程序员宅基地

文章浏览阅读101次。1.移动端(安卓设备、ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐。2.实际上不管是line-height还是用position去定位,不管你display用..._css实现,左侧两行文字,右侧图标始终跟第一行文字对齐

springboot activiti关闭验证自动部署_activiti工作流引擎关闭-程序员宅基地

文章浏览阅读932次。# spring-activiti# 自动部署验证设置:true-开启(默认)、false-关闭spring.activiti.check-process-definitions=false# asyncExecutorEnabled属性设置设置true后将代替那些老的Job executorspring.activiti.async-executor-enabled=falsesp..._activiti工作流引擎关闭

推荐文章

热门文章

相关标签