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

【小练习01】CSS--PS提示框制作的更多相关文章

  1. css悬浮提示框

    效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. html+css创建提示框

    看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...

  3. 延时提示框制作思路[简单javascript案例]

    模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...

  4. CSS气泡提示框 可自定义配置箭头

    在线演示 本地下载

  5. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  6. CSS圆角框，圆角提示框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用CSS中的:after、: before制作的边三角提示框

    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...

  8. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  9. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

随机推荐

  1. iOS UITableViewCell点击时子视图背景透明的解决方法

    在做iOS项目的开发中,UITableView控件的应用十分广泛.在进行自定义UITableViewCell时,经常遇到这样的问题:在UITableViewCell上面添加了一个有背景颜色的子视图,当 ...

  2. C++queue容器学习(详解)

    一.queue模版类的定义在<queue>头文件中. queue与stack模版非常类似,queue模版也需要定义两个模版参数,一个是元素类型,一个是容器类型,元素类型是必要的,容器类型是 ...

  3. Java数据类型及运算

    (一),Java基本类型及运算 注释:可以用于生成API: 命令如:javadoc -d apidoc windowtitle hhh -doctitle aaa  -header bbbb -ver ...

  4. Linux -atime、mtime、ctime

    Linux中,文件都有其自身的atime.mtime.ctime,在不同的命令下,各时间发生相应的改变.下面,我们来简单的介绍一下: atime (access time):表示最后一次访问文件或目录 ...

  5. 一文读懂 HTTP/2 特性

    HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新,主要基于 SPDY 协议.由互联网工程任务组(IETF)的 Hypertext Transfer Protocol ...

  6. ubuntu实用命令--软件管理

    近期重新拿起linux的书看了下,整理了一下linux的命令. ubuntu预装了APT和dpkg ,“APT”是 “Advanced Package Tool”的简写,“dpkg ”是“Debian ...

  7. [ABP实战开源项目]--YoYoCms目录

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...

  8. Scrapy 爬虫框架入门案例详解

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:崔庆才 Scrapy入门 本篇会通过介绍一个简单的项目,走一遍Scrapy抓取流程,通过这个过程,可以对 ...

  9. Centos7 ftp环境搭建

    没玩过linux,折腾了半天的ftp,好不容易亲测通过了.不容易啊. 操作环境:vm虚拟机 centos7 首先:搞定网络问题:默认情况下使用ifconfig可以看到虚拟机下是无网络的.(注:虚拟机网 ...

  10. Linux下的Jenkins+Tomcat+Maven+Gitlab+Shell环境的搭建使用（jenkins自动化部署）

    jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安 ...