你們看看吧
為什么將這代碼復制下來沒看見關閉按鍵啊
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網-拖拽效果</title>
<style type="text/css">
? ? body{background: url(images/baidu_demo.png) #fff top center no-repeat;
? ? ? ? padding: 0px;margin: 0px;font-size: 12px;font-family: "微軟雅黑";
? ? }
? ? /*登錄浮層組件*/
? ? .ui-dialog{?
? ? ? ? width: 380px;height: auto;
【任務1】z-index: 9000; positio：absolute;
? ? ? ? top: 100px;left: 100px;
? ? ? ? border: 1px solid #D5D5D5;background: #fff;
? ? }
? ? .ui-dialog a{text-decoration: none;}
? ? /*標題欄區域*/
? ? .ui-dialog-title{
? ? ? ? height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
? ? ? ? border-bottom: 1px solid #efefef;background: #f5f5f5;
【任務2】cursor:move;
? ? ? ? user-select:none;
? ? }
? ? /*關閉按鈕設置*/
? ? .ui-dialog-closebutton{
? ? ? ? width: 16px;height: 16px;display: block;
? ? ? ? position: absolute;top: 12px;right: 20px;
? ? ? ? background: url(images/close_def.png) no-repeat;cursor: pointer;
? ? }
? ? .ui-dialog-closebutton:hover{background:url(images/close_hov.png);}
? ? /*內容區域*/
? ? .ui-dialog-content{
? ? ? ? padding: 15px 20px;
? ? }
? ? /*每行元素可能需要的樣式*/
? ? .ui-dialog-pt15{
? ? ? ? padding-top: 15px;
? ? }
? ? .ui-dialog-l40{
? ? ? ? height: 40px;line-height: 40px;
? ? ? ? text-align: right;
? ? }
? ? /*輸入框公用的樣式*/
? ? .ui-dialog-input{
? ? ? ? width: 100%;height: 40px;
? ? ? ? margin: 0px;padding:0px;
? ? ? ? border: 1px solid #d5d5d5;
? ? ? ? font-size: 16px;color: #c1c1c1;
? ? ? ? text-indent: 25px;
? ? ? ? outline: none;
? ? }
? ? /*兩個輸入框的icon設置*/
? ? .ui-dialog-input-username{
? ? ? ? background: url(images/input_username.png) no-repeat 2px ;
? ? }
? ? .ui-dialog-input-password{
? ? ? ? background: url(images/input_password.png) no-repeat 2px ;
? ? }
? ? /*提交按鈕的樣式*/
? ? .ui-dialog-submit{
? ? ? ? width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
? ? ? ? outline: none;text-decoration: none;
? ? ? ? display: block;text-align: center;line-height: 50px;
? ? }
? ? .ui-dialog-submit:hover{
? ? ? ? background: #3f81b0;
? ? }
</style>
</head>
<body >
<div class="ui-dialog">
<!-- 標題欄區域 -->
<div class="ui-dialog-title">
? ? ? ? 登錄通行證
<a class="ui-dialog-closebutton" href="javascript:;"></a>
</div>
<!-- 主要內容區域 -->
<div class="ui-dialog-content">
<!-- 兩個輸入框 -->
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" type="input" value="手機/郵箱/用戶名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" type="input" value="密碼" />
</div>
<div class="ui-dialog-l40">
<a href="#">忘記密碼</a>
</div>
<!-- 登錄按鈕 -->
<div>
<a class="ui-dialog-submit" href="#">登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#">立即注冊</a>
</div>
</div>
</div>
</body>
</html>
2016-06-20
圖片的地址不對，你沒把圖片下載下來。