時(shí)間:2023-10-14 23:30:02 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-10-14 23:30:02 來源:網(wǎng)站運(yùn)營
學(xué)生個(gè)人單頁面網(wǎng)頁作業(yè) 學(xué)生網(wǎng)頁設(shè)計(jì)成品 靜態(tài)HTML網(wǎng)頁單頁制作 dreamweaver網(wǎng)頁設(shè)計(jì)與制作代碼 web前端期末大作業(yè):HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置,有div的樣式格局,這個(gè)實(shí)例比較全面,有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。@TOC
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HERO</title> <link rel="icon" href="./font/marvel.png" type="image/x-icon" /> <link rel="stylesheet" href="./assets/reset.css"> <link rel="stylesheet" href="./assets/animate.css"> <link rel="stylesheet" href="./font/iconfont.css"> <link rel="stylesheet" href="./css/hero.css"></head><body> <div class="box"> <ul class="animated lightSpeedIn nav"> <li> <a href="hero.html"> <img src="./font/marvel.png" alt="logo"> </a> </li> <li id="li_btn"> <a href="hero.html"> HERO </a> <ul id="nav_two" class=" nav_two"> <li class="animated zoomIn " id="thor">Thor</li> <li class="animated zoomIn " id="hulk">Hulk</li> <li class="animated zoomIn " id="widow">Widow</li> </ul> </li> <li> <a href="film.html"> FILM </a> </li> </ul> <div class="con"> <div id="section" class="ironman animated rollIn"> <img src="./img/one.png" alt="鋼鐵俠" /> </div> <div class="thor animated bounceInRight"> <img src="./img/two.png" alt="雷神" /> </div> <div class="hulk animated bounceInLeft"> <img src="./img/three.png" alt="浩克" /> </div> <div class="widow animated zoomIn"> <img src="./img/four.png" alt="黑寡婦" /> </div> </div> <div class="back_top animated jackInTheBox" id="back_top"> <i class="iconfont icon-fanhuidingbu3"></i> </div> </div></body><script src="./js/jquery.min.js"></script><script src="./js/hero.js"></script></html>
body { width: 100%; height: 100%; overflow-x: hidden; background-color: #0e100f;}body a { color: #fff; text-decoration: none;}body::-webkit-scrollbar { display: none;}body .nav { z-index: 999; width: 50%; display: flex; justify-content: space-evenly; position: absolute; top: 1.5%; font-weight: bolder;}body .nav > li { display: inline-block; width: 100px; height: 100px; line-height: 100px; text-align: center;}body .nav > li img { width: 50%;}body .nav > li:nth-child(1) { font-size: 25px;}body .nav > li:hover { cursor: pointer; font-size: 25px;}body .nav .nav_two { display: none; color: lightgray; font-size: 15px;}body .nav .nav_two li { height: 50px;}body .nav .nav_two li:hover { font-size: 20px;}body img { width: 100%;}body .box { width: 100%; color: #fff; position: relative;}body .box .back_top { display: none; cursor: pointer; position: fixed; right: 20px; top: 300px;}body .box .back_top .icon-fanhuidingbu3 { font-size: 50px;}body .box .con .hulk,body .box .con .thor,body .box .con .widow { display: none;}
【點(diǎn)贊,好評(píng),收藏】
三連 支持下吧,你的支持是我創(chuàng)作的動(dòng)力。關(guān)鍵詞:學(xué)生,靜態(tài),作業(yè),設(shè)計(jì),成品
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。