要求用css和HTML实现下图效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#wrap{
width: 378px;
border: 1px solid;
border-color: #d4d0c8 #404040 #404040 #d4d0c8;
margin: 0 auto;
}
#box{
border: 1px solid;
border-color: #fff #808080 #808080 #fff;
background: #d4d0c8;
padding: 1px;
}
#title{
/*没有给高度会取能容纳内容的最小值,没给宽度会取父级的宽度*/
/*font: 字体加粗 字体大小/字体行高 字体类型 后三个参数是必需要写的*/
font: bold 12px/18px '宋体';
color: #fff;
background: url(img/bg.gif) repeat-y;
padding-left: 2px;
}
#content{
font: 12px/14px '宋体';
padding: 12px 95px 21px 57px;
background: url(img/ico_01.gif) no-repeat 10px 11px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
<div id="title">Adobe Photoshop CS4 Extended</div>
<div id="content">要在关闭之前存储对 Adobe Photoshop 文档“未标题-1”的更改?</div>
</div>
</div>
</body>
</html>
源代码链接地址:
http://download.csdn.net/detail/baidu_37107022/9835705