个人博客网页
参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接（至少3个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的博客</title> </head> <!-- target和iframe的name属性结合,可以实现在当前页面内跳转 --> <body background="timg.jpg"> <a href="info.html" target="myframe">关于我</a> <a href="blog.html" target="myframe">我的博客</a> <a href="write.html" target="myframe">写博客</a> <a href="" target="myframe"></a> <br> <iframe src="blog.html" width="1500" height="600" name="myframe"> </iframe> </body> </html>
blog.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> li { text-align: -webkit-match-parent; display: list-item; } .fav_list{ min-height: 95%; padding: 0 32px 30px; margin-top: 50px; margin-right: 50px; margin-left: 200px; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.05); } .fav_list_box{ box-sizing: border-box; display: block; overflow: hidden; zoom: 1; } .fav_list_title{ height: 90px; line-height: 90px; /*border-bottom: 1px solid #e0e0e0;*/ display: block; } .fav_list_title_h3{ display : inline; } .fav_num{ font-size: 14px; color: #4d4d4d; margin-top: 30px; float: right; } .my_fav_con{ display: block; } .my_fav_list{ margin: 0; padding: 0; /* font-size: 100%; vertical-align: baseline; */ border: 0; display: block; overflow: hidden; zoom: 1; } .my_fav_list_li{ padding: 16px 0; font-size: 0; border-top: 1px solid #e0e0e0; list-style: none; } .my_fav_list_a{ width: 78%; line-height: 24px; font-size: 16px; vertical-align: middle; color: #4d4d4d; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; cursor: pointer; } .my_fav_list_label{ margin-left: 10%; font-size: 16px; vertical-align: middle; display: inline-block; } .my_fav_list_label span{ color: #ccc; margin-right: 15px; vertical-align: middle; display: inline-block; } .my_fav_list_a:hover{ color: red; } </style> </head> <body style="background-color: rgba(204,204,204,0.23)"> <div class="fav_list"> <div data-v-357a65ed="" class="fav_list_box"> <div class="fav_list_title"> <h3 class="fav_list_title_h3">我的博客</h3> <div class="fav_num"> 共<span >5</span>条 </div> </div> <div class="my_fav_con"> <div> <ul class="my_fav_list"> <li class="my_fav_list_li" id=""> <a class="my_fav_list_a" href="" target="_blank"> HTML </a> <label class="my_fav_list_label"> <span >2020-04-08</span> </label> </li> <li class="my_fav_list_li" id=""> <a class="my_fav_list_a" href="" target="_blank"> CSS </a> <label class="my_fav_list_label"> <span >2020-04-08</span> </label> </li> <li class="my_fav_list_li" id=""> <a class="my_fav_list_a" href="" target="_blank"> php程序设计 </a> <label class="my_fav_list_label"> <span >2020-04-08</span> </label> </li> <li class="my_fav_list_li" id=""> <a class="my_fav_list_a" href="" target="_blank"> C语言程序设计 </a> <label class="my_fav_list_label"> <span >2020-4-08</span> </label> </li> <li class="my_fav_list_li" id=""> <a class="my_fav_list_a" href="" target="_blank"> 算法与数据结构 </a> <label class="my_fav_list_label"> <span >2019-04-08</span> </label> </li> </ul> <!----> </div> </div> </div> </div> </body> </html>
info.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人信息</title> </head> <style> .basic-grey { margin-left:auto; margin-right:auto; max-width: 500px; background: #F7F7F7; padding: 25px 15px 25px 10px; font: 12px Georgia, "Times New Roman", Times, serif; color: #888; text-shadow: 1px 1px 1px #FFF; border:1px solid #E4E4E4; } .basic-grey h1 { font-size: 25px; padding: 0px 0px 10px 40px; display: block; border-bottom:1px solid #E4E4E4; margin: -10px -15px 30px -10px;; color: #888; } .basic-grey h1>span { display: block; font-size: 11px; } .basic-grey label { display: block; margin: 0px; } .basic-grey label>span { float: left; width: 20%; text-align: right; padding-right: 10px; margin-top: 10px; color: #888; } .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { border: 1px solid #DADADA; color: #888; height: 30px; margin-bottom: 16px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 3px 3px 3px 5px; width: 70%; font-size: 12px; line-height:15px; box-shadow: inset 0px 1px 4px #ECECEC; } .basic-grey textarea{ padding: 5px 3px 3px 5px; } .basic-grey select { background: #FFF no-repeat right; appearance:none; width:70%; height: 35px; line-height: 25px; } .basic-grey textarea{ height:100px; } .basic-grey .button { background: #E27575; border: none; padding: 10px 25px 10px 25px; color: #FFF; box-shadow: 1px 1px 5px #B6B6B6; border-radius: 3px; text-shadow: 1px 1px 1px #9E3F3F; cursor: pointer; } .basic-grey .button:hover { background: #CF7A7A } </style> <body> <form action="" method="post" class="basic-grey"> <h1>个人信息</h1> <label> <span>姓名 :</span> <input id="name" type="text" name="name" /> </label> <label> <span>电子邮箱 :</span> <input id="email" type="email" name="email" /> </label> <label> <span>简介 :</span> <textarea id="message" name="message" ></textarea> </label> <label> <span>爱好 :</span><select name="selection"> <option value="Art">艺术</option> <option value="P.E">体育</option> </select> </label> <label> <span> </span> <input type="button" class="button" value="提交" /> </label> </form> </body> </html>
