【小练习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
【小练习01】CSS--PS提示框制作的更多相关文章
- css悬浮提示框
效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- html+css创建提示框
看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...
- 延时提示框制作思路[简单javascript案例]
模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...
- CSS气泡提示框 可自定义配置箭头
在线演示 本地下载
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- CSS圆角框，圆角提示框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用CSS中的:after、: before制作的边三角提示框
小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
随机推荐
- JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术
在上篇博客中,我们聊了<JavaEE开发之SpringMVC中的自定义拦截器及异常处理>.本篇博客我们继续的来聊SpringMVC的东西,下方我们将会聊到js.css这些静态文件的加载配置 ...
- 使用Perl提取Excel中的IO_MUX
使用Perl提取Excel中的IO_MUX 关键问题 提取数据 格式化输出 循环嵌套 数据结构构建 坐标映射,逆向提取关键字 描述 在IC集成中,我们使用Excel表格规划设计的IC引脚功能映射需要转 ...
- bzoj4828 [Hnoi2017]大佬
Description 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语.你作为一个OIER,面对这样的事情非常 ...
- 设计模式的征途—3.抽象工厂（Abstract Factory）模式
上一篇的工厂方法模式引入了工厂等级结构,解决了在原来简单工厂模式中工厂类职责太重的原则,但是由于工厂方法模式的每个工厂只生产一类产品,可能会导致系统中存在大量的工厂类,从而增加系统开销.那么,我们应该 ...
- PHP 学习笔记(3)
<?phpif (isset($_POST['action']) && $_POST['action'] == 'submitted') { echo '<pre&g ...
- 关于[JAVA] Apache FTPClient.listFiles()操作“卡死”问题的分析和解决
项目中使用commons-net-3.0.1.jar实现FTP文件的下载,程序运行到 FTPClient.listFiles()或者FTPClient.retrieveFile()方法时,就停止在那里 ...
- python3 selenium 随机选择同一类型下的某一个元素
使用场景: 如上图所示,有时候,我们测试的时候,不会每个方向都选择一遍,也不能每次都选择一个方向,这个时候就需要每次运行用例的时候,随机选择一个方向来测试 使用方法: random.randint() ...
- vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
- PL/SQL + Oracle客户端 配置记录
oracle一直都没怎么用. oracle pl/sql也是在别人帮助下完成配置. 这次电脑重装后,自己搞定总结了下怎么配置. 1.下载Oracle 客户端. 安装的版本是win64_11gR2_cl ...
- rabbitmq安装Management Plugin
运行和安装Rabbitmq Management的步骤如下: 1.进入Rabbitmq安装目录,运行rabbitmq-plugins enable rabbitmq_management 2.运行ra ...