<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>外边距和内边距</title> <style type="text/css"> div{ border: dashed 2px red; /*边框的样式*/ width: 500px; /*宽度*/ /* margin-left: 100px; /!*左外边距*!/ margin-top: 100px; /!*上外边距*!/*/ margin:30px; /*上 右 下 左 顺时针顺序*/ margin:30px 50px; /*上下 30PX 左右 50PX*/ padding: 30px; /*上 右 下 左 顺时针顺序 内边距*/ } </style> </head> <body> <div><img src="image/cat.jpg" height="200"></div> <div><img src="image/cat.jpg" height="200"></div> </body> </html>
实现会员登陆的效果 创建一个html页面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>登录界面</title> <style type="text/css"> *{ /*整个网页中的所有元素 去掉内边距和外边距*/ padding: 0px; margin: 0px; } div{ width: 300px; border: solid 1px #3a6587; /*盒子的边框样式*/ margin: auto; /*水平居中*/ } h2{ padding-left: 20px; /*左内边距*/ line-height: 50px; /*行高*/ height: 50px; /*高度*/ color: white; /*字体颜色*/ background-color:cornflowerblue ; /*背景颜色*/ } form{ padding: 30px 20px; /*上下边距30px 左右边距20px*/ } td{ text-align: right; /*文本对齐方式*/ } </style> </head> <body> <div> <h2>会员登录</h2> <form action="" method="post"> <table> <tr> <td>姓名:</td> <td><input type="text"></td> </tr> <tr> <td>邮箱:</td> <td><input type="text"></td> </tr> <tr> <td>联系电话:</td> <td><input type="text"></td> </tr> <tr> <td></td> <td style="text-align: left"><input type="submit" value="登录"></td> </tr> </table> </form> </div> </body> </html>
效果图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> /* border-style: 边框类型 border-color: 边框颜色 border- 边框粗细 设置的时候：都是按照 上右下左的顺序依次赋值！ */ *{ /*给页面中所有的元素清空内外边距*/ margin: 0px; padding: 0px; } #box{ width: 300px; /*整个盒子的宽度*/ border: 1px solid red; /*盒子的边框*/ margin: 0px auto; /*盒子相对于浏览器 水平居中*/ /*网页中水平居中的必要条件 01.是块元素 02.固定的宽度？？？？ span是根据内容来自动调整宽度！！*/ } div:nth-of-type(1) input{ border: 1px solid red; /*1px红色的实线*/ } div:nth-of-type(2) input{ border: 1px dashed blue; /*1px蓝色的虚线*/ } div:nth-of-type(3) input{ border: 1px dotted deeppink; /*1px深粉色的点实线*/ } h2{ height: 35px; /*h2的高度*/ line-height: 35px; /*行高*/ background: #3A6587; color: #F8F8F3; padding-left:20px ; } form{ background: #C8ECE3; } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="#" method="post"> <div> 姓名：<input type="text"> </div> <div> 邮箱：<input type="text"> </div> <div> 电话：<input type="text"> </div> </form> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 120px; height:120px; padding: 5px; margin: 10px; border: 1px solid red; box-sizing: border-box; } #f{ width: 50px; height:50px; border: 1px solid blue; /*box-sizing: border-box;盒子的高度和宽度就是内容元素的高度和宽度*/ /*box-sizing: content-box;默认值，盒子的总尺寸*/ box-sizing: inherit;/* 继承父类的盒子尺寸类型*/ } </style> </head> <body> <div id="box"> <div id="f"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>圆角属性</title> <style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red; /* border-radius:5px;四个角都是相同的弧度*/ /* border-radius:5px 10px 15px 20px; 左上 --》左下 顺时针顺序*/ border-radius:5px 20px; /*左上和右下 都是5px 右上和左下都是20px*/ } </style> </head> <body> <div></div></body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置半圆</title> <style type="text/css"> div{ background: orange; margin: 20px; } div:nth-of-type(1){ width: 100px; height: 50px; border-radius: 50px 50px 0 0; /*左上和右上*/ } div:nth-of-type(2){ width: 100px; height: 50px; border-radius: 0 0 50px 50px;/*左下和右下*/ } div:nth-of-type(3){ width: 50px; height: 100px; border-radius: 50px 0 0 50px;/*左上和左下*/ } div:nth-of-type(4){ width: 50px; height: 100px; border-radius: 0 50px 50px 0;/*右上和右下*/ } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置扇形和圆形</title> <style type="text/css"> div{ background: orange; margin: 20px; } div:nth-of-type(1){ width: 50px; height: 50px; border-radius: 50px 0 0 0; /*左上*/ } div:nth-of-type(2){ width: 50px; height: 50px; border-radius: 0 50px 0 0; /*右上*/ } div:nth-of-type(3){ width: 50px; height: 50px; border-radius: 0 0 50px 0; /*右下*/ } div:nth-of-type(4){ width: 50px; height: 50px; border-radius: 0 0 0 50px; /*左下*/ } div:nth-of-type(4){ width: 50px; height: 50px; border-radius:50px; /*设置所有 圆形*/ } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子阴影</title> <style type="text/css"> div{ height: 100px; width: 100px; border: 1px solid red; border-radius: 10px; box-shadow:10px 10px 10px orange;/*外阴影*/ /* box-shadow:inset 10px 10px 10px orange;内阴影*/ } </style> </head> <body> <div></div> </body> </html>