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

迷南。 2022-06-16 05:49 160阅读 0赞

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

![这里写图片描述][SouthEast]

--------------------

代码：

<!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][http_download.csdn.net_detail_baidu_37107022_9835705]

[SouthEast]: /images/20220616/af798a4e19e242b58f705c7ebc19c0b1.png
[http_download.csdn.net_detail_baidu_37107022_9835705]: http://download.csdn.net/detail/baidu_37107022/9835705

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 jsp小练习01--jdbc小练习01

目录 jsp小练习01 jdbc小练习01 设计数据库以下是一个基本的登录页面（login.jsp）：以下是checklogin.jsp页面的示例代码：以

偏执的太偏执、/ 2024年03月23日 14:36/ 0 赞/ 106 阅读

相关 java 提示框判断,Java常用提示框

JOptionPane.showMessageDialog(this,"操作成功","提示",JOptionPane.INFORMATION\_MESSAGE); //提示框

谁借莪１个温暖的怀抱￠/ 2023年01月15日 08:06/ 0 赞/ 150 阅读

相关 uniapp微信小程序的各种弹框提示（轻提示）

您直接复制粘贴即可使用不需要做特殊的处理。如您满意请给莫成尘点个Fabulous 1：纯文字提示框 uni.showToast({ t

我会带着你远行/ 2022年12月09日 05:21/ 0 赞/ 455 阅读

相关 Axure知识点：如何制作带有提示的密码框

> 摘要：微信搜索【[三桥君][Link 1]】效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

亦凉/ 2022年12月08日 06:02/ 0 赞/ 188 阅读

相关 jquery提示框

下拉提示框 function pointOut(errorData){ $("body").append("<div class='pointOut'

亦凉/ 2022年11月09日 12:49/ 0 赞/ 245 阅读

相关纯CSS制作冒泡提示框

来源：[http://www.ido321.com/1214.html][http_www.ido321.com_1214.html] ![Center][]

朴灿烈づ我的快乐病毒、/ 2022年08月14日 01:35/ 0 赞/ 211 阅读

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

要求用css和HTML实现下图效果： ![这里写图片描述][SouthEast] -------------------- 代码： <!DOCTYPE html

迷南。/ 2022年06月16日 05:49/ 0 赞/ 161 阅读

相关关于confirm确认框制作的一个小技巧

当我们要执行一个危险操作的时候，比如删除某个内容等，那么就应该给用户相应的提示来用户不容易犯错误。一般提示都是使用confirm()函数来处理的，给它提交一个参数作为显示的信息

水深无声/ 2022年06月14日 12:13/ 0 赞/ 184 阅读

相关 Angular——提示框

今天做了一下提示框，也是模仿的，所以下面我就来简单解释一下如何制作提示框，以及解析一下代码和逻辑。其实整个逻辑思路很简单，就是先在前台用HTML的p-dialog

比眉伴天荒/ 2022年05月26日 13:26/ 0 赞/ 412 阅读

相关消息框-提示框

今天找到一个非常简单的提示消息弹出框直接上代码 html ![1500786-20181012154016519-1839245572.png][] css

迷南。/ 2021年09月29日 23:38/ 0 赞/ 490 阅读