html-css练习题（系统提示）
生活随笔
收集整理的這篇文章主要介紹了
html-css练习题（系统提示）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼賞析：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 背景顏色設置 */ body{ background:lavenderblush; } /* 1.盒子設置 寬500 高300 背景顏色 固定位置 調節位置 */ .box{ width:500px; height:300px; background: white; border-radius: 4px;
position: relative; left:50%; top:50%; margin-left:-250px; margin-top: 150px;
/* 設定塌陷 */ overflow:hidden;
} /* 2.系統盒子設定 寬490 高40 背景顏色 位置 */ .con{ width:490px; height:40px; background: blue; margin: 15px auto 0px; border-radius: 6px; } /* 2.1設定系統提示文本 左懸浮 字體18 去粗 顏色 行高 */ .con h3{ float:left; margin:0px; margin-left:10px; line-height: 40px; color:#fff; font-size:18px; font-weight: normal;
} /* 2.2 設定右邊邊框 右懸浮 字大小 下劃線 位置 */ .con a{ float:right; width:20px; height:20px; background: #fff; margin:10px 10px 0 0 ; text-decoration: none; line-height: 20px; text-align: center; font-size:20px; border-radius: 4px; } /* 3.中間文字 行高 字20 位置 */ .span{ height: 200px; text-align: center; line-height: 200px; font-size:20px; } /* 4.底部設置 行高54 寬500 位置 上邊框 */ .regist{ width:500px; height: 54px; padding-top:5px; border-top: 1px solid red; } /* 4.1 輸入盒子設置 寬100 高36 右浮動 字16 位置 */ .regist input{ width:100px; height:36px; float:right; border-radius:4px; font-size:16px; margin:0 10px 0 0 ; }
</style> </head> <body> <!-- 1.搭建盒子 --> <div class="box"> <!-- 2.系統提示盒子 --> <div class="con"> <h3>系統提示</h3> <a href="#">×</a> </div> <!-- 3.中間文字 --> <div class="span">親，確定這么做嗎？</div> <!-- 4.底部盒子 --> <div class="regist"> <input type="button" value="取消"> <input type="button" value="確定"> </div> </div> </body> </html>
總結
以上是生活随笔為你收集整理的html-css练习题（系统提示）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jquery特殊效果
- 下一篇： 系统总结学习 Python 的 14 张