实用的网页模板（一）

1（登录）

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--><head><meta charset="UTF-8" /><!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  --><title>Login and Registration Form with HTML5 and CSS3</title><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Login and Registration Form with HTML5 and CSS3" /><meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" /><meta name="author" content="Codrops" /><link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /><link rel="stylesheet" type="text/css" href="css/style.css" /><link rel="stylesheet" type="text/css" href="css/animate-custom.css" /></head><body><div class="container"><header><h1>一些标题<span>另一种颜色</span></h1><nav class="codrops-demos"><span>关于<strong>"提示"</strong>的小标题</span></nav></header><section>                <div id="container_demo" ><a class="hiddenanchor" id="toregister"></a><a class="hiddenanchor" id="tologin"></a><div id="wrapper"><div id="login" class="animate form"><form  action="投递的链接" autocomplete="on"> <h1>登 录</h1> <p> <label for="username" class="uname" data-icon="u" > 用户名： </label><input id="username" name="username" required="required" type="text" placeholder="username"/></p><p> <label for="password" class="youpasswd" data-icon="p">密  码：</label><input id="password" name="password" required="required" type="password" placeholder="password" /> </p><p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">记住我</label></p><p class="login button"> <input type="submit" value="Login" /> </p><p class="change_link">新用户?<a href="#toregister" class="to_register">注册</a></p></form></div><div id="register" class="animate form"><form  action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label><input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /></p><p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label><input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> </p><p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label><input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/></p><p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label><input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/></p><p class="signin button"> <input type="submit" value="Sign up"/> </p><p class="change_link">Already a member?<a href="#tologin" class="to_register"> Go and log in </a></p></form></div></div></div>  </section></div></body>
</html>

@font-face {font-family: 'BebasNeueRegular';src: url('fonts/BebasNeue-webfont.eot');src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight: normal;font-style: normal;
}/*CSS reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;
}
html,body {margin:0;padding:0;height:100%;
}
table {border-collapse:collapse;border-spacing:0;
}
fieldset,img { border:0;
}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;
}
caption,th {text-align:left;
}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;
}
q:before,q:after {content:'';
}
abbr,acronym { border:0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}/*General Demo Style*/body{font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;background: #fff url(../images/bg.jpg) repeat top left;font-weight: 400;font-size: 15px;color: #1d3c41;overflow-y: scroll;
}
a{color: #333;text-decoration: none;
}
.container{width:100%;height:100%;position: relative;text-align: center;
}
.clr{clear: both;
}
.container>header{padding: 20px 30px 10px 30px;margin: 0px 20px 10px 20px;position: relative;display: block;text-shadow: 1px 1px 1px rgba(0,0,0,0.2);text-align: center;
}
.container>header h1{font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;font-size: 35px;line-height: 35px;position: relative;font-weight: 400;color: rgba(26,89,120,0.9);text-shadow: 1px 1px 1px rgba(0,0,0,0.1);padding: 0px 0px 5px 0px;
}
.container>header h1 span{color: #7cbcd6;text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container>header h2{font-size: 16px;font-style: italic;color: #2d6277;text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}/*Header Style*/.codrops-top{line-height: 24px;font-size: 11px;background: rgba(255, 255, 255, 0.4);text-transform: uppercase;z-index: 9999;position: relative;box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{padding: 0px 10px;letter-spacing: 1px;color: #333;text-shadow: 0px 1px 1px #fff;display: block;float: left;
}
.codrops-top a:hover{background: #fff;
}
.codrops-top span.right{float: right;
}
.codrops-top span.right a{float: left;display: block;
}.codrops-demos{text-align:center;display: block;padding: 14px;
}
.codrops-demos span{display: inline-block;padding-right: 15px;text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.codrops-demos a,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{display: inline-block;font-style: italic;font-size: 12px;padding: 3px 5px;margin: 0px 3px;font-weight: 800;box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.1);background: rgba(104,171,194,0.5);
}
.codrops-demos a:hover{background: #4fa2c4;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{color: rgba(104,171,194,1);background: rgba(255,255,255,0.9);box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}

demo.css

/*remove codrops styles and reset the whole thing*/#container_demo{text-align: left;margin:0;padding:0;margin:0auto;font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
}/** fonts used for the icons **/@font-face {font-family: 'FontomasCustomRegular';src: url('fonts/fontomas-webfont.eot');src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/fontomas-webfont.woff') format('woff'),url('fonts/fontomas-webfont.ttf') format('truetype'),url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');font-weight: normal;font-style: normal;
}
@font-face {font-family: 'FranchiseRegular';src: url('fonts/franchise-bold-webfont.eot');src: url('fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/franchise-bold-webfont.woff') format('woff'),url('fonts/franchise-bold-webfont.ttf') format('truetype'),url('fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');font-weight: normal;font-style: normal;}
a.hiddenanchor{display: none;
}/** The wrapper that will contain our two forms **/#wrapper{width:60%;right: 0px;min-height: 560px;    margin: 0px auto;    width: 500px;position: relative;
}/**** Styling the form elements **//**** general text styling ****/#wrapper a{color: rgb(95, 155, 198);text-decoration: underline;
}#wrapper h1{font-size: 48px;color: rgb(6, 106, 117);padding: 2px0 10px 0;font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;font-weight: bold;text-align: center;padding-bottom: 30px;
}/** For the moment only webkit supports the background-clip:text;*/#wrapper h1{background:-webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px);-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}
#wrapper h1:after{content:' ';display: block;width:100%;height: 2px;margin-top: 10px;background:-moz-linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); background:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,184,189,0)), color-stop(20%,rgba(147,184,189,0.8)), color-stop(53%,rgba(147,184,189,1)), color-stop(79%,rgba(147,184,189,0.8)), color-stop(100%,rgba(147,184,189,0))); background:-webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); background:-o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); background:-ms-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
}#wrapper p{margin-bottom:15px;
}
#wrapper p:first-child{margin: 0px;
}
#wrapper label{color: rgb(64, 92, 96);position: relative;
}/**** advanced input styling ****/
/*placeholder*/::-webkit-input-placeholder  { color: rgb(190, 188, 188); font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ color: rgb(190, 188, 188);font-style: italic;
}
input {outline: none;
}/*all the input except submit and checkbox*/#wrapper input:not([type="checkbox"]){width:92%;margin-top: 4px;padding: 10px 5px 10px 32px;    border: 1px solid rgb(178, 178, 178);-webkit-appearance: textfield;-webkit-box-sizing: content-box;-moz-box-sizing : content-box;box-sizing : content-box;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{border: 1px solid rgba(91, 90, 90, 0.7);background: rgba(238, 236, 240, 0.2);-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}/** the magic icon trick ! **/[data-icon]:after {content: attr(data-icon);font-family: 'FontomasCustomRegular';color: rgb(106, 159, 171);position: absolute;left: 10px;top: 35px;width: 30px;
}/*styling both submit buttons*/#wrapper p.button input{width:30%;cursor: pointer;    background: rgb(61, 157, 179);padding: 8px 5px;font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;color: #fff;font-size: 24px;    border: 1px solid rgb(28, 108, 122);    margin-bottom: 10px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,0px 0px 0px 3px rgb(254, 254, 254),0px 5px 3px 3px rgb(210, 210, 210);-moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,0px 0px 0px 3px rgb(254, 254, 254),0px 5px 3px 3px rgb(210, 210, 210);box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,0px 0px 0px 3px rgb(254, 254, 254),0px 5px 3px 3px rgb(210, 210, 210);-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all0.2s linear;
}
#wrapper p.button input:hover{background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{background: rgb(40, 137, 154);position: relative;top: 1px;border: 1px solid rgb(12, 76, 87);-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{text-align: right;margin: 5px0;
}/*styling the checkbox "keep me logged in"*/.keeplogin{margin-top: -5px;
}
.keeplogin input,
.keeplogin label{display: inline-block;font-size: 12px;    font-style: italic;
}
.keeplogin input#loginkeeping{margin-right: 5px;
}
.keeplogin label{width:80%;
}/*styling the links to change from one form to another*/p.change_link{position: absolute;color: rgb(127, 124, 124);left: 0px;height: 20px;width: 440px;padding: 17px 30px 20px 30px;font-size: 16px    ;text-align: right;border-top: 1px solid rgb(219, 229, 232);-webkit-border-radius: 0 05px 5px;-moz-border-radius: 0 05px 5px;border-radius: 0 05px 5px;background: rgb(225, 234, 235);background:-moz-repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px);background:-webkit-repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px);background:-o-repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px);background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px);
}
#wrapper p.change_link a {display: inline-block;font-weight: bold;background: rgb(247, 248, 241);padding: 2px 6px;color: rgb(29, 162, 193);margin-left: 10px;text-decoration: none;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: 1px solid rgb(203, 213, 214);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s  linear;-o-transition: all 0.4s linear;-ms-transition: all 0.4s  linear;transition: all0.4s  linear;
}
#wrapper p.change_link a:hover {color: rgb(57, 191, 215);background: rgb(247, 247, 247);border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{position: relative;top: 1px;
}/** Styling both forms **/#register,
#login{position: absolute;top: 0px;width:88%;    padding: 18px6% 60px 6%;margin:0 0 35px 0;background: rgb(247, 247, 247);border: 1px solid rgba(147, 184, 189,0.8);-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;-moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;-webkit-box-shadow: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
#register{    z-index: 21;opacity:0;
}
#login{z-index: 22;
}
#toregister:target~#wrapper #register,
#tologin:target~#wrapper #login{z-index: 22;-webkit-animation-name: fadeInLeft;-moz-animation-name: fadeInLeft;-ms-animation-name: fadeInLeft;-o-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: .1s;-moz-animation-delay: .1s;-o-animation-delay: .1s;-ms-animation-delay: .1s;animation-delay: .1s;
}
#toregister:target~#wrapper #login,
#tologin:target~#wrapper #register{-webkit-animation-name: fadeOutLeft;-moz-animation-name: fadeOutLeft;-ms-animation-name: fadeOutLeft;-o-animation-name: fadeOutLeft;animation-name: fadeOutLeft;
}/** the actual animation, credit where due :http://daneden.me/animate/***/.animate{-webkit-animation-duration: 0.5s;-webkit-animation-timing-function: ease;-webkit-animation-fill-mode: both;-moz-animation-duration: 0.5s;-moz-animation-timing-function: ease;-moz-animation-fill-mode: both;-o-animation-duration: 0.5s;-o-animation-timing-function: ease;-o-animation-fill-mode: both;-ms-animation-duration: 0.5s;-ms-animation-timing-function: ease;-ms-animation-fill-mode: both;animation-duration: 0.5s;animation-timing-function: ease;animation-fill-mode: both;
}/** yerk some ugly IE fixes 'cause I know someone will ask "why does it look ugly in IE?", no matter how many warnings I will put in the article*/.lt8 #wrapper input{padding: 10px 5px 10px 32px;width:92%;
}
.lt8 #wrapper input[type=checkbox]{width: 10px;padding:0;
}
.lt8 #wrapper h1{color: #066A75;
}
.lt8 #register{    display: none;
}
.lt8 p.change_link,
.ie9 p.change_link{position: absolute;height: 90px;background: transparent;
}

style.css

2(遮罩窗体)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>遮罩窗体</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-2.1.4.min.js"></script><script src="js/bootstrap.min.js"></script><style></style></head><body><div class="container-fluid text-center"><h2>遮罩层DEMO</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">打开遮罩层</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">标题</h4></div><div class="modal-body">可以是一个表单</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div></body></html>

html

3（表格）

 <center><h3>测量审核申请书</h3><table border="1" width="600px" height="700px"><tbody><tr><td><div align="center">申请机构</div></td><td colspan="3"></td></tr><tr><td>地址</td><td width="30%"></td><td>邮编</td><td width="30%"></td></tr><tr><td>地址</td><td width="30%"></td><td>邮编</td><td width="30%"></td></tr><tr><td>地址</td><td width="30%"></td><td>邮编</td><td width="30%"></td></tr><tr><td>申请项目</td><td colspan="3" height="30%"></td></tr><tr><td colspan="4"><div style="padding-top:30px;padding-left:80px">申请盖章</div></td></tr></tbody></table></center>

html

4（**医院的内部投稿；这是我第一次不拷贝网上的代码，自己敲得，哪里有值得改进的请赐教，我会持续更新）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="CSS/bootstrap.min.css" rel="stylesheet" /><script src="JS/jquery.min.js"></script><script src="JS/bootstrap.js"></script><style>.my_head {background-image: url(Img/title.jpg);}</style></head>
<body style="background-color: #FDF6F0"><div class="container" style="padding:0px; margin:0px auto"><div class="row clearfix"><div class="col-md-10 col-md-offset-1"><img src="Img/title.jpg"></div></div><div class="row clearfix"><nav class="navbar navbar-default col-md-10 col-md-offset-1" role="navigation"><!--导航条  导航条的风格 导航条的位置  role="navigation"就是说该角色进来就可以看到导航--><div class="container"><div id="navbar" class="collapse navbar-collapse col-md-12"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">期刊订阅</a></li>  <!--active就是当前页面的样式--><li><a href="#">广告合作</a></li><li><a href="#">留言板</a></li><li><a href="#">联系我们</a></li><li><a href="#">期刊简介</a></li><li><a href="#">投稿指南</a></li><li><a href="#">EngLish verson</a></li><li><div><form class="navbar-form navbar-right" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="查询文章"></div><button type="submit" class="btn btn-default">查询</button></form></div></li></ul></div></nav></div></div><div class="container"><div class="col-md-2 column"><!--左半部分--><div style="border: solid 1px #D9EDF7;"><div style="width: 100%; height:auto; background-color: #F6B37F; margin-bottom: 5px;"><div class="alert alert-info" style="padding:5px;margin-top:0px">刊期检索</div></div><div class="input-group"><input type="text" class="form-control" placeholder="标题"></div><br /><div class="input-group"><input type="text" class="form-control" placeholder="作者"></div><br /><div class="input-group"><input type="text" class="form-control" placeholder="关键字"></div><br /><button type="button" class="btn btn-default btn-sm col-md-offset-3">查询</button></div><div style="border: solid 1px #D9EDF7;"><div style="width: 100%; height: auto; background-color: #F6B37F; margin-bottom: 5px;"><div class="alert alert-info" style="padding:5px;margin-top:0px">编辑公告</div></div><div class="panel panel-default"><div style="font-family:'Sitka Small';font-size:12px"><a href="#">2017年中国中西医结合治疗皮肤病，近况显著</a><br /><a href="#">2017年中国中西医结合治疗皮肤病，近况显著</a><br /><a href="#">2017年中国中西医结合治疗皮肤病，近况显著</a><br /></div><div class="panel-footer" style="text-align:right"><a href="#">更多>>></a> </div></div></div></div><div class="col-md-8 column"><!--中间显示的部分--><div style="width:100%;height:25px;"><img src="Img/content1.jpg"></div><div style="width:100%; height:250px"><div style="width: 25%; float: left; height: 100%; margin: 10px"><img src="Img/12.jpg"></div><div style="width:65%;float:left;"><h2>伤寒杂病论</h2><p>什么是《伤寒沦》？其实际含义是什么？这是困绕不少初学者的常见问题。说白了，《伤寒论》其实是“论寒伤”。若直译过来，就是“论述寒凉（对人体的）伤害”。但仅仅这样理解，就未免失之于狭隘，比较合乎于书中具体内容的综合认识应该是：“论述寒、凉、温、热等四时之气与时行疫疠之气等诸多病邪对人体所造成的各种各样的伤害及其发生、发展、变化的病理机转以及如何进行辨证论治、处方用药、护理预防的一部中医药学专着。”</p><p style="text-align:right"><a class="btn" href="#">观看更多»</a></p></div></div><div style="clear: both"></div><div style="width:100%;height:25px;"><img src="Img/content2.jpg"></div><!--中间的显示部分最后要放一个选项卡--><div style="margin-top:20px"><div class="row clearfix"><div class="col-md-12 column"><div class="tabbable" id="tabs-516889"><ul class="nav nav-tabs"><li class="active"><a href="#panel-973214" data-toggle="tab">近期文件上传</a></li><li><a href="#panel-619223" data-toggle="tab">用户最多评论</a></li></ul><div class="tab-content"><div class="tab-pane active" id="panel-973214"><div style="background-color: #F6B37F; width:600px;height:80px"><!--item--><h4><a href="#">医书名</a></h4><p>医书名内容简介...........</p><div style="text-align:right;"><small><a href="#">拜读</a>-<a href="#">下载</a></small></div></div><div style="background-color: #F6B37F; width:600px;height:80px"><!--item--><h4><a href="#">医书名</a></h4><p>医书名内容简介...........</p><div style="text-align:right;"><small><a href="#">拜读</a>-<a href="#">下载</a></small></div></div></div><div class="tab-pane" id="panel-619223"><h3>用户的评论需要从数据库中读取</h3></div></div></div></div></div></div><!--中间的显示部分最后放要给选项卡--></div><div class="col-md-2 column"><!--右半部份--><!---读者登陆---><div style="border: solid 1px #D9EDF7;"><div style="width: 100%; height:auto; background-color: #F6B37F; margin-bottom: 5px;"><div class="dropdown"><div class="alert alert-info" style="padding:5px;margin-top:0px" id="dropdownMenu1" data-toggle="dropdown">读者登录 <span class="caret"></span></div><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">用户中心</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">发表文章</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">设置</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">退出</a></li></ul></div></div><center><button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">登录</button></center></div><!----><div style="border: solid 1px #D9EDF7;margin-top:30px"><div style="width: 100%; height: auto; background-color: #F6B37F; margin-bottom: 5px;"><div class="alert alert-info" style="padding:5px;margin-top:0px">在线办公系统</div></div><div><div style="font-size:13px;"><ul style="list-style:none;"><li> <a href="#">在线投稿系统>>></a><br /></li><li><a href="#">在线审核系统>>></a><br /></li><li><a href="#">在线编辑系统>>></a><br /></li></ul></div><div class="panel-footer" style="text-align:right"><a href="#">更多>>></a> </div></div></div><div style="border: solid 1px #D9EDF7;margin-top:30px"><div style="width: 100%; height: auto; background-color: #F6B37F; margin-bottom: 5px;"><div class="alert alert-info" style="padding:5px;margin-top:0px">友情链接</div></div><div><div style="font-size:13px;"><ul style="list-style:none;"><li> <a href="#">第二军医大学</a><br /></li><li><a href="#">上海长征医院</a><br /></li><li><a href="#">万方数据</a><br /></li><li><a href="#">中国知网</a><br /></li></ul></div><div class="panel-footer" style="text-align:right"><a href="#">更多>>></a> </div></div></div></div></div><!--遮罩窗体--><div class="container-fluid text-center"><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">用户登录</h4></div><div class="modal-body"><!--表单--><div class="row clearfix"><div class="col-md-12"><form role="form" style="text-align:left"><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="email" class="form-control" id="" placeholder="user" /></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="" placeholder="password" /></div><div class="checkbox"><label><input type="checkbox" />记住我</label></div></form></div></div><!--表单--></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">Login</button><a href="#">注册</a></div></div></div></div></div>
</body>
</html>

bootstrap

5(调整)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style>*{padding: 0px;margin: 0px;}a {color:black;cursor:pointer;}a:hover {color: #00ff21;}.content {width: 960px;margin: 0px auto;padding: 0px;background-color: #FDF6F0;}.titleImg {width:100%;height: 120px;background-image: url(Img/title.jpg);}.navigationBar {width:100%;color: white;background-color: #F6B37F;text-align: center;height: 30px;padding-top: 15px;font-size: 16px;border: 1px solid #251B13;}.showTime {width:20%;float: left;}.showBar {width:80%;float: left;margin-top: 0px;cursor: pointer;}div.showBar ul li {float: left;list-style: none;margin: 0px 10px;padding: 0px;}div.showBar ul li a:hover {color: #000000;}div.showBar a {color: white;text-decoration: none;}a {text-decoration: none;}.contentBody {width:100%;height: auto;border: 1px solid #D6D5D4;}.contentBodyLeft {width:20%;height: auto;float: left;border: 1px solid #D6D5D4;}.contentBodyCenter {width:59%;height: auto;float: left;border: 1px solid #D6D5D4;}.contentBodyRight {width:20%;height: auto;float: left;}form input {margin-top: 10px;}.loginBut {width: 80px;background-color: #F6B37F;margin-top: 10px;margin-left: 30px;}.articleImgShow {width: 142px;height: auto;margin: 10px 20px;float: left;}.articleIntroduceShow {width: 350px;float: left;padding-top: 30px;font-size: 15px;}.catalogItem {width: 560px;height: 100px;font-size: 20px;padding: 8px;height: 50px;font-size: 13px;margin-bottom: 20px;}.catalogItemFoot {font-size: 12px;padding: 20px 10px 10px 280px;}.contentFoot {width:100%;height: 80px;background-color: #F6B37F;text-align: center;border: 1px solid #251B13;}</style>
</head>
<body style="background-color: #FDF6F0"><div class="content"><div class="titleImg"></div><div class="navigationBar"><div class="showTime"><span id="showTime">2017年3月19日</span><span>星期六</span></div><div class="showBar"><ul style="margin:0;padding:0px"><li><a href="#">首页</a></li><li><a href="#">期刊简介</a></li><li><a href="#">投稿指南</a></li><li><a href="#">期刊订阅</a></li><li><a href="#">广告合作</a></li><li><a href="#">留言板</a></li><li><a href="#">联系我们</a></li><li><a href="#">English version</a></li></ul></div><div style="clear:both"></div></div><div class="contentBody"><div class="contentBodyLeft"><div style="width: 100%; height: 35px; background-image: url(Img/qiKanJianJie.jpg)"></div><div style="height:160px;width:100%;text-align:center"><div style="width:100%;"><select name="selectYear" style="margin:0px 0px"><option value="volvo">全部年</option><option value="saab">2014年</option><option value="opel">2015年</option><option value="audi">2016年</option><option value="audi">2017年</option></select><select name="selectYear" style="margin:0px 0px"><option value="volvo">全部期</option><option value="saab">第一期</option><option value="opel">第二期</option><option value="audi">第三期</option><option value="audi">第四期</option></select></div><div style="text-align:left;padding:8px 15px"><form action="#"><input type="text" placeholder="标题"><br /><input type="text" placeholder="作者姓名"><br /><input type="text" placeholder="关键字"><br /><input type="button" value="搜索" /></form></div></div><div style="width: 100%; height: 35px; background-image: url(Img/duZheDengLu.jpg)"></div><div style="height:130px;width:100%;text-align:center"><div style="text-align:left;padding:8px 15px"><form action="#"><input type="text" placeholder="用户名"><br /><input type="text" placeholder="密码"><br /><button class="loginBut">登陆</button></form></div></div><div style="width: 100%; height: 35px; background-image: url(Img/xiaZaiZhongXin.jpg)"></div><div style="width: 100%; height:auto; text-align:left"><ul style="font-size:15px;padding:20px 30px;"><li><a href="#">投稿须知</a></li><li><a href="#">版权转让协议</a></li></ul></div></div><div class="contentBodyCenter"><div style="width:100%;height:30px; background-image:url(Img/content1.jpg)"></div><div><div class="articleImgShow"><img src="Img/article.png" /></div><div class="articleIntroduceShow"><p id="articleIntroduce">&nbsp; &nbsp;  本刊社科类学术季刊，面向海内外公开发行，目前已和北京大学、香港大学等全国三百多所院校的文科版学报成为长期性的交流刊物。&nbsp; &nbsp;《华东理工大学学报(文科版)》现用刊名《华东理工大学学报(社会科学版)》收录情况：国家新闻出版总署收录　中国知网、万方数据库全文收录期刊、维普中文期刊全文收录主要栏目：社会学与社会工作、经济学与经济管理、政治与法律、哲学与文化、语言与艺术。 ...</p></div></div><div style="clear:both"></div><div style="width:100%;height:30px; background-image:url(Img/content2.jpg)"></div><div class="catalogItem"><p id="author">廖万清，张超，潘炜华</p><p>警惕“超级真菌”感染 在中国出现</p><div class="catalogItemFoot"><span>2017  Vol.12 (1):1-7</span><a>阅读</a>--<span>PDF</span> </div><hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /></div><div class="catalogItem"><p id="author">廖万清，张超，潘炜华</p><p>警惕“超级真菌”感染 在中国出现</p><div class="catalogItemFoot"><span>2017  Vol.12 (1):1-7</span><a>阅读</a>--<span>PDF</span> </div><hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /></div><div class="catalogItem"><p id="author">廖万清，张超，潘炜华</p><p>警惕“超级真菌”感染 在中国出现</p><div class="catalogItemFoot"><span>2017  Vol.12 (1):1-7</span><a>阅读</a>--<span>PDF</span> </div><hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /></div></div><div class="contentBodyRight"><div style="width: 100%; height: 35px; background-image: url(Img/bianJiBuGongGao.jpg)"></div><div style="height:160px;width:100%;text-align:center"><div style="width: 100%;font-family:SimHei; font-size:15px; color:"><p>&nbsp;&nbsp;<a href="#">2017年中西医结合治疗皮肤病学术会参会通知</a></p><br /><p>&nbsp;&nbsp;<a href="#">2017年中西医结合治疗皮肤病学术会参会通知</a></p><br /><p>&nbsp;&nbsp;<a href="#">2017年中西医结合治疗皮肤病学术会参会通知</a></p><br /><div style="width:100%;text-align:right"><a href="#">更多>>></a></div></div></div><div style="width: 100%; height: 35px; margin-top:10px; background-image: url(Img/zaiXianBanGongXiTong.jpg)"></div><div style="height:130px;width:100%;text-align:center"><div style="text-align:left;padding:8px 15px"><ul style="font-size:15px;padding:20px 30px;"><li><a href="#">在线投稿系统</a></li><li><a href="#">在线审稿系统</a></li><li><a href="#">在线编辑系统</a></li></ul></div></div><div style="width: 100%; height: 35px; background-image: url(Img/youQingLianJie.jpg)"></div><div style="width: 100%; height:auto; text-align:left"><ul style="font-size:15px;padding:20px 30px;"><li><a href="#">第二军医大学</a></li><li><a href="#">上海长征医院</a></li><li><a href="#">万方数据</a></li><li><a href="#">中国知网</a></li></ul></div></div><div style="clear:both"></div></div><div class="contentFoot"><div style="padding:20px;font-size:10px;color:white"><p>期刊负责人：XXX</p><p>网站意见邮箱：XXXXXXXXX</p><p>版权所有XXXXXXXXXXXX 地址:XXXXXXXXX 邮编:XXXXXXX 沪ICP备XXXXXXXXXXXX<p></div></div></div>
</body>
</html>

html

(待更新)

转载于:https://www.cnblogs.com/liuwenxu/p/6516834.html

实用的网页模板（一）相关推荐

快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
歌曲排行榜html页面,音乐组合排行板_音乐排行榜网页模板
音乐排行榜网页模板 JPG,300x300,134KB,255_255 冰箱们配件隔板人气排行海尔冰箱配件玻璃搁物架隔板新飞美菱海信星星美的康佳等通用 JPG,780x551,234KB,35 ...
cp 过程流程图模板_程序流程图有什么用？简单实用的流程图模板大全
原标题:程序流程图有什么用?简单实用的流程图模板大全程序流程图是什么呢?程序流程图就是用规定的符号描述一个程序中所需的各种操作或者判断的图表.程序流程图的设计是在处理流程图的基础上,通过对数据的整理 ...
在线考试系统html模板,请问谁有在线考试系统的网页模板？
请问谁有在线考试系统的网页模板? (2017-03-22 22:58:03) 标签: 杂谈 <帝国网站管理系统>英文译为"Empire CMS",简称"Ecm ...
网上税务html模板,HTML黑色欧美形式税务动态邮件网页模板代码
模板描述:黑色欧美形式税务动态邮件.HTML黑色欧美形式税务动态邮件网页模板代码HTML模板下载代码结构 1. HTML代码 Lorem ipsum dolor sit amet, consec ...
网页模板制作只为满足用户需求！
随着现代互联网技术的不断发展,用户对于网站的要求也越来越高,随之也产生了许多网站设计师的不同设计模板,用户可以从众多设计模板中选择自己喜欢的内容进行下载使用,远比定制更加简单便捷.那么在这之中,网页制 ...
html5网页代码模板简单,简洁蓝色风格HTML5网页模板
简洁蓝色风格HTML5网页模板是一款适合健康医疗类网站模板下载资源下载此资源下载价格为4D币,请先登录资源文件列表 codedown123-0818-12/apage.html , 7582 co ...
日志模板html源码,HTML红色欧美形式教堂动态日志网页模板代码
模板描述:红色欧美形式教堂动态日志.HTML红色欧美形式教堂动态日志网页模板代码HTML模板下载代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Opening Hours - 1 ...
20款响应式的 HTML5 网页模板【免费下载】
下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...
html应用中心模板,HTML5--应用网页模板
应用网页模板 * { margin:0px; padding:0px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box- ...

实用的网页模板（一）

实用的网页模板（一）相关推荐

最新文章

热门文章