存档

文章标签 ‘自适应’

div+css,左侧宽度固定,右侧自适应

2015年7月2日 没有评论

实现了左侧div宽度固定,右侧根据左侧宽度自适应屏幕宽度的功能,代码如下:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>左侧div宽度固定,右侧根据左侧宽度自适应屏幕宽度</title>
<style type=”text/css”>
* {font-size:12px;margin:0px;padding:0px;}
a {text-decoration:none;color:#000;}
a img {border:none;}
.cl {clear:both;}
div.boxall {position:relative;padding-left:180px;}
div.left {width:180px;margin-left:-180px;float:left;height:300px;background:blue;}
div.right {width:100%;float:left;height:300px;background:red;}
</style>
</head>

<body>
<div class=”boxall”>
<div class=”left”>
左侧内容,左侧固定宽度
</div>
<div class=”right”>
右侧内容,右侧根据左侧宽度自适应屏幕宽度
</div>
</div>
</body>
</html>

分类: html总结 标签: , , ,

2端2种颜色,中间固定宽度和颜色

2015年4月27日 没有评论

要求实现如下效果(根据宽度自适应)

2端2种颜色,中间固定宽度和颜色

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style type=”text/css”>
* {padding:0px;margin:0px;}
.box {height:28px;background:red;position:relative;}
.leftBlue {width:50%;height:28px;background:blue;position:absolute;left:0px;top:0px;z-index:0}
.content {height:28px;background:black;width:1000px;margin:0px auto;position:relative;z-index:1;text-align:center;color:#fff;line-height:28px;}
</style>
</head>

<body>
<div class=”box”>
<div class=”leftBlue”></div>
<div class=”content”>内容</div>
</div>
</body>
</html>

css.php