实用的网页模板（一）
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); }
/* remove codrops styles and reset the whole thing */ #container_demo{ text-align: left; margin: 0; padding: 0; margin: 0 auto; 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: 2px 0 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: all 0.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: all 0.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: 5px 0; } /* 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 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 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: all 0.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: 18px 6% 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; }
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">
×
</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>
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>
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"> × </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>
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"> 本刊社科类学术季刊，面向海内外公开发行，目前已和北京大学、香港大学等全国三百多所院校的文科版学报成为长期性的交流刊物。 《华东理工大学学报(文科版)》现用刊名《华东理工大学学报(社会科学版)》 收录情况：国家新闻出版总署收录 中国知网、万方数据库全文收录期刊、维普中文期刊全文收录 主要栏目：社会学与社会工作、经济学与经济管理、政治与法律、哲学与文化、语言与艺术。 ... </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> <a href="#">2017年中西医结合治疗皮肤病学术会参会通知</a></p><br /> <p> <a href="#">2017年中西医结合治疗皮肤病学术会参会通知</a></p><br /> <p> <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>
(待更新)
