adobe dreamweaver
新建html文档。
书写css代码。body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu { margin: 0; padding: 0; }article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }audio, canvas, video { display: inline-block; *display:inline;*zoom:1}audio:not([controls]) { display: none }table { border-collapse: collapse; border-spacing: 0; empty-cells: show }ol, ul, menu { list-style: none }img { border: 0 }a:focus { outline: none }em, i { font-style: normal; }button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: -3px; outline: none; }button, input { border: 1px solid; outline: none; line-height: normal; *overflow:visible}button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0}button, input[type='button'], input[type='reset'], input[type='submit'] { cursor: pointer; -appearance: button }input[type='search'] { -appearance: textfield; -box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box }input[type='search']::-search-decoration {-appearance:none}textarea { overflow: auto; vertical-align: top }::selection { background: #72d0eb; color: #fff; text-shadow: none }::-moz-selection {background:#72d0eb;color:#fff;text-shadow:none}*[hidden] { display: none }a { color: #0088DB; text-decoration: none; cursor: pointer }a:hover { color: #2A5E8E }.clearfix:after, .central:after, .widget ul:after, .paging:after, .pagenav:after, .base-tit:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden }.clearfix, .central, .widget ul, .paging, .pagenav, .base-tit { *+height:1%;}body, button, input, select, textarea, code { font-size: 12px; font-family: microsoft yahei; color: #444; }.ipt { border: solid 1px #d2d2d2; border-left-color: #ccc; border-top-color: #ccc; border-radius: 2px; box-shadow: inset 0 1px 0 #f8f8f8; background-color: #fff; padding: 4px 6px; height: 21px; line-height: 21px; color: #555; width: 180px; vertical-align: baseline; }.ipt-mini { width: 140px; padding: 1px 3px; }.ipt:focus { border-color: #95C8F1; box-shadow: 0 0 4px #95C8F1; }.btn { position: relative; cursor: pointer; display: inline-block; vertical-align: middle; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; min-width: 52px; padding: 0 12px; text-align: center; text-decoration: none; border-radius: 2px; border: 1px solid #ddd; color: #666; background-color: #f5f5f5; background: -linear-gradient(top, #F5F5F5, #F1F1F1); background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1); background: linear-gradient(top, #F5F5F5, #F1F1F1); }input.btn { height: 29px; }.btn:hover { border-color: #c6c6c6; color: #333; background-color: #f8f8f8; background: -linear-gradient(top, #f8f8f8, #f1f1f1); background: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); background: linear-gradient(top, #f8f8f8, #f1f1f1); box-shadow: #ddd 0 1px 1px 0; }.btn:active, .btn.btn-active { box-shadow: #ddd 0 1px 2px 0 inset; border-color: #c6c6c6; }.btn:focus { border-color: #4d90fe; outline: none }.btn-primary { border-color: #3079ED; color: #F3F7FC; background-color: #4D90FE; background: -linear-gradient(top, #4D90FE, #4787ED); background: -moz-linear-gradient(top, #4D90FE, #4787ED); background: linear-gradient(top, #4D90FE, #4787ED); }.btn-primary:hover { border-color: #2F5BB7; color: #fff; background-color: #4D90FE; background: -linear-gradient(top, #4D90FE, #357AE8); background: -moz-linear-gradient(top, #4D90FE, #357AE8); background: linear-gradient(top, #4D90FE, #357AE8); }.btn-primary:active, .btn-primary.btn-active { box-shadow: #2176D3 0 1px 2px 0 inset; border-color: #3079ED; }.btn-primary:focus { border-color: #4d90fe; outline: none }.theme-buy { margin-top: 10%; text-align: center; }.theme-gobuy, .theme-signin { font-size: 15px; }.theme-price { position: relative; bottom: -6px; font-family: microsoft yahei, Arial, Helvetica, sans-serif; margin-right: 20px; font-weight: bold; color: #f60; line-height: 32px; font-size: 24px; display: inline-block; }.theme-price dfn { font-style: normal; font-size: 18px; margin-right: 2px; }.theme-desc { padding: 30px; }.theme-version { padding: 30px; }.theme-popover-mask { z-index: 9998; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); display: none }.theme-popover { z-index: 9999; position: fixed; top: 50%; left: 50%; width: 660px; height: 360px; margin: -180px 0 0 -330px; border-radius: 5px; border: solid 2px #666; background-color: #fff; display: none; box-shadow: 0 0 10px #666; }.theme-poptit { border-bottom: 1px solid #ddd; padding: 12px; position: relative; }.theme-popbod { padding: 60px 15px; color: #444; height: 148px; }.theme-popbom { padding: 15px; background-color: #f6f6f6; border-top: 1px solid #ddd; border-radius: 0 0 5px 5px; color: #666 }.theme-popbom a { margin-left: 8px }.theme-poptit .close { float: right; color: #999; padding: 5px; margin: -2px -5px -5px; font: bold 14px/14px simsun; text-shadow: 0 1px 0 #ddd }.theme-poptit .close:hover { color: #444; }.btn.theme-reg { position: absolute; top: 8px; left: 43%; display: none }.inp-gray, .feed-mail-inp { border: 1px solid #ccc; background-color: #fdfdfd; width: 220px; height: 16px; padding: 4px; color: #444; margin-right: 6px }.dform { padding: 80px 60px 40px; text-align: center; }.dform .ipt_error { background-color: #FFFFCC; border-color: #FFCC66 }.dform-tip { display: none; background-color: #080; color: #fff; line-height: 42px; margin-top: 10px; display:;font-size: 14px; }.dform-tip-errer { background-color: #CF301A; }.dform-tip a { display: inline-block; padding: 0 20px; margin-left: 10px; background-color: #FFE924; color: #CF301A; }.dform-login { padding: 0; height: 270px; overflow: hidden; }.dform-login iframe { height: 470px; margin-top: -180px; }.theme-signin { margin: -50px -20px -50px 90px; text-align: left; font-size: 14px; }.theme-signin h4 { color: #999; font-weight: 100; margin-bottom: 20px; font-size: 12px; }.theme-signin li { padding-left: 80px; margin-bottom: 15px; }.theme-signin li strong { float: left; margin-left: -80px; width: 80px; text-align: right; line-height: 32px; }.theme-signin .btn { margin-bottom: 10px; }.theme-signin p { font-size: 12px; color: #999; }.theme-desc, .theme-version { padding-top: 0 }
书写并添加js代码。
代码整体结构。
查看效果。