首先进行一个body对登录元素进行一个列表设计
1 <body> 2 <div id="box"> 3 <h2> 4 会员登陆 5 </h2> 6 <form action="#"> 7 <div> 8 <span>姓名：</span> 9 <input type="text"> 10 </div> 11 <div> 12 <span>密码：</span> 13 <input type="text"> 14 </div> 15 <div> 16 <span>邮箱：</span> 17 <input type="text"> 18 </div> 19 20 </form> 21 22 </div> 23 </body>
body总有默认的外边距，一般在设计中首先会把一些元素的外边距取消
margin：0
/*body总有默认的外边距 margin：0*/ body{ margin: 0; padding: 0; text-decoration: none; }
对标题，表格，表单进行设计
1 #box{ 2 width: 300px; 3 border: 1px solid red; 4 } 5 h2 { 6 font-size: 16px; 7 background-color: #3cc7f5; 8 line-height: 20px; 9 color: white; 10 text-align: center ; 11 margin: 0; 12 13 } 14 form{ 15 background: bisque; 16 } 17 div:nth-of-type(1) input{ 18 border: 3px solid blue; 19 } 20 div:nth-of-type(2) input{ 21 border: 3px dashed olivedrab; 22 }div:nth-of-type(3) input{ 23 border: 3px solid black; 24 }
总代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*body总有默认的外边距 margin：0*/ 8 body{ 9 margin: 0; 10 padding: 0; 11 text-decoration: none; 12 } 13 #box{ 14 width: 300px; 15 border: 1px solid red; 16 } 17 h2 { 18 font-size: 16px; 19 background-color: #3cc7f5; 20 line-height: 20px; 21 color: white; 22 text-align: center ; 23 margin: 0; 24 25 } 26 form{ 27 background: bisque; 28 } 29 div:nth-of-type(1) input{ 30 border: 3px solid blue; 31 } 32 div:nth-of-type(2) input{ 33 border: 3px dashed olivedrab; 34 }div:nth-of-type(3) input{ 35 border: 3px solid black; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="box"> 41 <h2> 42 会员登陆 43 </h2> 44 <form action="#"> 45 <div> 46 <span>姓名：</span> 47 <input type="text"> 48 </div> 49 <div> 50 <span>密码：</span> 51 <input type="text"> 52 </div> 53 <div> 54 <span>邮箱：</span> 55 <input type="text"> 56 </div> 57 58 </form> 59 60 </div> 61 </body> 62 </html>
内外边距
元素代码和盒子模型一样
margin的格式：
margin：0默认上下左右都为0
margin：0 1px上下为0，左右为1px
margin：0 1px 2px 3px 顺时针旋转赋值
margin：0：
margin：0 1px 2px 3px
1 h2 { 2 font-size: 16px; 3 background-color: #3cc7f5; 4 line-height: 20px; 5 color: white; 6 text-align: center ; 7 margin:0 1px 2px 3px; 8 9 }
内边距: padding
/*内边距*/ div:nth-of-type(1){ padding: 10px; }
正常padding为0效果：
圆角边距
-
边框圆角：
创建一个div表格，默认是方的，通过更改圆角边框的值进行圆角化
border – radius：xxx
格式：border – radius： 10px上下左右四个角
border – radius： 10px 50px 左上右下 右上左下
border – radius：10px 50px 10px 50px顺时针旋转
设计圆圈：圆角 = 宽度的一半（半径）
div{ /*边框圆角： border-radius: 10px 上下左右 border-radius: 10px 50px 左上右下 右上左下 border-radius: 10px 50px 10px 50px 顺时针 */ /*圆圈： 圆角 = 宽度的一半（半径）*/ width: 100px; height: 100px; border: 10px solid red; border-radius: 100px ; }
-
圆形头像示例
导入img设置圆角边距和宽高
img{ border-radius: 184px 184px 184px 184px; width: 50px; height: 50px; }
阴影加图片居中
单纯一张图片没有固定的宽度，需要添加div并对div边框进行设计
要求有块元素
居中条件：
-
margin：0 auto；
-
text- align： center
添加阴影效果：
box – shadow：x轴偏移量 y轴偏移量 阴影模糊半径 颜色
img{ border-radius: 184px 184px 184px 184px; width: 100px; height: 100px; box-shadow: 10px 10px 50px yellow ; } image-20221119094326765
原文地址：http://www.cnblogs.com/GUGUZIZI/p/16905499.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
