潭州学院html学习（day09）
一.表单
action="http:www.baidu.com" 提交表单的后台地址 method='get' 提交表单的方式（post/get）
表单元素：input是行块级元素
1. action="http://www.baidu.com" 提交信息的目标地址
2. method="" 值：get post 方式
3. type="" 每个表单元素都有一个type属性，值不同 功能也不同
4. name="" 指定表单元素的名字，对表单元素进行标识，与value属性的值进行对应，后台获取提交的值，就需要通过name
5. value="yajie" 表单默认值, 或者表单中输入的值
6. placeholder="请输入用户名" 提示信息（css3）
7. disabled 禁用输入框
selected 默认选中
disabled 禁用表单元素
multiple 按住Ctrl就可以选中多个
size 使下拉列表显示多个
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <style> *{padding: 0;margin: 0;} ul,ol{list-style: none;} a{text-decoration: none;color:inherit;} input{ border:2px solid hotpink; } div{ width:500px; background: antiquewhite; margin: 80px auto; box-shadow: 0 0 10px 0; padding: 10px; position: center; float: bottom; } </style> </head> <body> <div> <form action="http://www.baidu.com" method="post"> <label>用户名:<input type="text" name="username"></label><br><br> <label> 密码:<input type="password" name="password"></label><br><br> <label>年龄:<input type="text" name="age"></label><br><br> 请选择你的性别： <label><input type="radio" name="sex" id="男">男</label> <label><input type="radio" name="sex" id="女">女</label><br><br> 请输入你喜欢的运动： <label><input type="checkbox" name="apple" checked>苹果</label> <label><input type="checkbox" name="banana" checked>香蕉</label> <label><input type="checkbox" name="watermelon" checked>西瓜</label> <label><input type="checkbox" name="柠檬" checked>melon</label><br><br> <select name="select" id="select" multiple size="3"> <option value="" selected>天蓝</option> <option value="" selected>张帅</option> <option value="">九重领</option> <option value="">金刚</option> <option value="" disabled>贫困</option> <option value="">XHS</option> </select><br><br> <input type="submit" value="Submit"> <inpyt type="reset" value="重置"> </form> </div> </body> </html>
二.阿里图标的引入
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阿里图标</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_767914_rs7fzx662yb.css"> <style> *{padding:0;margin: 0;} a{text-decoration: none; color:inherit;} ol,ul{list-style: none;} .iconfont{ font: bold 50px/100px ''; color: green; margin: 50px 50px; display: block; float: right; position: absolute; } </style> </head> <body> <i class="iconfont icon-gouwuchekong"></i> </body> </html>
三.常用css2,css3属性
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1. minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href=""> <script src=""></script> <title>Document</title> <style> * { padding: 0; margin: 0; } ol,ul{ list-style: none; } a{ text-decoration: none; color:inherit; } .box{ width: 300px; height: 100px; background: hotpink; color: darkblue; /* 值： */ /* overflow: hidden; */ /* 超出隐藏 */ /* overflow: scroll; */ /* 超出x,y轴出现滚动条 */ /* overflow: auto; */ /* 超出出现滚动条 */ /* overflow-x: ; */ /* x轴溢出处理方式 */ /* overflow-y: ; */ /* y轴溢出处理方式 */ /* font */ /* font-style: italic; */ /* 字体风格 */ /* font-family: '华文行楷' */ /* 字体类型 */ font-family: '华文行楷','华文中宋','微软雅黑'; /* */ font-weight: bold; /* 加粗 */ /* font-weight: normal; */ /* 不加粗 */ line-height: 100px; text-align: center; } .box2{ width: 300px; margin-top: 10px; background: hotpink; color: darkblue; text-align: center; /* padding: 10px 0; */ line-height: 40px; } /* 字体的复合属性 */ .box1 p{ font: 20px ''; } /* 字体大小 字体类型 这个最简 */ .box1 p{ font: 20px '华文行楷'; } /* 字体大小 字体类型 */ .box1 p{ font: 20px/100px '华文行楷'; } /* 字体大小/字体行高 字体类型 */ .box1 p{ font: bold 20px/100px '华文行楷'; } /* 字体粗细 字体大小/字体行高 字体类.box1 型 */ .box1 p{ font: bold italic 20px/100px '华文行楷'; } /* 字体粗细 字体风格 字体大小/字体行高 字体类型 */ .box3{ background: purple; color: #fff; padding: 10px 0; /* text-transform: capitalize; */ /* 单词首字母大写 */ /* text-transform: uppercase; */ /* 单词全部大写 */ text-transform: lowercase; /* 单词全部小写 */ /* letter-spacing: 10px; */ /* 字间距 */ word-spacing: 20px; word-break: break-all; } .box5{ width: 100px; height: 100px; background: purple; cursor: pointer; opacity: 0.5; /* 兼容主流浏览器（谷歌，火狐，ie8以上）值：0-1 0是完全透明，1完全不透明 */ filter: alpha(opacity=50); /* 兼容ie8及其以下 值：0-100 0是完全透明，100完全不透明 */ } </style> </head> <body> <div class="box"> <p> <!-- 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。 是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。 --> 永和九年 </p> </div> <div class="box2">永和九年</div> <div class="box3"> <p> I love you 永和 九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。fgfdsjgfjgsdkfgjsdf </p> </div> <div class="box4"> <h3>我是 ¦ h3</h3> </div> <div class="box5"></div> <script> </script> </body> </html>
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1. minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href=""> <script src=""></script> <title>Document</title> <style> * { padding: 0; margin: 0; } ol,ul{ list-style: none; } a{ text-decoration: none; color:inherit; } .box1 p{ width: 300px; /* height: 100px; */ background: darkblue; color: yellow; display: -webkit-box; /*继承block的属性*/ -webkit-box-orient:vertical; /*元素垂直显示*/ -webkit-line-clamp:3; /*设置文本显示的行数*/ overflow: hidden; /*（不能使用padding）*/ } body,html{ height: 100%; } body{ /* 线性渐变 */ /* background: -webkit-linear-gradient(left top,deeppink,yellow,#153170); */ /* background: -webkit-linear-gradient(left top,deeppink 10%,yellow 20%,#153170 100%); */ background: -webkit-radial-gradient(left top,deeppink,yellow,#153170); background: -webkit-radial-gradient(center,deeppink,yellow,#153170); /* 径向渐变 */ } .box2{ width: 200px; height: 100px; background:darkcyan; border-radius: 10px; /* 当半径为宽高的一半时，为圆 */ /* border-radius: 50%; */ /* 相对于自身的宽高 */ } .box3{ width: 100px; height: 100px; background:darkblue; transition-property: width; /* 哪个属性过渡，不写就默认all，全部属性都会过渡 */ transition-duration: 1s; /* 过渡持续的时间 */ transition-delay: 2s; /* 过渡延迟 */ transition-timing-function: ease; /* 过渡曲线：就好比你跑步，加速，减速，先加速后减速 */ /* 1. linear: 匀速 2. ease：慢快慢 3. ease-in：匀加速 4. ease-out：匀减速 */ } .box3:hover{ width: 300px; background:deeppink; } /* 复合属性 */ .box4{ width: 100px; height: 100px; background:brown; transition: 2s; /* 过渡时间 */ transition: width 2s; /* 过渡属性 过渡时间 */ transition: 2s linear; /* 过渡时间 过渡曲线 */ transition: width 2s linear; /* 过渡属性 过渡时间 过渡曲线 */ transition: width 2s 3s linear; /* 过渡属性 过渡时间 延时时间 过渡曲线 */ } .box4:hover{ width: 300px; background:deeppink; } .box5{ width: 100px; height: 100px; background:darkgoldenrod; transition: 1s; } .box5:hover{ transform: rotate(90deg);/* 默认值，绕Z轴转 */ /* transform: rotateX(180deg); *//* （绕X轴顺时针转） */ /* transform: rotateY(180deg); *//* （绕Y轴逆时针转） */ /* 大于1放大，小于1缩小 */ /* transform: scale(1.5); */ /* transform: scale(0.5); */ transform: translate(100px); /* 只有一个值，x轴位移 */ transform: translateY(100px); /* y轴位移 */ transform: translateZ(100px); /* z轴位移 需要3d环境 */ /* transform: rotate(90deg) scale(0.5) translate(100px); */ transform: rotate(90deg); transform-origin: 100px 100px; /* 旋转基点 */ transform-origin: right top; /* 旋转基点 */ } .box6{ display: flex; justify-content: space-between; /* 水平方向 */ /* justify-content: space-around; */ align-content: space-between; /* 垂直方向 */ /* align-content: space-around; */ flex-wrap: wrap; width: 450px; height: 330px; box-shadow: 0 0 10px 0 #000; margin: auto; } .box6 p{ width: 100px; height: 100px; background: darkblue; } </style> </head> <body> <div class="box1"> <p>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。 是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。</p> </div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> </div> <script> </script> </body> </html>
