html如何动态增加tabs的宽度

html-css030

html如何动态增加tabs的宽度,第1张

html如何动态增加tabs的宽度，操作方法如下。

设备：联想电脑

系统：win8

软件：html+css

1、首先新建一个html文件，命名为test.html，在test.html文件中，使用div标签创建一个模块，并在div添加文字内容，代码如下。

2、在test.html文件中，设置div标签的class属性为erliu。

3、然后在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。

4、接着在css标签内，通过类名erliu来设置div的样式，div的样式将写在花括号中。

5、然后在css标签内，编写div的样式，使用width属性设置div的宽度为200px，使用height属性设置div的高度为100px，使用background属性设置div的背景颜色为红色。

6、最后在浏览器打开test.html文件，查看实现的效果。

用我这个试试

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{ margin:0pxpadding:0px}

.tabs {width: 1080pxmargin: 10px auto}

input {opacity: 0}

label {cursor:pointercolor:#999padding: 2% 3%float:leftmargin-right:2px}

input:checked + label {color:#F00}

.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,

.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),

.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),

.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {-webkit-animation:tab 2s easedisplay:block}

@-webkit-keyframes tab{0%{ opacity:0}100%{ opacity:1}}

.panels {float:leftclear:bothposition:relativewidth:1080pxborder-top:#CCC 1px solid}

.panel {width:100%padding:10px 0px 0px 0pxdisplay:none}

</style>

</head>

<body>

<article class="tabs">

<input checked id="one" name="tabs" type="radio">

<label for="one">推荐</label>

<input id="two" name="tabs" type="radio">

<label checked for="two">女装</label>

<input id="three" name="tabs" type="radio">

<label checked for="three">男装</label>

<div class="panels">

<div class="panel">

<div style="height:300pxbackground:#666" >11111</div>

</div>

<div class="panel">

<div style="height:500pxbackground:#666" >22222</div>

</div>

<div class="panel">

<div style="height:600pxbackground:#999" >33333</div>

</div>

<div style="border:#F00 solid 2pxheight:100px"></div>

</div>

</article>

</body>

</html>