【CSS】css demo 1

body {font:13px/20px Microsoft JhengHei, Helvetica; margin:0px; padding:0px; font-family: Microsoft JhengHei}
select {font-family: Microsoft JhengHei, Helvetica;}

.login .msgArea {display:none}

.header {background-color:#E40080; height:124px; border-bottom:6px solid #FFDD33; text-align:center}
.wrapArea {width:1200px; margin:0px auto}

.header img {margin:29px 0px 12px}
.header h2 {margin:0px; padding:0px}
.header h2 span {width:204px; font:15px/20px Microsoft JhengHei, Helvetica; color:#FFFFFF; border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; padding:0px 5px; display:inline-block}

.msgArea {background-color:#444444; height:48px; text-align:right}
.msgArea p {height:48px; font:13px/48px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px; padding:0px 20px 0px 0px; display:inline-block}
.msgArea p span {font:bold 13px/48px Microsoft JhengHei, Helvetica; padding:0px 0px 0px 10px}
.msgArea a {float:right; width:85px; height:48px; display:inline-block}
.msgArea a img {display:none}
.msgArea a img:first-child {display:inline-block}
.msgArea a:hover img {display:inline-block}
.msgArea a:hover img:first-child {display:none}

.footer {text-align:center; padding:15px 0px; border-top:1px solid #FFDD33}
.footer p {font:12px/18px Microsoft JhengHei, Helvetica; letter-spacing:1px; color:#706E6E; margin:0px; padding:0px}

/** 登入框 **/
.loginArea {width:290px; margin:100px auto}
.loginArea h1 {margin:0px 0px 10px; padding:0px 0px 10px; border-bottom:1px dashed #444444}
.loginArea dl,
.loginArea dl dt,
.loginArea dl dd {margin:0px; padding:0px}
.loginArea dl dd {padding:8px 0px; position:relative}
.loginArea dl dd b {width:80px; text-align:right; color:#444444; display:inline-block}
.loginArea dl dd input {height:25px; font:13px/25px Microsoft JhengHei, Helvetica; color:#000000; padding:0px 6px; border:1px solid #C2C0C0}
.loginArea dl dd .code[type="text"] {width:100px; margin:0px 26px 0px 0px}
.loginArea dl dd img {position:absolute; top:9px}
.loginArea dl dt {margin:21px 0px 0px}
.loginArea dl dt input[type="submit"] {background-color:#FD98D1; width:100%; height:40px; font:bold 20px/40px Microsoft JhengHei, Helvetica; color:#FFFFFF; border:0px; border-radius:5px; cursor:pointer}

/** 中間主文區 **/
.inner {padding:30px 0px}

/** 主選單 **/
.menuArea { background-color: rgba(13, 144, 144, 0.69); height:auto; margin:0px 0px 5px}
.menuArea ul {width:90%; height:auto; margin:0 30px 0 30px; padding:0px; list-style:none; display:inline-block}
.menuArea ul li {float:left; height:40px}
.menuArea ul li a {font:15px/40px Microsoft JhengHei, Helvetica; color:#FFFFFF; text-align:center; padding:0px 15px; border-left:1px dotted #f1f0f0; cursor:pointer; text-decoration: none;}
.menuArea ul li:first-child a {border-left:0px}
.menuArea ul li dl,
.menuArea ul li dd {margin:0px; padding:0px}
.menuArea ul li dl {background-color:#FFFFFF; margin:-4px 0px 0px; border:4px solid #444444; border-radius:5px; position:relative; z-index:1; display:none}
.menuArea ul li dd a {background:transparent url(http://mapp.momoshop.com.tw/mapp/images/icon_MenuDot.png) no-repeat 8px 16px ; height:auto; font:13px/20px Microsoft JhengHei, Helvetica; color:#706E6E; text-align:left; text-decoration:none; padding:10px 0px 10px 20px; border:0px; display:block; cursor:pointer}
.menuArea ul li dd a:hover {background-color:#E8E8E8; color:#E40080}
.menuArea ul li:hover dl {display:block}

/** 麵包屑 **/
.breadCrumb {background-color:#FFE7F4; height:20px; border-left:4px solid #E40080; margin:0px; padding:0px 0px 0px 5px}
.breadCrumb dl,
.breadCrumb dt,
.breadCrumb dd {float:left; margin:0px; padding:0px}
.breadCrumb dd {margin:0px 0px 0px 5px}
.breadCrumb dd span {margin:0px 5px 0px 0px}
.breadCrumb a {color:#000000; text-decoration:none}
.breadCrumb a:hover {color:#E40080}

/** 主文區 **/
.contentArea {margin:20px 0px 0px}

/** 搜尋條件 **/
.searchArea {padding:0px 0px 20px 0px; border-bottom:1px dotted #B1B0B0}
.searchArea ul {margin:0px; padding:0px; list-style:none; border-radius: 6px;}
.searchArea ul li {min-height:30px; margin:5px 0px; position:relative}
.searchArea ul li b {width:90px; height:25px; font:13px/28px Microsoft JhengHei, Helvetica; text-align:right; display:inline-block}
.searchArea ul li input {width:150px; height:25px; font:13px/25px Microsoft JhengHei, Helvetica; border:1px solid #C2C0C0; padding:0px 0px 0px 6px}
.searchArea ul li input[type="submit"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer}
.searchArea ul li input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer}
.searchArea ul li input[type="file"] {width:180px; height:25px; font:13px/25px Microsoft JhengHei, Helvetica; border:0px; padding:0px 0px 0px 6px}
.searchArea ul li img {vertical-align:middle}
.searchArea ul li select {width:158px; padding:4px 6px; border:1px solid #C2C0C0}
.searchArea ul li select[class="small"] {width:80px; padding:4px 6px; border:1px solid #C2C0C0}
.searchArea ul li textarea {font:13px/20px Microsoft JhengHei, Helvetica; color:#4C4C4C; padding:5px 10px; border:1px solid #C2C0C0; resize:none}
.searchArea ul li input[name="promo_url"] {width:330px}
.pushDataArea input[type="submit"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer;float: right;margin-right: 30px;top: 5px;}
.pushDataArea input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer;float: right;margin-right: 30px;top: 5px;}


/** 功能按鈕區 **/
.featuresBtnArea {width:100%; height:50px; display:inline-block}
.featuresBtnArea ul,
.featuresBtnArea ul li {float:right; margin:0px; padding:0px; list-style:none}
.featuresBtnArea ul {margin:11px 0px 0px}
.featuresBtnArea ul li input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; cursor:pointer}
.featuresBtnArea p {font:13px/50px Microsoft JhengHei, Helvetica; margin:0px; padding:0px; display:none}
.featuresBtnArea p span {color:#E40080; padding:0px 4px; display:none}

/** 查詢結果區 **/
.resultArea table th,
.resultArea table td {padding:5px 8px; text-align:center}
.resultArea table thead th {background-color:#5c5a5a; font:bold 13px/20px Microsoft JhengHei, Helvetica; color:#FFFFFF}
.resultArea tbody td {border-bottom:1px solid #BDBCBC}
.resultArea tbody td ul {margin:0px; padding:0px; list-style:none}
.resultArea tbody td ul li {display:inline-block; padding-bottom:3px;}
.resultArea tbody td ul li input {background-color:#FFDD33; font:13px/25px Microsoft JhengHei, Helvetica; color:#000000; margin:0px 5px; padding:3px 13px; border:0px; border-radius:5px; cursor:pointer}
.resultArea tbody td ul li input[disabled="true"] {background-color:#E8E8E8; color:#706E6E; cursor:default}
.resultArea tbody td input[type="number"] {text-align:right;margin:3px;width:70px;font-weight: bold;color: brown;}

.resultArea2 table th,
.resultArea2 table td {padding:5px 8px; text-align:center}
.resultArea2 table thead th {background-color:#444444; font:bold 13px/20px Microsoft JhengHei, Helvetica; color:#FFFFFF}
.resultArea2 tbody td {border-bottom:1px solid #BDBCBC; text-align: center;}
.resultArea2 tbody td:nth-child(2n+1) {background-color:#F1F0F0}
.resultArea2 tbody td:nth-child(15) {text-align:left;}
.resultArea2 tbody td:nth-child(19) {text-align:left;}
.resultArea2 tbody td:nth-child(22) {text-align:left;}
.resultArea2 tbody td:nth-child(2) {color: #9C9C9C;}
.resultArea2 tbody td:nth-child(26) {color: #9C9C9C;}
.resultArea2 tbody td p {color: #E40080; margin: 0;}
.resultArea2 tbody td p2 {color: #8000E4;}
.resultArea2 tbody td a {text-decoration: none;color: #0083e8;}

/** 頁次區 **/
.pageArea {display:none}
.pageArea ul {margin:20px 0px 0px; padding:0px; list-style:none}
.pageArea ul li {width:30px; height:30px; font:13px/31px Microsoft JhengHei, Helvetica; color:#999999; margin-right: 5px; text-align:center; border:1px solid #DDDDDD; display:inline-block; overflow:hidden; cursor:pointer}
.pageArea ul li:hover {background-color:#EAEAEA; color:#666666; border-color:#777777}
.pageArea ul .selected {background-color:#999999; font:bold 13px/31px Microsoft JhengHei, Helvetica; color:#FFFFFF; border-color:#999999}
.pageArea dl {float:right; margin:0px; padding:0px}
.pageArea dl dt,
.pageArea dl dd {height:30px; margin:0px 0px 0px 10px; padding:0px; display:inline-block}
.pageArea dl dt b {font:13px/31px Microsoft JhengHei, Helvetica; color:#E40080; padding:0px 4px}
.pageArea dl dd {font:13px/31px Microsoft JhengHei, Helvetica; color:#999999; padding:0px 10px; border:1px solid #DDDDDD; cursor:pointer}
.pageArea dl dd:hover {background-color:#EAEAEA; color:#666666; border-color:#777777}

/** 推播訊息浮層 **/
.pushDataArea {background-color:#FFFFFF; border-radius:10px; position:absolute; top:0px; left:0px; z-index:2; display:none}
.pushDataArea h2 {background-color:#444444; height:30px; font:bold 13px/30px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px; padding:0px 10px; border-radius:10px 10px 0px 0px}
.pushDataArea h2 a {float:right; height:30px; margin:0px -10px 0px 0px; padding:0px 15px; border-radius:0px 10px 0px 0px; cursor:pointer}
.pushDataArea h2 a:hover {background-color:#FFFFFF; color:#000000}
.pushDataArea .dataArea {padding:10px}
.pushDataArea .dataArea table th,
.pushDataArea .dataArea table td {background-color:#F1F0F0; height:40px; padding:5px 10px; border-bottom:1px solid #D1CFCF}
.pushDataArea .dataArea table th {background-color:#444444; width:60px; text-align:right; color:#FFFFFF; border-bottom:1px solid #FFFFFF; padding:5px 20px}
.pushDataArea .dataArea table td input {width:220px; height:25px; font:13px/20px Microsoft JhengHei, Helvetica; color:#4C4C4C; padding:0px 10px; border:1px solid #C2C0C0}
.pushDataArea .dataArea table td img {vertical-align:middle}
.pushDataArea .dataArea table td select {padding:3px 6px; border:1px solid #C2C0C0; position:relative; top:1px}
.pushDataArea .dataArea table td textarea {width:600px; font:13px/20px Microsoft JhengHei, Helvetica; color:#4C4C4C; padding:5px 10px; border:1px solid #C2C0C0; resize:none}
.pushDataArea .dataArea table td input[name="goodsUrl"] {width:600px}
.pushDataArea .dataArea table td input[disabled="disabled"] {background-color:#4682B4; color:#FFFFFF; border-color:#4682B4}
.pushDataArea .dataArea table #goodsCodeTr,
.pushDataArea .dataArea table #orderTimeTr,
.pushDataArea .dataArea table #fsCodeTr,
.pushDataArea .dataArea table #gaCodeTr {display:none}
.pushDataArea .btnArea {padding:10px 0px 20px; text-align:center}
.pushDataArea .btnArea input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; cursor:pointer}
.pushDataArea .dataArea table td input[type=file] {background-color:#FFFFFF; width:auto; border:0px; border-bottom:1px solid #C2C0C0; padding:0px}
.pushDataArea .dataArea table td input[type=button] {background-color:#E40080; width:auto; color:#FFFFFF; height:auto; border:1px solid #E40080; border-radius:4px; margin:0px 0px 0px 5px; cursor:pointer}

.sample {margin:0px 0px 0px 10px}

/**隱藏圖示的css **/
div.showLoading {padding:10px; position:absolute; top:0px; left:0px; z-index:5; display:none}
/**背景白幕的css **/
.whiteBk000 {background-color:#FFFFFF; opacity:0.5; filter:alpha(opacity=50); position:absolute; top:0px; left:0px; z-index:4;display:none;}

#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 10px 15px;
    font-size: 18px;
    background: #e63fa1;
    color: white;
    cursor: pointer;
    z-index: 99999;
    border-radius: 20px;
}