标签：显示 styles 右上角 gis 高度 roi ali bottom username
1.HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 引入css文件 --> <link rel="stylesheet" href="login.css"> </head> <body> <header> <img src="http://www.xxx.cn/tstore_v1/images/header/logo.png"> <h1>欢迎登录</h1> </header> <article> <form action="http://www.xxx.cn"> <div id="form_div"> <div> <p> 登录学子商城 <a href="">新用户注册</a> </p> <div class="filed"> <input type="text" placeholder="请输入您的用户名" name="username"> <img src="http://www.xxx.cn/tstore_v1/images/login/yhm.png"> <p>用户名不能为空！</p> </div> <div class="filed"> <input type="password" placeholder="请输入您的密码" name="passowrd"> <img src="http://www.xxx.cn/tstore_v1/images/login/mm.png"> <p>密码不能为空！</p> </div> <div id="auto_div"> <input id="auto" type="checkbox" name="auto"> <!-- label用于扩充点击范围 --> <label for="auto">自动登录</label> <a href="">忘记密码？</a> </div> <input type="submit" value="登录"> </div> </div> </form> <div id="service_div"> <div> <img src="http://www.xxx.cn/tstore_v1/images/footer/icon1.png"> <p>品质保障</p> </div> <div> <img src="http://www.xxx.cn/tstore_v1/images/footer/icon2.png"> <p>私人订制</p> </div> <div> <img src="http://www.xxx.cn/tstore_v1/images/footer/icon3.png"> <p>学员特供</p> </div> <div> <img src="http://www.xxx.cn/tstore_v1/images/footer/icon4.png"> <p>专属特权</p> </div> </div> </article> <footer> <div> <div id="left_div"> <img src="http://www.xxx.cn/tstore_v1/images/footer/logo.png"> <img src="http://www.xxx.cn/tstore_v1/images/footer/footerFont.png"> </div> <div id="center_div"> <ul> <li><a href="">买家帮助</a> <ul> <li><a href="">新手指南</a></li> <li><a href="">服务保障</a></li> <li><a href="">常见问题</a></li> </ul> </li> <li><a href="">商家帮助</a> <ul> <li><a href="">商家入驻</a></li> <li><a href="">商家后台</a></li> </ul> </li> <li><a href="">关于我们</a> <ul> <li><a href="">关于达内</a></li> <li><a href="">联系我们</a></li> <li> <img src="http://www.xxx.cn/tstore_v1/images/footer/wechat.png"> <img src="http://www.xxx.cn/tstore_v1/images/footer/sinablog.png"> </li> </ul> </li> </ul> </div> <div id="right_div"> <div> <p>学子商城客户端</p> <img src="http://www.xxx.cn/tstore_v1/images/footer/ios.png"> <img src="http://www.xxx.cn/tstore_v1/images/footer/android.png"> </div> <img src="http://www.xxx.cn/tstore_v1/images/footer/erweima.png"> </div> </div> <p>©2017 xxx集团有限公司 版权所有 京ICP证xxxxxxxxxxx</p> </footer> </body> </html>
2.CSS部分
@charset "UTF-8"; body { /* 去掉body自带8个像素的外边距 */ margin: 0; font: 12px "simhei", Arial, Helvetica, sans-serif; color: #666; background-color: #f5f5f5; } header { /* 实现居中效果 */ width: 1000px; margin: 0 auto; overflow: hidden; /* 解决高度识别为0的问题 */ margin-top: 20px; margin-bottom: 30px; } header>img { float: left; margin-left: 40px; } header>h1 { float: left; font-size: 24px; color: #4f4d4e; /* 去掉加粗 */ font-weight: normal; margin-left: 10px; margin-top: 10px; } #form_div { height: 560px; background-image: url("http://www.xxx.cn/tstore_v1/images/regist.png"); } #form_div>div { /* 浮动到右上角 */ float: right; margin: 122px 122px 0 0; width: 253px; height: 277px; padding: 10px; /* 实现内容不贴边显示 */ background-color: rgba(0, 0, 0, 0.3); } #form_div>div>p { color: white; font-size: 18px; border-bottom: 1px solid white; padding-bottom: 10px; } /* 通过分组选择器选中两个超链接 */ p>a, #auto_div>a { float: right; color: white; font-size: 12px; text-decoration: none; margin-top: 5px; } .filed>input { width: 213px; border: 0; /* 去掉边框 */ padding: 10px 20px; } .filed { position: relative; /* 给图片做位置参考 */ } .filed>img { position: absolute; top: 4px; right: 20px; } .filed>p { color: red; margin-bottom: 10px; } #auto_div>label { color: white; } #auto_div>input { /* 如果需要对某个元素做位置的微调则使用以下方式 */ position: relative; top: 3px; } input[type=‘submit‘]{ width: 100%; height: 35px; background-color: #0aa1ed; color: white; border: 0; border-radius: 3px; margin-top: 5px; } #service_div{ width: 1000px; margin: 0 auto; margin-top: 43px; margin-bottom: 74px; overflow: hidden;/* 解决高度为0的问题 */ } #service_div>div{ width: 250px; float: left;/* 纵向排列改成横向 */ text-align: center; } #service_div>div>p{ margin-top: 0; } footer{ background-color: white; overflow: hidden; } footer>div{ width: 1000px; margin: 0 auto; overflow: hidden;/* 高度识别为0的问题 */ margin-top: 62px; } footer>div>div{ width: 333px; float: left; } footer>p{ text-align: center; color: black; } #center_div ul{ list-style-type: none;/* 去掉图标 */ padding: 0;/* 去掉二层ul的缩进 */ } #center_div>ul>li{ float: left; width: 111px; text-align: center; } #center_div>ul>li>a{ font-size: 14px; color: #333; text-decoration: none; } #center_div>ul>li>ul>li>a{ font-size: 12px; color: #808080; text-decoration: none; /* 修改显示方式为块级 不然添加不了外边距 */ display:block; margin-top: 10px; } #right_div>div{ width: 160px; float: left; text-align: center; } #right_div>img{ margin-top:13px; float: left; } #right_div>div>p{ font-size: 14px; margin-bottom: 11px; }
标签：显示 styles 右上角 gis 高度 roi ali bottom username
原文地址：https://www.cnblogs.com/hello4world/p/12178515.html
