期末大作业 | ToDoList网页设计 关于我界面设计记录
生活随笔
收集整理的這篇文章主要介紹了
期末大作业 | ToDoList网页设计 关于我界面设计记录
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、簡要說明
①關于我
本模塊是關于設計者本人的一些介紹，圖片與文字穿插，點擊左側圖片可以分別進入設計者本人的網易云音樂主頁和bilibili主頁，右側圖片則可以分別進入相關的頁面進行了解展示，之后為用戶展示了設計者本人在日常生活中的微博文字記錄，便于用戶更加了解設計者以及了解設計者的設計初衷；
②留言板
這一部分是為了給用戶更多與設計者直接交流互動的空間，設計者也可以更加直接的得到用戶的使用反饋，用戶在此處可以看到其他用戶的浮動留言，還可以直接輸入自己的想法并提交，點擊“提交上級”按鈕即可得到“劉管家已經收走，等著總裁的答復吧！”的提示，點擊“我錯了我不該亂寫，我要重新填！”即可清楚內容重新進行填寫。
二、頁面核心代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>關于我</title><link href="css/aboutme.css" rel="stylesheet" type="text/css" /></head><body><!-- 導航欄 --><div><ul class="to3"><li>TODOLIST | 我欲摘星斗</li></ul><ul class="to1"><li class="to2"><a href="首頁.html">首頁</a></li><li class="to2"><a href="番茄鐘.html">番茄鐘</a></li><li class="to2"><a href="備忘錄.html">備忘錄</a></li><li class="to2"><a href="倒計時.html">紀念日</a></li><li class="to2"><a href="日記本.html">日記本</a></li><li class="to2"><a href="關于我.html">關于我</a></li><li class="to2"><a href="index.html">退出登錄</a></li></ul></div><!-- banner開始通欄 --><div><div class="banner"><!--左側通欄--><div class="left"><div class="content_left"><p class="school_en">ToDoList</p><p class="school_ch">我欲摘星斗</p><p class="advertise">來日縱是千千晚星，亮過今晚月亮<br>人們的月亮永懸不落，有愛就能螳臂當車</p><ul class="style_a"><li class="current"><a href="img/banner圖.jpg"></a></li><li class="current"><a href="img/banner圖1.jpg"></a></li><li class="current"><a href="img/banner圖3.jpg"></a></li><li class="current"><a href="img/banner圖4.jpg"></a></li><li class="current"><a href="img/banner圖5.jpg"></a></li><li class="current"><a href="img/banner圖6.jpg"></a></li></ul></div></div><!--右側通欄--><div class="right"><div class="content_right"><h4>關于我<br>INTRODUCTION</h4><ul class="style_icon"><li><img src="img/g5.jpg"></li></ul><br /><p class="cl">19xxx xxx</p><br /><p class="cl2">xx大學xx學院</p><br /><p class="cl2">天空有些暗了，暗的剛剛好...... ——《剛剛好》</p><br /><p class="cl2">時間永遠分叉，通往無數的未來。 ——博爾赫斯</p></div></div></div></div><!-- 登錄頭像 --><div class="main_login"><div class="login_page"><div class="login_img"><img src="img/5.png" alt="image"></div></div></div><!-- 關于我的一些介紹 --><div><div><!-- 左側介紹部分 --><div style="width: 900px;height: 600px;float: left;font-size: 70px;font-family: 微軟雅黑;margin: auto 100px;text-align: center;"><table><tr><td class="show_td"><img src="img/default.jpeg"style="width: 150px;border: solid #7F95D1 5px;border-radius0.5em;overflow: hidden;"></td><td style="width: 300px;height: 150px;padding-right: 30px;"><a href="https://music.163.com/#/artist?id=46858405" title="網易云個人主頁">這是我</a></td><td style="width: 600px;font-size: 20px;text-align:left">我是一個挖掘機工人<br />我要開始工作了：<br />哇絕絕絕絕絕絕絕...<br />我居然是一個網易音樂人！！！</td></tr><tr><td class="show_td"><img src="img/sea.jpg" /style="width: 150px;border: solid #7F95D1 5px;border-radius0.5em;overflow: hidden;"></td><td style="width: 300px;height: 150px;padding-right: 30px;"><a href="https://space.bilibili.com/457023784?spm_id_from=333.1007.0.0" title="bilibili個人主頁">還是我</a></td><td style="width: 600px;font-size: 20px;text-align:left">我是一棵小蘑菇<br />我是長在床上的：<br />昨天不是起過床了，今天怎么還要起！</td></tr></table></div><!-- 翻唱音樂 --><div style="width: 800px;height: 150px;float: right;margin: 60px 180px 0 0;"><iframe src="其他素材/new boy.m4a" frameborder="0"></iframe><font size="5px" style="text-align: center;">《New Boy》翻唱自樸樹</font></div><!-- 右側介紹部分 --><div style="width: 800px;height: 800px;float: right;font-size: 70px;font-family: 微軟雅黑;margin: 110px 200px 10px 0;text-align: center;"><table><tr><td class="show_td"><img src="img/beyond.jpg" style="width: 150px;border: solid #7F95D1 5px;border-radius0.5em;overflow: hidden;"></td><td style="width: 300px;height: 150px;padding-right: 30px;"><a href="https://www.bilibili.com/video/BV1or4y1D7Di?spm_id_from=333.337.search-card.all.click" title="1991 Beyond生命接觸演唱會4k重制">我的Beyond</a></td><td style="width: 600px;font-size: 20px;text-align:left">原諒我這一生不羈放縱愛自由<br />哪會怕有一天會跌倒<br />背棄了理想，誰人都可以<br />哪怕只有一天只你共我</td></tr><tr><td class="show_td"><img src="img/red.jpg" /style="width: 150px;border: solid #7F95D1 5px;border-radius0.5em;overflow: hidden;"></td><td style="width: 300px;height: 150px;padding-right: 30px;"><a href="https://www.bilibili.com/video/BV125411j7uf?spm_id_from=333.337.search-card.all.click" title="紅花會現場版黑怕不怕黑！">我的HHH</a></td><td style="width: 600px;font-size: 20px;text-align:left">黑怕不怕黑<br />HNBMC<br />黑怕不怕黑<br />這是紅花會</td></tr></table></div><!-- 左側裝飾圖案 --><div style="width: 900px;height: 150px;float: left;margin: 95px 0 0 120px;"><ul><li style="float: left;"><img src="img/3.png" /></li><li style="float: left;"><img src="img/1.png" /></li><li style="float: left;"><img src="img/2.png" /></li><li style="float: left;"><img src="img/4.png" /></li><li style="float: left;"><img src="img/5.png" /></li><li style="float: left;"><img src="img/6.png" /></li></ul></div></div><!-- 滾動字幕條 --><marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"bgcolor="#7F95D1">“來日縱是千千晚星，亮過今晚月亮，都比不起這宵美麗！”</marquee></div><!-- 微博文字展示 --><div style="margin: auto auto 10px auto;text-align:center;align-content:center；"><h1 style="color:#7F95D1 ; font-size:60px;font-family:微軟雅黑;text-align:center;margin: 180px auto 50px auto;">我的發言</h1><table><tr><td rowspan="3"><img src="img/小胖子.jpg" style="width: 1000px;margin: auto 100px auto 250px;float:left"/></td><td style="text-align: left;margin: auto 50px;width: 700px;"><h4 style="font-size: 20px;">我唯一的害怕，是你們已經不相信了——不相信規則能戰勝潛規則...<a href="https://weibo.com/7310387583/L5dIJuNdq" style="color:#0099e5 ;text-decoration:underline;">點擊查看詳情</a></h4></td></tr><tr><td style="text-align: left;"><h4 style="font-size: 20px;">我不知道為什么，它那草原上凄清冷漠的沉靜，它那隨風晃動的無盡...<a href="https://weibo.com/7310387583/L5j786oK2" style="color:#0099e5 ;text-decoration:underline;">點擊查看詳情</a></h4></td></tr><tr><td style="text-align: left;"><h4 style="font-size: 20px;">天青無塵，日色若金，酒斟時，須滿十分，浮名浮利，虛苦勞神，嘆隙...<a href="https://weibo.com/7310387583/LpFfLn7Qe" style="color:#0099e5 ;text-decoration:underline;">點擊查看詳情</a></h4></td></tr><tr><td style="text-align: left;margin: 70px 100px 10px 250px;width: 1000px;float: left;"><h4 style="font-size: 20px;">用抽屜鎖住自己的秘密，在喜愛的書上留下批語，信投進郵箱，默默地站一會兒...<a href="https://weibo.com/7310387583/L0xgA0LMH" style="color:#0099e5 ;text-decoration:underline;">點擊查看詳情</a></h4></td><td rowspan="3" ><img src="img/我.jpg" style="width: 700px;float:right;margin: 80px 50px 0px 50px;"/></td></tr><tr><td style="text-align: left;margin: 30px 100px auto 250px;width: 1000px;float: left;"><h4 style="font-size: 20px;">就是說，敏感的人在處理人際關系的時候太累了，有人在我面前皺一下眉，我都會覺得是不是我...<a href="https://weibo.com/7310387583/KFTsdao9p" style="color:#0099e5 ;text-decoration:underline;">點擊查看詳情</a></h4></td></tr><tr><td style="text-align: left;margin: 30px 100px auto 250px;width: 1000px;float: left;"><h4 style="font-size: 20px;">人際關系是人際需求的互擇。各種的利益關系，你需要他的權力，他需要你的...<a href="https://weibo.com/7310387583/KBaVt2aoK" style="color:#0099e5 ;text-decoration:underline;">點擊查看詳情</a></h4></td></tr></table><!-- 滾動圖片 --><marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"bgcolor="#7F95D1" style="margin: 80px auto auto auto;"><img src="img/3.png"/><img src="img/1.png"/><img src="img/2.png"/><img src="img/4.png"/><img src="img/5.png"/><img src="img/6.png"/></marquee></div><!-- 留言板 --><div style="margin: 10px auto;text-align:center;align-content:center"><h1 style="color:#7F95D1 ; font-size:60px;font-family:微軟雅黑;text-align:center;margin: 80px auto 80px auto;">這里是留言板哦~</h1><!-- 留言展示 --><marquee direction="right" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</marquee><marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">考研倒計時好激勵！制作人加油！</marquee><marquee direction="right" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">今天的計劃都完成啦~</marquee><marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">今天睡覺了，好開心！</marquee><marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">超棒的制作人！</marquee><marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">愿我們都在平凡的日子里翩翩起舞~</marquee><!-- 新建留言 --><form><input type="text" maxlength="8000" tabindex="1" onfocus="displayInfo();" onblur="checkName();" value=""style="width: 1800px;height: 200px;margin: 100px 0 0 0;" /><br /><input name="sumit" type="button" value="提交上級！" style="width: 900px;height: 40px;" onclick="alert('劉管家已經收走，等著總裁的答復吧！')"/><input name="reset" type="reset" value="我錯了我不該亂寫，我要重新填！" style="width: 900px;height: 40px;" /></form></div><!-- 頁面轉換按鈕 --><div class="login_1"><table align="center" aborder="0" cellspacing="5" cellpadding="10" width="500px"><tr class="login_2"><!--后退一頁--><td><button class="login"><h2><a href="日記本.html">上一頁</a></h2></button></td><td></td><!--首頁--><td><button class="login"><h2><a href="首頁.html">首頁</a></h2></button></td><td></td><!--下一頁--><td><button class="login"><h2>已是尾頁</h2></button></td></tr></table></div><!-- banner結尾通欄 --><div class="end"><div class="end_left"><ul class="end_title"><li class="end1"><img src="img/5.png" />TODOLIST | 我欲摘星斗</li><li class="end2">由xxx設計推出，讓每一個有自律愿望的用戶能夠養成自律的習慣，奠定實現夢想的基礎。</li></ul></div><div class="end_right"><p>聯系我們<p /><br /><p>郵箱：35xxx@qq.com<br />電話：1xxxxxxxxxx(工作日周一至周五：8:30-11:30，13:00-17:00)</p><p class="end_state">所有頁面中的部分文字、圖片來源于網絡，僅用于期末作業設計（侵刪）。</p></div></div></body> </html>三、CSS樣式代碼
/*全局控制*/ body {width: 2275px;height: 2600px;font-family: "漢儀南宮體";font-size: 12px;color: white;background-image: linear-gradient(to bottom right,#FF82A9, #FFC0BE, #FFEBE7); }@font-face {font-family: "微軟雅黑";src: url(dqc.ttf); }/*重置瀏覽器的默認樣式*/ body, ul, li, h4.img {margin: 0;padding: 0;border: 0;list-style: none; }p {text-indent: 2em;margin: 0;padding: 0;border: 0;list-style: none; }/*導航欄樣式*/ .to1 {list-style-type: none;align-content: center;float: right;margin: 30px 100px 20px 0; }.to2 {text-align: center;color: #ffffff;font-size: 30px;font-family: "微軟雅黑";float: left;margin: 12px;align-content: center; }.to3 {text-align: center;font-size: 40px;list-style-type: none;font-family: "微軟雅黑";align-content: center;float: left;margin: 30px 0px 30px 100px; }a:link, a:visited, a:active, a:hover {color: #ffffff;text-decoration: none; }/* banner通欄樣式 */ .banner {width: 2180px;height: 838px;margin: 50px auto 15px auto;overflow: hidden; }.left {width: 1646px;height: 838px;font-weight: bold;background: url(../img/banner圖6.jpg);position: relative;float: left; }.content_left {position: absolute;top: 400px;right: 45px;text-align: right; }.school_en {font-size: 60px;font-family: "arial black";color: #FFffff;text-shadow: 0 1px #06565b; }.school_ch {font-size: 100px;font-family: "楷體";color: #ffffff;text-shadow: 0 1px #06565b;border-right: 5px solid #f90;padding-right: 10px; }.advertise {margin-top: 20px;font-size: 40px;color: #ffffff;text-shadow: 0 1px #06565b; }ul.style_a {margin-top: 25px;margin-left: 120px;list-style: none;overflow: hidden; }ul.style_a li {float: left;margin-left: 10px; }ul.style_a li a {background: #fff;width: 46px;height: 3px;text-align: center;line-height: 22px;display: block;font-size: 18px;opacity: 0.3; }ul.style_a li.current a {opacity: 0.8; }.right {width: 534px;height: 838px;background: #7F95D1;float: right;position: relative; }.content_right {position: absolute;top: 50px;left: 30px; }h4 {font-size: 28px;font-family: "微軟雅黑"; }ul.style_icon {margin-top: 10px; }ul.style_icon li {float: left;margin-right: 30px; }.cl {font-size: 28px;margin-top: 80px;margin-right: 30px;line-height: 30px; }.cl2 {font-size: 28px;margin-top: 20px;margin-right: 30px;line-height: 30px;text-indent: 2em; }/*翻頁按鈕樣式*/ .main_login {width: 2180px;height: 270px;align-items: center; }.login_page {margin: 100px 500px;width: 60%;align-items: center; }.login_img {margin: 0 auto;width: 150px;height: 150px;border: 15px solid hsla(0, 0%, 100%, .2);-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;overflow: hidden; }.show_td {width: 300px;height: 300px; }marquee {width: 80%;margin: 5px 10%;font-size: 25px;padding: 4px auto; }.login_1 {margin: 100px 300px 0px 300px;height: 250px; }.login_2 {width: 100px;height: 65px;align-items: center;align-self: center; }h2 {font-size: 24px;font-family: 微軟雅黑;color: #FFFFFF;text-align: center; }.login {border: none;outline: none;width: 7rem;height: 3rem;border-radius: 5rem;background-color: #283654;color: #FFFFFF;font-weight: bold;font-size: 1.25rem;transition: .5s; }/* 結尾欄目 */ .end {width: 100%;height: 450px;background-color: #fcfefe;margin: 50px auto; }.end_left {width: 1200px;height: 300px;margin: 100px;align-content: center;float: left; }.end_title {list-style-type: none;overflow: hidden;align-content: center;text-align: center; }.end1 {font-size: 70px;color: #000000;text-align: center; }.end2 {font-size: 30px;color: #000000;text-align: left;text-indent: 2em;margin: 50px; }.end_right {width: 770px;height: 300px;margin: 100px 100px 100px 0px;font-size: 30px;color: #000000;float: right;text-align: left;text-indent: 0em; }.end_right p {text-indent: 0em; }.end_state {width: 770px;height: 50px;font-size: 15px;color: gray;text-align: center;margin: 80px;float: inline-end; }四、頁面效果截圖
五、我的心得體會
這輩子沒想過選了文科還要上理科的課，但是比Python爬蟲有意思多了，希望再也不需要見到這個大數據學院的老師，信女愿戒掉豬肉以祈求與jing老師在課表安排上此生不復相見。
總結
以上是生活随笔為你收集整理的期末大作业 | ToDoList网页设计 关于我界面设计记录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PTA 7 - 3 h0053.求一元二
- 下一篇： CCD