ajax笔记本书

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

简洁的ajax笔记本书写效果,PHP程序书写

书写css代码。html { background: url('../images/background.jpg') no-repeat center center; /* Ensure the html element always takes up the full height of the browser window */ min-height: 100%; /* Display the background fullscreen */ background-size: cover; }body { font: 14px/1.3 'Segoe UI', Arial, sans-serif; color: #444; min-height: 100%; }a, a:visited { outline: none; color: #43819b; }a:hover { text-decoration: none; }section, footer, header { display: block; }.credit { font-size: 11px; color: #ddd; text-align: center; font-weight: bold; margin-bottom: 60px; }#pad { position: relative; width: 374px; margin: 180px auto 40px; }#note { font: normal 15px 'Courgette', cursive; line-height: 17px; color: #444; background: url('../images/mid.png') repeat-y; display: block; border: none; width: 329px; min-height: 170px; overflow: hidden; resize: none; outline: 0px; padding: 0 10px 0 35px; }#pad h2 { background: url('../images/header.png') no-repeat; overflow: hidden; text-indent: -9999px; height: 69px; position: relative; }#pad:after { position: absolute; content: ''; background: url('../images/footer.png') no-repeat; width: 100%; height: 40px; }footer { background-color: #111111; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4); height: 45px; left: 0; position: fixed; width: 100%; z-index: 100000; }footer h2 { color: #EEEEEE; font-size: 14px; font-weight: normal; left: 50%; margin-left: -400px; padding: 13px 0 0; position: absolute; width: 540px; }footer h2 i { font-style: normal; color: #888; }footer a.tzine, a.tzine:visited { color: #999999; font-size: 12px; left: 50%; margin: 16px 0 0 110px; position: absolute; text-decoration: none; top: 0; }footer a i { color: #ccc; font-style: normal; }footer a i b { color: #c92020; font-weight: normal; }

书写并添加js代码。

代码整体结构。

查看效果。