html 当时做到的就是这些了
<!DOCTYPE html><html lang="en"><head> <title>病人信息查询系统</title> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet" type="text/css"></head><body>
<div class="logo"> <img src="images/6.jpg"/> </div> <div class="sign"> <h6>桂航医院</h6> </div>
<div class="header"> <h1>病人查询</h1> </div>
<div class="padding-all"> <div class="design-w3l"> <div class="mail-form-agile">
<input type="text" name="text" placeholder="输入病人姓名"/> <br> <br> <input type="text" name="text" placeholder="输入病人身份证号"/> <br> <br> <input type="text" name="text" placeholder="输入病人预留手机号"/> <br> <br> <llm>获取验证码</llm> <input type="text" name="text" placeholder="验证信息是："/> <input type="submit" value="查询">
</div> <div class="clear"> </div> </div></div></body></html>css
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}ol,ul{list-style:none;margin:0px;padding:0px;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:‘‘;content:none;}table{border-collapse:collapse;border-spacing:0;}/* start editing from here */a{text-decoration:none;}.txt-rt{text-align:right;}/* text align right */.txt-lt{text-align:left;}/* text align left */.txt-center{text-align:center;}/* text align center */.float-rt{float:right;}/* float right */.float-lt{float:left;}/* float left */.clear{clear:both;}/* clear float */.pos-relative{position:relative;}/* Position Relative */.pos-absolute{position:absolute;}/* Position Absolute */.vertical-base{ vertical-align:baseline;}/* vertical align baseline */.vertical-top{ vertical-align:top;}/* vertical align top */nav.vertical ul li{ display:block;}/* vertical menu */nav.horizontal ul li{ display: inline-block;}/* horizontal menu */img{max-width:100%;}/*end reset*//****-----start-body----****/
body{text-align: center;background: url(../站点/66.jpg)0px no-repeat;background-size:cover;background-attachment: fixed;}
@font-face{font-family: "Audiowide-Regular";src:url(../fonts/Audiowide-Regular.ttf);}@font-face{font-family: "Asap-Regular";src:url(../fonts/Asap-Regular.ttf);}.sign {text-align: center;padding-bottom:75px;}.sign h6 img{width:7%;}.sign h6{ width: 50px; height: 0px; border-left-width: 20px; padding-left: 8px; font-size: 30px; color:rgba(0,0,0,1.00); font-family:"aguafina-script"; letter-spacing:3px; margin-top: 0px;} .logo{ max-width: 6%; padding-left:0px;}.padding-all{
padding-left: 100px; padding-right: 100px; padding-top: 5px; padding-bottom: 200px;
}
.header {text-align: center;padding-bottom:75px;}.header h1 img{ top: 40px; width: 400px; height: 50px;}
p ,a{font-family: "Asap-Regular";}
.header h1 {font-size:50px;color:rgba(18,49,103,1.00);font-family: "Audiowide-Regular";letter-spacing:3px;margin:0 auto;}
.design-w3l{width:36%;margin:0 auto;}
.mail-form-agile { padding: 50px 40px; text-align: center; margin:0px; background: rgba(23, 218, 218, 0.18); color: #000; margin:0 auto;}
.padding {margin: 5px 0 30px;}
.LoginPadding { margin: 20px 0 30px;}.mail-form-agile llm{ display:inline-block; width:40%; background-color: dodgerblue; padding: 13px 10px; text-align: left;
}.mail-form-agile llm:hover{ background: rgba(221,36,36,1.00); font-size:large; color:rgba(96,85,85,1.00);}
.mail-form-agile input[type="text"], .mail-form-agile input[type="password"] {padding: 13px 10px;width: 92.5%;font-size: 16px;outline: none;background:transparent;border:0px;border-bottom: 1px solid rgba(110,19,224,1.00);border-radius: 0px;font-family: "Asap-Regular";letter-spacing:1.6px;color:rgba(49,46,69,1.00);}::-webkit-input-placeholder{ color:#b4b0b0 !important; font-weight:400;}.mail-form-agile input[type="submit"]{font-size: 18px;padding: 10px 20px;letter-spacing:1.2px;border: none;text-transform: capitalize;outline: none;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background: #D65B88;color: #fff;cursor: pointer;margin: 0 auto;font-family: "Asap-Regular";-webkit-transition-duration: 0.9s;transition-duration: 0.9s;}
.mail-form-agile input[type="submit"]:hover { -webkit-transition-duration: 0.9s; transition-duration: 0.9s; background:rgba(91, 157, 214, 0.76);}
.mail-form-agile div{ display: inline; font-size: 18px; padding: 11px 20px; letter-spacing:1.2px; border: none; text-transform: capitalize; outline: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background: #D65B88; color: #fff; cursor: pointer; margin: 0 auto; font-family: "Asap-Regular"; -webkit-transition-duration: 0.9s; transition-duration: 0.9s;}
.mail-form-agile div:hover { -webkit-transition-duration: 0.9s; transition-duration: 0.9s; background:rgba(91, 157, 214, 0.76);}
.footer{text-align: center;padding-top:75px;letter-spacing:1.6px;line-height:22px;}.footer p {font-size: 16px;color: #fff;margin: 0px;letter-spacing:1.4px;}.footer p a {color:#D65B88;font-weight:blod;-webkit-transition-duration: 0.8s;transition-duration: 0.8s;}.footer p a:hover {color: #51cbe1; -webkit-transition-duration: 0.8s; transition-duration: 0.8s;}使用的框架里面很多的东西我是过了两个多月才搞懂 现在让写一个网页 也是只会用 html 和css 写一个上拉下拉 hover 和字体改变使用一些框架正在慢慢学习 我会找出我之前 css 和html的学习笔记 来记录的学习生活
原文地址：https://www.cnblogs.com/soyadios/p/11960738.html
时间： 2024-10-08 09:46:39