不可能全屏播放的难题化解,父级块中加多video

By admin in 4858美高梅 on 2019年4月17日

运用video标签,摄像总无法占满父级全屏,本来预算的十分钟工程,结果卡在video那里了,劳顿的小果,依旧打算记下来,共勉。。。

利用video标签,录制总不可能占满父级全屏,本来预算的13分钟工程,结果卡在video那里了,辛劳的小果,依旧打算记下来,共勉。。。

遵照html五,父级块中增多video,无法全屏播放的难点消除。,html五全屏播放

行使video标签,摄像总不能够占满父级全屏,本来预算的拾分钟工程,结果卡在video那里了,劳苦的小果,仍旧打算记下来,共勉。。。

代码(css内容):

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
不可能全屏播放的难题化解,父级块中加多video。font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>

代码(body内容)
<body>
<p>视频</p>
<div class=”videoTime”>
<video class=”videoShowing” src=”video/video.mp4″
autoplay=”autoplay”>视频</video>
</div>
</body>
</html>

 

笔者们依据常规给video标签设置:height:百分百;width:百分之百;

结果如下:

左图:(谷歌 Chrome)中度到达百分百;而宽度不能够完结百分之百;
 右图:(Firefox)高度不可能达成百分之百;而宽度到达百分百;

 

4858美高梅 14858美高梅 2

左图:(Safari)中度达到百分之百;而宽度无法落得百分之百;
 右图:(Opera)高度不可能达到规定的标准百分百;而宽度到达百分之百;

4858美高梅 3 4858美高梅 4

紧接着小果就尝试利用:

1.利用js获取父级的宽高,赋给video;结果:失败。

贰.运用:-webkit-full-screen{}方法,未有起功效。

3.用到兼容…

。。。累趴

未来小果就发现了简约易操作的办法:

css代码:(父级高度为0;设置padding-bottom;)

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 1/3;   //需求总括获得
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>

结果如下:

左图:(Google Chrome)  右图:(Firefox)

4858美高梅 54858美高梅 6

 

左图:(Safari)                右图:(Opera)

4858美高梅 7那便是说还有1个难题,padding-bottom的值是怎么得到的啊?

videoH:video的高

videoW:video的宽

videoTiW:父级的width ,使用的是比例

padBotRes:padding-bottom的值

式子:

padBotRes = (videoH / videoW) * videoTiW

小果是通过总括得出的那一个姿势,消除难题的,要是有标题,欢迎来调换,padding的特色,有待去收十(
⊙ o ⊙ )。

就那规范,杨汤梨姑娘伊始

使用video标签,录制总不可能占满父级全屏,本来预算的拾分钟工程…

css的注释

代码(css内容):

代码(css内容):

/*…….*/

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>

 

代码(body内容)
<body>
<p>视频</p>
<div class=”videoTime”>
<video class=”videoShowing” src=”video/video.mp4″
autoplay=”autoplay”>视频</video>
</div>
</body>
</html>

代码(body内容)
<body>
<p>视频</p>
<div class=”videoTime”>
<video class=”videoShowing” src=”video/video.mp4″
autoplay=”autoplay”>视频</video>
</div>
</body>
</html>

一贯在html代码中写css

 

 

<p style=”color: rebeccapurple;font-size:
18px”>Hao</p>

我们根据不奇怪给video标签设置:height:百分之百;width:100%;

大家遵照正规给video标签设置:height:百分之百;width:百分之百;

 

结果如下:

结果如下:

css代码写在当下文件中

左图:(谷歌(Google) Chrome)高度达到百分之百;而宽度不可能达到规定的标准百分百;
 右图:(Firefox)中度不能够达到百分之百;而宽度达到百分百;

左图:(谷歌(Google) Chrome)中度达到百分百;而宽度不能够抵达百分百;
 右图:(Firefox)中度不可能落得100%;而宽度达到百分百;

<head>

 

 

    <meta charset=”UTF-8″>

4858美高梅 84858美高梅 9

4858美高梅 104858美高梅 11

    <title>Title</title>

左图:(Safari)高度达到百分百;而宽度不能落得百分百;
 右图:(Opera)中度无法达到规定的标准百分之百;而宽度达到百分之百;

左图:(Safari)中度到达百分之百;而宽度不可能到达百分百;
 右图:(Opera)高度不能完成100%;而宽度到达百分百;

    <style type=”text/css”>

4858美高梅 12 4858美高梅 13

4858美高梅 14 4858美高梅 15

        p{

随之小果就尝试使用:

接着小果就尝试选取:

            color: red;

一.行使js获取父级的宽高,赋给video;结果:战败。

一.使用js获取父级的宽高,赋给video;结果:失利。

            font-size: 19px;

二.选拔:-webkit-full-screen{}方法,未有起效果。

二.行使:-webkit-full-screen{}方法,未有起成效。

        }

三.使用兼容…

3.应用包容…

    </style>

。。。累趴

。。。累趴

</head>

后来小果就意识了简易易操作的不贰诀要:

然后小果就发现了回顾易操作的法子:

<body>

css代码:(父级中度为0;设置padding-bottom;)

css代码:(父级高度为0;设置padding-bottom;)

<p>Hao</p>

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 4五%;   //须要总括获得
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 45%;   //供给计算拿到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>

</body>

结果如下:

结果如下:

 

左图:(Google Chrome)  右图:(Firefox)

左图:(Google Chrome)  右图:(Firefox)

css写在外部单独文件中

4858美高梅 164858美高梅 17

4858美高梅 184858美高梅 19

<link rel=”stylesheet” href=”base.css”
type=”text/css”
>那样导入

 

 

 

左图:(Safari)                右图:(Opera)

左图:(Safari)                右图:(Opera)

id选择器(#)

4858美高梅 204858美高梅 21

4858美高梅 224858美高梅 23

    <style type=”text/css”>

 

 

        #set{

宏观化解啊~

周全化解啊~

            color: red;

那么还有一个标题,padding-bottom的值是怎么获得的吗?

那么还有二个标题,padding-bottom的值是怎么获得的啊?

            font-size: 60px;

videoH:video的高

videoH:video的高

        }

videoW:video的宽

videoW:video的宽

    </style>

videoTiW:父级的width ,使用的是比例

videoTiW:父级的width ,使用的是比例

</head>

padBotRes:padding-bottom的值

padBotRes:padding-bottom的值

4858美高梅,<body>

式子:

式子:

    <span id=”set”>选择</span>

padBotRes = (videoH / videoW) * videoTiW

padBotRes = (videoH / videoW) * videoTiW

</body>

小果是因此测算得出的那一个姿势,消除难点的,如若有标题,欢迎来沟通,padding的表征,有待去收10(
⊙ o ⊙ )。

小果是经过测算得出的那一个姿势,化解难点的,如若有标题,欢迎来沟通,padding的风味,有待去收10(
⊙ o ⊙ )。

</html>

就这样子,奇异果姑娘初始了,哇喔!

就那规范,杨汤梨姑娘开首了,哇喔!

 

 

 

class和id采取器的界别

同样点:能够应用于别的因素

不同点:

  1. ID选拔器只幸亏文书档案中选取3次。
  2. 能够动用类选拔器列表方法为三个要素同时设置多少个样式

 

子选取器(>)

用以接纳钦点标签成分下的首先代子成分。

 

富含后代选用器

.first  span{color:red;},后代中有着的span标签都受影响

>:只影响率先代子成分

空格:全部后代都震慑

 

通用选用器

* {color:red;}选定html中具备标签

 

伪类采纳器

a:hover{color:red;}

相似用来a标签,使鼠标滑过变颜色

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Title</title>

    <style type=”text/css”>

        a:hover{

            color: red;

        }

    </style>

</head>

<body>

<a href=””>BaiDu</a>

</body>

</html>

投身BaiDu上,颜色形成紫蓝。

 

分组选拔符

h1,span{color:red;}相当于:

h1{color:red;} span{color:red;}

 

继承

CSS的或多或少样式是颇具继承性的,那么什么样是承继呢?承袭是1种规则,它同意样式不仅利用于有些特定html标签成分,而且动用于其子孙。比如下边代码:如某种颜色应用于p标签,那几个颜色设置不仅应用p标签,还选取于p标签中的有所子元素文本,那里子成分为span标签。

p{color:red;} 
<p>三年级时,小编要么1个<span>胆小如鼠</span>的小女孩。</p>

 

特殊性

一对时候大家为同多少个要素设置了不一样的CSS样式代码,那么成分会启用哪1个CSS样式呢?我们来看一下边包车型地铁代码:

p{color:red;} .first{color:green;} <p
class=”first”>三年级时,小编可能2个<span>胆小如鼠</span>的小女孩。</p>

p和.first都协作到了p这么些标签上,那么会显得哪一种颜色吗?green是不易的颜色,那么为啥吧?是因为浏览器是基于权值来判断使用哪一种css样式的,权值高的就使用哪一类css样式。

上边是权值的平整:

标签的权值为壹,类选拔符的权值为拾,ID选取符的权值最高为十0。例如上边包车型大巴代码:

p{color:red;} /*权值为1*/ p span{color:green;}
/*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p
span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note
p{color:yellow;} /*权值为100+10+1=111*/

 

层叠

咱俩来合计三个主题素材:假诺在html文件中对于同2个要素得以有四个css样式存在并且那三个css样式具备一样权重值怎么做?好,这一小节中的层叠帮你解决这些标题。

层叠固然在html文件中对于同二个因素得以有四个css样式存在,当有同1权重的样式存在时,会根据那几个css样式的左右相继来调节,处于最前面的css样式会被使用。

如上边代码:

p{color:red;} p{color:green;} <p
class=”first”>三年级时,作者照旧3个<span>胆小如鼠</span>的小女孩。</p>

末尾 p
中的文本会设置为green,那些层叠很好掌握,理解为前边的样式会覆盖前边的样式。

据之前边的css样式优先级就轻便领悟了:

内联样式表(标签内部)> 嵌入样式表(当前文件中)>
外部样式表(外部文件中)

 

重要性

大家在做网页代码的时,某个尤其的状态需求为有个别样式设置有着最高权值,如何是好?那时候我们能够应用!important来解决。

一般来讲代码:

p{color:red!important;} p{color:green;} <p
class=”first”>三年级时,作者可能二个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会彰显的red海军蓝。

注意:!important要写在分号的先头

那边注意当网页制小编不安装css样式时,浏览器会依照本身的一套样式来显示网页。并且用户也能够在浏览器中装置自身习惯的样式,比如某个用户习惯把字号设置为大片段,使其翻动网页的文本尤其明白。那时注意样式优先级为:浏览器暗许的体制
< 网页制小编样式 <
用户自个儿安装的体裁
,但记住!important优先级样式是个例外,权值高于用户本身设置的体裁。

 

css一些运用

body{font-family:”宋体”;} 字体

body{font-size:12px;color:#666} 字号(大小),颜色

p span{font-weight:bold;} 粗体

p a{font-style:italic;} 斜体

p a{text-decoration:underline;} 下划线

.oldPrice{text-decoration:line-through;}  删除线

 

 

 

 

p{text-indent:2em;} 缩进

 

 

p{line-height:1.5em;} 行间距(行高)

 

 

h1{letter-spacing:50px;} 字间距

 

 

h1{     text-align:center; }

 

h1{     text-align:left; }

 

h1{     text-align:right; }

 

要素分类

块状成分:

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>
、<form>

内联元素:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联成分:

<img>、<input>

 

块级成分

特点:

  1.  每种块级成分都从新的一条龙初步,并且其后的要素也另起1行。

二.  成分的莫斯科大学、宽度、行高以及顶和底部距离都可安装。

3.  成分宽度在不设置的情事下,是它本身父容器的百分之百,除非设置一个上升的幅度。

安装display:block就是将成分彰显为块级成分

 

内联成分

display:inline将元素设置为内联成分

特点:

1.  和别的因素都在1行上

2.  要素的高度、宽度及顶部和底部边距不可设置

3.  要素的宽窄正是它含有的文字或图表的幅度,不可改动

 

内联成分

内联:同时具备内联成分、块探花素的特色,代码display:inline-block。唯有<img>/<input>多少个标签

特点:

一.  和其他因素都在1行上

二.  成分的万丈、宽度、行高及左右侧距都可安装

 

盒子模型

边框:

div{     border:2px  solid  red; }

相当于:

div{     border-width:2px;     border-style:solid;     border-color:red;
}

一.  border-style(边框样式)常见的有:dashed(虚线)| dotted(点线)|
solid(实线)

2.  border-width(边框宽度)

三.  border-top:一px solid red; 只设置上边框 四.  border-right:一px solid
red;  只设置左侧框 伍.  border-left:1px solid red;  只设置右侧框

6.  div{border-bottom:1px solid red;}  只设置下面框

惊人和增长幅度:

css定义的宽(width)和高(height),指的是填充以里的始末范围。

因此1个成分的其实增幅(盒子的宽度)=左边界+左边框+左填充+内容宽度+左侧界+左侧框+左侧界

 

 

 

填充:

要素内容和边框之间能够设置距离的,称之为“填充”。padding

 

边界:

margin设置异地距

padding世内边距,margin是内边距

 

css布局模型

布局模型建立在盒子模型的根基之上。

css包涵叁种为主的布局模型:flow、layer、float

流动模型(flow):

流动(flow)是暗中同意的网页布局方式。也正是说网页在,私下认可状态下的HTML网页成分都以基于流动模型来分布网页内容的。

有如下的性状:

一. 
块级成分都会在所处的蕴藏成分自上而下按顺序垂直延伸分布,因为在默认情状下,块状成分的宽窄都是百分之百,实际上,块级成分都会以行的花样挤占地点。

二.  在流动情势下,内联元素都会在所处的蕴藏元素内从左到右水平分布。

小结:html私下认可使用flow,流动,全数的剧情都以使用在此之上。

变迁模型(float):

其余因素在暗中同意意况下是无法变化的,但足以应用CSS定义浮动,如div、p、table、img等因素都能够被定义为扭转。

层模型:

层模型有三种情势:

1.  相对定位(position:absolute)

二.  争执牢固(position:relative)

三.  固定定位(position:fixed)

纯属定位:

positon:absolute,那条语句的成效是将成分从文书档案中拖出来,然后选用left、top、right、bottom属性相对于最周围的三个富有一定属性的父包涵块进行相对定位。假诺不带有块,则相对于body成分,即相对于浏览器窗口。

div{     width:200px;     height:200px;     border:2px red solid;    
position:absolute;     left:100px;     top:50px;} <div
id=”div1″></div>

 

 

相对固化:

positon:relative,通过left、right、top、bottom属性明显因素在符合规律文书档案流中的偏移地方。相对稳固完结的进度是第一按static(float)方式生成一个因素(并且元素像层一样退换了起来),然后相对于以前的地方移动。

#div1{     width:200px;     height:200px;     border:2px red solid;    
position:relative;     left:100px;     top:50px; }  <div
id=”div1″></div>

 

<body>     <div
id=”div一”></div><span>偏移前的职位还保存不动,覆盖不了前边的div没有撼动前的地点</span></bod<body>

 

小结:相对稳定,就是固然指标运动了,不过从前的岗位照旧留着。

 

牢固定位:

position:fixed,与相对定位(absolute)类似,可是它绝对移动的坐标是视图(显示器内的网页)自身。由于视图本人是定位的,它不会随浏览器窗口的滚动条而变化,因而它一直平昔于窗口内视图的某部地方。导航条正是用那种牢固情势。

 

Relative与Absolute组合使用

同伙们读书了1二-陆小节的相对定位的秘诀:使用position:absolute能够兑现被设置成分绝对于浏览器(body)设置固定之后,大家有未有想过可不得以相对于任何成分举办牢固呢?答案是迟早的,当然能够。使用position:relative来帮衬,可是必须遵循上边规范:

一、参照定位的成分必须是相对固化成分的长辈成分:

<div id=”box1″><!–参照定位的因素–>     <div
id=”box2″>相对参照成分举办一定</div><!–相对定位元素–>
</div>

从地点代码可以看出box1是box2的父成分(父成分当然也是长辈成分了)。

二、参照定位的成分必须投入position:relative;

#box1{     width:200px;     height:200px;     position:relative;
        }

三、定位成分参预position:absolute,便能够选择top、bottom、left、right来进展偏移定位了。

#box2{     position:absolute;     top:20px;     left:30px;          }

这么box二就足以相对于父成分box壹稳住了(那里注意参照物就能够不是浏览器了,而得以任意设置了)。

 <!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>

<title>相对参照元素实行固定</title>

<style type=”text/css”>

div{border:2px red solid;}

#box1{

    width:200px;

    height:200px;

    position:relative;

       

}

#box2{

       position:absolute;

top:20px;

left:30px;

         

}

/*上面是任务部分*/

#box3{

    width:200px;

    height:200px;

    position:relative;      

}

#box4{

    width:99%;

       position:absolute; 

bottom:0;

   

}

</style>

</head>

 

<body>

<div id=”box1″>

<div id=”box2″>绝对参照成分举行定位</div>

</div>

 

<h一>上面是职责部分</h壹>

<div id=”box3″>

    <img
src=”;

    <div
id=”box四”>当本身只怕三年级的学员时是三个娇羞的小女子。</div>

</div>

</body>

</html>

 

盒模型代码简写,css尽量较少代码量

1.  margin:10px 10px 10px 10px;

简写:margin:10px;

2.  margin:10px 20px 10px 20px;

简写:margin:10px 20px;

3.  margin:10px 20px 30px 20px;

简写:margin:10px 20px 30px;

4.  p{color:#000000;}

简写:p{color: #000;}

5.  p{color: #336699;}

简写:p{color: #369;}

6. 

body{     font-style:italic;     font-variant:small-caps;     
font-weight:bold;      font-size:12px;      line-height:1.5em;     
font-family:”宋体”,sans-serif; }

简写:

body{     font:italic  small-caps  bold  12px/1.5em  “宋体”,sans-serif;
}

 

颜色值

一.  英文命令颜色

p{color:red;}

2.  RGB颜色

p{color:rgb(133,45,200);}

三.  十六进制颜色

p{color:#00ffff;}

 

 

长度值(px)

 

css样式设置小技艺

水平居中

html代码:

<body>   <div
class=”txtCenter”>小编想要在父容器中国水力电力对国集团平居中呈现。</div>
</body>

css代码:

<style>   .txtCenter{     text-align:center;   } </style>

 

水平居中定宽块状成分

html代码:

<body>  
<div>小编是定宽块榜眼素,哈哈,笔者要水平居中显得。</div>
</body>

css代码:

<style> div{     border:1px solid red;/*为了显得居中效果显明为
div 设置了边框*/          width:200px;/*定宽*/margin:20px auto;/*
margin-left 与 margin-right 设置为 auto */} </style>

 

水平居中计算

不定宽度的块状成分有三种情势居中:

1.  加入table标签

二. 
安装display:inline方法:与第3体系似,彰显档次设为行内成分,进行不定宽成分的天性设置

三. 
设置position.relative和left:百分之五十;利用相对固定的法门,将成分向左移二分之一,到达居中的效益。

html代码:

<div>  <table>   <tbody>     <tr><td>    
<ul>         <li>我是首先写作本</li>        
<li>小编是第2行文本</li>        
<li>笔者是第二行文本</li>     </ul>   
 </td></tr>   </tbody>  </table> </div>

css代码:

<style>table{    border:1px solid;     margin:0 auto;
}</style>

 

第二种:

html代码:

<body> <div class=”container”>     <ul>        
<li><a href=”#”>1</a></li>        
<li><a href=”#”>2</a></li>        
<li><a href=”#”>3</a></li>     </ul>
</div> </body>

css代码:

<style> .container{     text-align:center;}/*
margin:0;padding:0(化解文本与div边框之间的茶余饭后)*/ .container ul{    
list-style:none;     margin:0;     padding:0;     display:inline;}/*
margin-right:八px(设置li文本之间的区间)*/.container li{    
margin-right:8px;     display:inline; } </style>

 

笔直居中,保持height和line-height中度1致,height是该因素中度,line-height行间距指在文书中央银行与行之间的基线间的相距。

如下代码:

<div class=”container”>     hi,imooc! </div>

css代码:

<style> .container{     height:100px;    
line-height:100px;background:#999; } </style>

 

父成分中度鲜明的多行文本、图片等的竖直居中的方法有两种

(首要方法)方法壹:使用插入 table  (包蕴tbody、tr、td)标签,同时设置 vertical-align:middle。

css 中有一个用来竖直居中的属性 vertical-align,在父成分设置此体制时,会对inline-block类型的子成分都有用。下边看一下事例:

html代码:

<body><table><tbody><tr><td
class=”wrap”><div>     <p>看本人是或不是能够从中。</p>
</div></td></tr></tbody></table></body>

css代码:

table td{height:500px;background:#ccc}

因为 td 标签暗中同意景况下就默许设置了 vertical-align 为 middle,所以大家不须要显式地设置了。

 

除却上边讲到的插入table标签,能够使父成分高度鲜明的多行文本垂直居中之外,本节介绍此外壹种完毕那种效能的办法。但那种情势包容性相比较差,只是提供大家学习参考。

在 chrome、firefox 及 IE八 以上的浏览器下能够设置块级成分的 display 为 table-cell(设置为表格单元展现),激活 vertical-align 属性,但注意 IE陆、7 并不协理这些样式, 包容性相比较差。

html代码:

<div class=”container”>     <div>        
<p>看本身是或不是能够从中。</p>        
<p>看自身是还是不是可以从中。</p>        
<p>看自己是还是不是能够从中。</p>     </div> </div>

css代码:

<style> .container{     height:300px;     background:#ccc;   
display:table-cell;/*IE8以上及Chrome、Firefox*/    
vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>

 

隐性改换display类型

有2个妙趣横生的场景正是当为因素(不论从前是怎么样项目元素,display:none 除了那个之外)设置以下 二 个句之一:

 1. position : absolute 

 2. float : left 或 float:right 

简轻巧单的话,只要html代码中出现上述两句之壹,成分的display呈现档次就会活动成为以 display:inline-block(块状成分)的措施呈现,当然就足以设置成分的 width 和 height 了,且私下认可宽度不占满父成分。

如上面包车型大巴代码,小伙伴们都知情 a 标签是 行内成分 ,所以设置它的 width 是
未有意义的,不过设置为 position:absolute 未来,就足以了。

<div class=”container”>     <a href=”#”
title=””>进入课程请单击那里</a> </div>

css代码

<style> .container a{     position:absolute;width:200px;    
background:#ccc; } </style>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有