要求用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