zoukankan      html  css  js  c++  java
  • 【小练习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

  • 相关阅读:
    维度漫谈
    维度漫谈
    世界名曲
    世界名曲
    音乐的要素
    音乐的要素
    POJ 1300 欧拉通路&欧拉回路
    C库函数笔记
    malloc()参数为0的情况
    层层递进Struts1(三)之Struts组成
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853987.html
Copyright © 2011-2022 走看看