要求用css和HTML实现下图效果：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             #wrap{
  8.                 width: 378px;
  9.                 border: 1px solid;
  10.                 border-color: #d4d0c8 #404040 #404040 #d4d0c8;
  11.                 margin: 0 auto;
  12.             }
  13.             #box{
  14.                 border: 1px solid;
  15.                 border-color: #fff #808080 #808080 #fff;
  16.                 background: #d4d0c8;
  17.                 padding: 1px;
  18.             }
  19.             #title{
  20.                 /*没有给高度会取能容纳内容的最小值，没给宽度会取父级的宽度*/
  21.                 /*font: 字体加粗 字体大小/字体行高 字体类型             后三个参数是必需要写的*/
  22.                 font: bold 12px/18px '宋体';
  23.                 color: #fff;
  24.                 background: url(img/bg.gif) repeat-y;
  25.                 padding-left: 2px;
  26.             }
  27.             #content{
  28.                 font: 12px/14px '宋体';
  29.                 padding: 12px 95px 21px 57px;
  30.                 background: url(img/ico_01.gif) no-repeat 10px 11px;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div id="wrap">
  36.             <div id="box">
  37.                 <div id="title">Adobe Photoshop CS4 Extended</div>
  38.                 <div id="content">要在关闭之前存储对 Adobe Photoshop 文档“未标题-1”的更改？</div>
  39.             </div>
  40.         </div>
  41.     </body>
  42. </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. Android启动篇 — init原理（二）

    ========================================================          ================================== ...

  2. EasyUI datagrid默认勾选checkbox时注意事项

    在使用easyui的datagrid默认选中复选框时遇到的一个问题:就是加载程序默认选中复选框时死活选不中,查了好多资料才知道是easyui的datagrid的singleSelect属性设置为‘tr ...

  3. 为什么说B+-tree比B 树更适合实际应用中操作系统的文件索引和数据库索引？

    B树: B+树 1) B+-tree的磁盘读写代价更低 B+-tree的内部结点并没有指向关键字具体信息的指针.因此其内部结点相对B 树更小.如果把所有同一内部结点的关键字存放在同一盘块中,那么盘块所 ...

  4. yum安装网络配置图形界面

    实战:为了方便使用网络配置我们安装插件tui 操作如下: [root@localhost ~]# yum install NetworkManager-tui已加载插件:fastestmirror, ...

  5. Linux centos7下安装配置redis及Redis desktop Manager工具连接注意事项

    基本工具:VMware12.CentOS-7-x86_64-Everything-1611.iso.redis-desktop-manager-0.8.0.3841 废话不多说,首先,关于什么是Red ...

  6. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  7. namenode和datanode 的namespaceID导致的问题

    namenode和datanode 的namespaceID导致,datanode无法正常的启动,经过查资料,解决的办法就是更改datanode的VERSION之中的namespace namenod ...

  8. JavaScript常用的方法和函数（setAttribute和getAttribute ）

    仅记录学习的新知识和示例,无干货. 1.setAttribute和getAttribute          (Attribute:属性) setAttribute:为元素添加指定的属性,并为其赋值: ...

  9. Linux使用Jexus托管Asp.Net Core应用程序

    第一步 安装.Net Core环境 安装 dotnet 环境参见官方网站 https://www.microsoft.com/net/core. 选择对应的系统版本进行安装.安装完成过后 输入命令查看 ...

  10. 开源自己写的一个拖拽库，兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...