時間：2023-09-21 22:24:01 | 來源：網(wǎng)站運營
時間：2023-09-21 22:24:01 來源：網(wǎng)站運營
大學生個人網(wǎng)頁模板 簡單網(wǎng)頁制作作業(yè)成品 極簡風格個人介紹HTML(個人博客 4頁)：?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計期末課程大作業(yè) | 個人博客網(wǎng)站 | 個人主頁介紹 | 個人簡介 | 個人博客設(shè)計制作 | 等網(wǎng)站的設(shè)計與制作 | 大學生個人HTML網(wǎng)頁設(shè)計作品| HTML期末大學生網(wǎng)頁設(shè)計作業(yè)，Web大學生網(wǎng)頁
在線咨詢
<!DOCTYPE html ><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="js/swiper.min.js"></script><script type="text/javascript" src="js/index.js"></script><title>個人博客</title><style type="text/css">* { margin: 0; padding: 0;}.menus.menus1 h1 { vertical-align: sub; float: left; margin-top: 30px; font-size: 54px; text-transform: none; font-family: "華文行楷"; font-weight: lighter; color: #000;}.banenr { height: 80px; width: auto; background-color: #eb4537;}.banenr .banner-bg h3 { font-size: 36px; font-weight: lighter; float: left; margin-top: 20px; color: #f1f1f1; margin-left: -30px;}.banner-bg { margin: auto; width: 1100px; height: 80px; padding-left: 0px;}a { color: #000; text-decoration: none;}li { list-style: none;}.clear { clear: both;}.menus { width: 1100px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 100px;}.menus ul { width: 700px; position: relative; float: right; margin-top: 20px; font-style: italic; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #ff5a5a;}.menus li { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-size: 24px;}.menus li:nth-child(2) { color: #fff;}.menus .bg { width: 100px; height: 40px; position:absolute; left: 0; top: 0; z-index: -1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background-image: url(picture/ban.png); /*動畫隨鼠標滑動*/}.tab { width: 750px; height: 500px; border: 1px solid #000; margin-top: 20px; font-size: 40px; line-height: 500px; text-align: center; color: #888; font-weight: bold; display: none;}.show { display: block;}#footer { text-align: center; vertical-align: middle; height: 150px; padding-top: 50px; color: #FFF; background-color: #333;}body { margin: 0px; background-color: #f1f1f1;}.slider { background-color: #C99; height: 620px; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; border-radius: 12px; padding-bottom: 0px;}body { width:auto; margin: 0px; padding: 0px;}.slider1 { height: 600px; width: 1080px; margin-top: 10px; margin-right: 10px; margin-left: 10px; overflow: hidden; border-radius: 12px;}.welcome-text { height: 200px; width: 1100px; margin-top: 12px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #f1f1f1; font-size: 48px; text-align: center; vertical-align: middle; padding-top: 40px;}.scroll-td-text { height: 40px; width: 280px; text-align: center; vertical-align: middle; padding-top: 10px; font-size: 24px;}.introduce { height: 40px; width: 1100px; margin-right: auto; margin-left: auto; font-size: 24px; padding-top: 8px; border-bottom-width: 2px; border-left-width: 10px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #F00; border-left-color: #9F3;}.introduce-content { height: 500px; width: 1100px; margin-right: auto; margin-left: auto; background-color: #F0EBDB; margin-bottom: 5px; border-radius: 15px;}#img-introduce { background-color: #CC0; float: left; height: 480px; width: 620px; margin: 10px;}#text-introduce { margin: 10px; height: 480px; width: 440px; float: left;}.text-introducce { height: 100px; width: 440px; margin-bottom: 20px; margin-top: 10px;}.scroll { height: 380px; width: 1000px; margin-right: auto; background-color: #FFF; position: relative; overflow: hidden; margin-top: 20px; margin-bottom: auto; margin-left: auto;}.ms-ex { padding: 10px; height: 440px; width: 1100px; border: 1px solid #999; margin-right: auto; margin-left: auto; margin-top: 14px; margin-bottom: 14px;}.text-box { height: 40px; width: 150px; margin-top: 20px; margin-bottom: 10px; margin-left: 10px; float: left; font-size: 30px; text-align: center; vertical-align: middle; padding-top: 10px;}.ms-exhibition p { height: 36px; margin-top: 0px;}.ms-exhibition { margin-right: auto; font-size: 36px; padding-top: 0px; text-align: center; height: 36px; width: 1000px; margin-left: auto; margin-bottom: 0px; margin-top: 0px; background-color: #f1f1f1;}#text-box1 { background-color: #FF6; border-radius: 12px;}#text-box3 { background-color: #F03; border-radius: 12px;}#text4 #text-box4 { background-color: #6F6; border-radius: 12px;}.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }#text-box2 { background-color: #09F; border-radius: 12px;}.text-box-right { float: left; height: 80px; width: 250px; margin-top: 16px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; font-size: 18px;} .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: 10px; }.scroll-in { height: 300px; width: 1080px; margin-top: 40px; margin-right: auto; margin-left: auto;}.scroll-td { height: 280px; width: 280px; margin-left: 0px;}h3 { font-size: 24px; line-height: 30px; font-family: "微軟雅黑"; text-indent: 48px;}h1 { line-height: 24px; font-size: 44px;}</style><link href="css/swiper.min.css" rel="stylesheet" type="text/css"></head><body> <div class="menus menus1"> <h1>個人博客 </h1> <ul> <div class="bg"></div> <li><span><a href="javascript:;" target="blank">首頁</a></span></li> <li><span><a href="xz.html" target="blank">游戲擴列</a></span></li> <li><span><a href="dumplings.html" target="blank">愛好</a></span></li> <li><span><a href="drink.html">番劇</a></span></li> </ul> <div class="clear"></div> </div><script src="js/jquery-1.10.2.js"></script><script src="js/index.js"></script><div class="banenr"> <div class="banner-bg"> <h3>一個在中國上學的學生</h3> </div></div><div class="slider"><div class="slider1"><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="dumplings.html" target="new"><img src="picture/jz.jpg"></a></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Swiper JS --> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 30, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script></div></div><hr><div class="welcome-text"> <h1>歡迎您來到 我的個人空間</h1> <h3> </h3> <h3>歡迎你，在此偶遇的陌生人，希望你我的靈魂能夠發(fā)生有趣的碰撞。</h3></div><div class="introduce">個人簡介</div><div class="introduce-content"> <div id="img-introduce"><img style="width: 100%;height: 100%;" src="picture/01.png"> </div> <div id="text-introduce" class="text-introduce"> <div class="text-introducce" id="text1"> <div class="text-box" id="text-box1"> ·個人信息·</div> <div class="text-box-right" id="box-right1"> <br> 年齡：20 <br> </div> </div> <div class="text-introducce" id="text2"> <div class="text-box" id="text-box2"> ·吃！·</div> <div class="text-box-right" id="box-right2"> 最愛的食物：炸醬面<dr></dr> 最愛的飲料：椰果百香果汁</div> </div> <div class="text-introducce" id="text3"> <div class="text-box" id="text-box3">·留言·</div> <div class="text-box-right" id="box-right-3">這里是我的個人博客，很高興你能訪問，在這里我會將我自己展現(xiàn)給你，希望你能通過我的自我介紹了解我，不僅是外在看起來的那樣，更多的是我的愛好與興趣，希望能與你有所交集。希望能通過這種方式，遇到志同道合的朋友，在一起聊聊興趣，在一起娛樂。</div> </div> </div></div><hr><div class="ms-ex"><div class="ms-exhibition"> <p>照片墻</p></div> <div class="scroll"> <marquee direction="right" behavior="alternate" scrolldelay="200" onmouseover="stop()" onmouseout="start()"> <table width="2400" border="0" cellspacing="20" cellpadding="0"> <tr> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> <td class="scroll-td"><img style="height: 100%;" src="picture/01.png"></td> </tr> <tr> <td class="scroll-td-text">近期</td> <td class="scroll-td-text">疫情鍛煉</td> <td class="scroll-td-text">懵</td> <td class="scroll-td-text">高考完剃毛</td> <td class="scroll-td-text">畢業(yè)聚餐</td> <td class="scroll-td-text">陰間萬圣節(jié)特效</td> <td class="scroll-td-text">躺平</td> <td class="scroll-td-text">軍訓(xùn)期</td> </tr> </table> </marquee></div></div> <footer> <div id="footer"> <a style="color: #fff;">個人版權(quán)</a> <p></p> </div></footer></body></html>關(guān)鍵詞：風格,作業(yè),簡單,模板,成品,大學生
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
