【小练习01】CSS--PS提示框制作

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

posted @ 2017-05-07 15:17  TCB_Java  阅读(291)  评论(0)  编辑  收藏  举报