jquery模拟人人网注册大学选择页面弹出窗口

jquery模拟人人网注册大学选择页面弹出窗口

jquery模拟人人网注册大学选择页面弹出窗口

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

书写css代码。

* { margin: 0; padding: 0; list-style-type: none; }

a, img { border: 0; }

body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; }

.demo { width: 600px; margin: 20px auto; }

.demo th, .demo td { font-size: 14px; padding-bottom: 17px; line-height: 28px; color: #666; font-family: "新宋体"; font-weight: normal; }

.demo th em { color: #ff0000; font-style: normal; }

.demo td .stext { border: 1px solid #ccc; font-size: 14px; height: 26px; line-height: 26px; padding: 0 3px; width: 214px; color: #666; }

/* choose-box-wrapper */

#choose-box-wrapper { width: 652px; background: #000; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; display: none; }

#choose-box { border: 1px solid #005EAC; width: 650px; background: #fff; }

#choose-box-title { background: #3777BC; color: white; padding: 4px 10px 5px; font-size: 14px; font-weight: 700; margin: 0; }

#choose-box-title span { font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif; }

#choose-a-province, #choose-a-school { margin: 5px 8px 10px 8px; border: 1px solid #C3C3C3; }

#choose-a-province a { display: inline-block; height: 18px; line-height: 18px; color: #005EAC; text-decoration: none; font-size: 9pt; font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif; margin: 2px 5px; padding: 1px; text-align: center; }

#choose-a-province a:hover { text-decoration: underline; cursor: pointer; }

#choose-a-province .choosen { background: #005EAC; color: white; }

#choose-a-school { overflow-x: hidden; overflow-y: auto; height: 200px; }

#choose-a-school a { height: 18px; line-height: 18px; color: #005EAC; text-decoration: none; font-size: 9pt; font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif; float: left; width: 160px; margin: 4px 12px; padding-left: 10px; background: url(../images/dot.gif) no-repeat 0 9px; }

#choose-a-school a:hover { background: #005EAC; color: #fff; }

#choose-box-bottom { background: #F0F5F8; padding: 8px; text-align: right; border-top: 1px solid #CCC; height: 40px; }

#choose-box-bottom input { vertical-align: middle; text-align: center; background: #005EAC; color: white; border-top: 1px solid #B8D4E8; border-left: 1px solid #B8D4E8; border-right: 1px solid #114680; border-bottom: 1px solid #114680; cursor: pointer; width: 60px; height: 25px; margin-top: 6px; margin-right: 6px; }

书写并添加js代码。

代码整体结构。

查看效果。