HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
一、网页介绍📖
1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。
一、网页效果🌌
二、代码展示😈
1.HTML代码结构 🧱
代码如下(示例):以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑夜主权(Night)</title>
<script type="text/javascript">
//设定rem值
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px';
</script>
</head>
<body>
<header class="head">
<div class="head_logo_div">
<img class="logo_img" src="images/upload/head.jpg"></a>
</div>
<div class="head_nav_div">
<nav class="head_nav">
<ul id="nav_ul">
<li class="nav_li_on nav_ul_li">Home</li>
<li class="nav_ul_li">Skill</li>
<li class="nav_ul_li">Experience</li>
<li class="nav_ul_li">Hobby</li>
<li class="nav_ul_li">Contact</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</header>
<ul class="float_btn" id="float_btn">
<li class="btn_on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="wrapBox" id="wrapBox">
<div class="box">
<img class="box_bg" src="images/upload/pic_1.jpg">
<div class="box01_content">
<div class="head_div">
<div class="cycle_item">
<a href="https://yoomeili.cn" class="github_a" id="github_a" target="_blank">
<span class="github_icon"></span>
<span class="github_text"><p class="item_name">GitHub</p></span>
</a>
<a href="http://blog.yoomeili.cn" class="weibo_a" id="weibo_a" target="_blank">
<span class="weibo_icon"></span>
<span class="weibo_text"><p class="item_name">微博</p> </span>
</a>
<a href="http://blog.yoomeili.cn" class="blog_a" id="blog_a" target="_blank">
<span class="blog_icon"></span>
<span class="blog_text"><p class="item_name"> 博客</p></span