CSS样式实例—登录界面
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0px;padding: 0px;}#login-module{height: 408px;width: 368px; background-color: bisque;margin: 100px auto 0px auto;border: 1px solid gray;}p {display: inline-block;font-size: 28px;margin-top: 30px;width: 86%;}#login-title {width: 86%;border-bottom: 1px solid #ee7700;margin-bottom: 60px;margin-top: 0px;margin-right: auto;margin-left: auto;}.login-msg img {position: absolute;top: 12px;left: 8px;}.login-msg input {width: 100%;height: 42px;text-indent: 2.5rem;}.login-msg {width: 86%;position: relative;margin:30px auto;}#login-submit {width: 86%;margin: 0px auto;}button {width: 100%;height: 45px;background-color: #01A185;border: none;color: white;font-size: 18px;</style></head><body><div id="login-module"><div id="login-title"><p class="title-name">登录</p></div><div class="login-msg login-user"><img src="img/user.png" width="20" height="20" alt=""/><input type="text"placeholder="用户名" /></div><div class="login-msg login-pwd"><img src="img/lock.png" width="20" height="20" alt=""/><input type="text"placeholder="密码" /></div><div id="login-submit"><a href="#" target="_self"><button>登 录</button></a></div></div></body></html>
效果图：
