网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
html吧 关注：182,154贴子：1,338,730
  • 2回复贴，共1页

关于写下图警告框的问题，本人新手，写的不熟


上面的大叹号图标怎么才能让他全部显示，我做的效果是这样

还有下面那个输入框的图标怎么弄进去的


html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>警告框</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<div class="wrap-up">
<span class="wrap-icon"></span>
<strong>警告框</strong>
<a href="" class="close" title="关闭"></a>
</div>
<div class="wrap-down">
<div class="content">
<p>你的账户出现了安全隐患，</p>
<p>你可以发送你的email地址，以便我们尽快联系你。</p>
</div>
<div class="function">
<input class="input01" type="text" name="email">
<label class="function-icon"></label>
<a href="javascript:void(0);">发送</a>
</div>
</div>
</div>
</body>
</html>


css代码：
body{
background: url(images/back.png);
}
.wrap{
height: 176px;
width: 444px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -88px;
margin-left: -222px;
}
.wrap-up{
height: 40px;
background: url(images/background.png) 0 0 no-repeat;
margin-bottom: 1px;
}
.wrap-up span{
/*display: block;*/
/*width: 55px;*/
/*height: 55px;*/
background: url(images/top.png) 6px -18px no-repeat;
padding: 0 0 0 65px;
}
.wrap-up strong{
font-size: 18px;
line-height: 40px;
color: #fefefe;
}
.wrap-up a{
/*background: url(images/close.png) no-repeat;*/
}
.wrap-down{
height: 124px;
border: 1px solid #cbcbcb;
padding: 10px 16px 0 11px;
background: #fbf9f9;
position: relative;
}
.wrap-down .content{
padding: 15px 0 12px 9px;
border: 1px solid #e8e6e6;
}
.wrap-down .content p{
line-height: 16px;
font-size: 14px;
color: #9d7d7d;
}
.function{
margin: 11px 0 10px 0;
overflow: hidden;
}
.function-icon{
display: block;
width: 32px;
height: 25px;
background: url(images/letter.png) 0 10px no-repeat;
}
.wrap-down .input01{
height: 41px;
width: 303px;
border: 1px solid #d8d6d6;
float: left;
}
.wrap-down a{
display: inline-block;
border: 1px solid #b0142c;
line-height: 41px;
width: 85px;
color: #fff;
font-size: 18px;
padding-left: 10px;
background: url(images/background02.png) no-repeat;
float: right;
}


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 2回复贴，共1页
分享到: