时间：2023-10-14 23:30:02 | 来源：网站运营
时间：2023-10-14 23:30:02 来源：网站运营
学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。@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;}【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。关键词：学生,静态,作业,设计,成品
