-
完整HTML实例网页代码（1）
2019-04-21 10:18:51要完成一个网页的制作其实本质上是很简单的，本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的 样式格局，同样的也有js的动画效果，这个实例比较全面，有助于同学的学习。 本实例仅供参考，...展开全文要完成一个网页的制作其实本质上是很简单的，本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的 样式格局，同样的也有js的动画效果，这个实例比较全面，有助于同学的学习。
本实例仅供参考，其他行为自负。
本实例分为四篇来观看。一共有一个HTML文件，三个css样式表，三个js，有16张图片。其中img里面的图片可以自行下载，或用本实例里面的图片。测试项目是建议大家用谷歌浏览器。
完整代码链接在完整HTML实例网页代码（4）底部。
一、实例图片
1、首页样式
2、下拉样式
3、下拉样式
-
HTML实例—以一个简单网页为例
2020-07-13 16:41:15HTML实例 1、原型与实例对比 （1）原型 （2）实例 2、详情 2.1 布局总览 2.2 布局分述 （1）标题+搜索 分两块内容，用<span> span1:文字：gsonya-HTML span2:输入框+按钮 （2）导航栏 ...展开全文HTML实例
1、原型与实例对比
（1）原型
（2）实例
2、详情
2.1 布局总览
2.2 布局分述
（1）标题+搜索
分两块内容，用<span>
span1:文字：gsonya-HTML
span2:输入框+按钮
（2）导航栏
将这四个内容设置为链接，首页刷新当前页面；HTML实例链接到第（5）块内容；其它和联系我暂时未设置链接内容。
（3）轮播图注释
鼠标移入时，“图1”显示图1内容的解释。主要是通过left:-999em;设置解释内容为隐藏形式，当鼠标移入到字体上时，设置left:100%;就可以实现。
（4）轮播图
点击右下角的1,2,3可以查看轮播图的每张图片，因为轮播图一般涉及点击响应事件，要用到JavaScript内容，但这个网页仅展示HTML内容，所以这个轮播图只是简单的鼠标点击，图片显示问题。将三张图片首先用absolute定位，然后当鼠标点击时设置图片的图层就可展示简单的轮播图。主要通过z-index实现。
（5）HTML实例
HTML实例下面的每个都是实例链接，点击文字就可以展示之前博客web-HTML学习笔记里的内容。
例如：link
其中有内容还未编辑就会显示
注：这些链接都会在新窗口中展开
（6）登录
登录内容是由几个div块组成
div1：文字内容：个人中心
div2：图+文本输入框
div3：图+密码输入框
div4：按钮1（提交）+按钮2（重置）
（7）图片
分配一个div块内容，插入一张图片作为分隔
（8）相关链接
链接内容是由图片+链接文字组成，点击链接文字会打开链接内容（在本窗口中打开）
例：gsonya-blog
（9）页脚
单独的一个div块
3、问题
（1）原型设计和HTML实例展示出来时颜色有不一致情况，原型设计使用透明度时，字体内容是清晰的，但是HTML写出来的透明度会变得模糊，所以在实现时，颜色有所变化。
（2）因为想要页面随着窗口大小的改变而改变，所以采用了absolute定位和宽度高度使用百分比值，但这样一来，当全屏展示时内容会显得比较扁，这点没有设置好。
如图：
小窗口
全屏
4、补充
-
＜HTML＞简单登录页面代码
2016-12-06 10:18:50简单登录HTML展开全文这是一个简单的静态的html页面登录图片，之前写的，验证码方面没有搞懂，这里我重新参考了这里，但是部分功能还没有完善。仅供参考
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态页面登录测试</title> <script language="javascript"> window.onload = function() { createCode() } var code; //在全局定义验证码 function createCode() { code = ""; var codeLength = 4; //验证码的长度 var checkCode = document.getElementById("code"); var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 for(var i = 0; i < codeLength; i++) { //循环操作 var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35） code += random[index]; //根据索引取得随机数加到code上 } checkCode.value = code; //把code值赋给验证码 } //校验验证码 function validateLogin(){ var sUserName = document.frmLogin.username.value ; var sPassword = document.frmLogin.password.value ; var inputCode = document.frmLogin.text_code.value; /*var sinputCode =document.frmLogin.inputcode.value ; */ if ((sUserName.length <= 0) || (sUserName=="")){ alert("请输入用户名!"); return false ; } if ((sPassword.length <= 0) || (sPassword=="")){ alert("请输入密码!"); return false ; } if ((inputCode.length<= 0) || (inputCode==NULL)){ alert("请输入验证码!"); return false ; } } </script> </head> <body > <fieldset> <table background="images\e.jpg " width="933" height="412"> <tr height="170"> <td width="570px"> </td> <td> </td> </tr> <tr> <td> </td> <td><table> <form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin" > <tr> <td><label for="username">用户名：</label></td> <td><input type="text" name="username" id="username" placeholder="input your name" size="20" maxlength="20" /></td> <td > </td> <td> </td> </tr> <tr> <td><label for="password">密 码：</label></td> <td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" ) this.value='';" /></td> <td> </td> <td> </td> </tr> <tr> <td><label for="text_code">验证码:</label></td> <td><input type="text" size="" name="text_code" id="text_code" /></td> <td><input type="button" id="code" onclick="createCode()" name=""></td> </tr> <tr> <td><input type="checkbox" name="zlogin" value="1">自动登录</td> </tr> </table> </td> <tr> <td> </td> <td><table> <tr> <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td> <td><input type="reset" name="rs" value="重置"></td> <td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td> </tr> </tr> </table> </td> </table> </fieldset> </form> </body> </html>执行后如图
-
个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品
2020-11-15 11:25:56静态HTML个人主页学生网页作品作品介绍修改教程作品演示代码演示源码文件作品下载 作品介绍 大学生网页设计个人主页网站模板采用DIV CSS布局制作，网页作品共4个页面，包括个人介绍（文字页面）、我的作品（图片列表...展开全文制作介绍
网页设计个人主页网站模板采用DIV CSS布局制作，网页作品共4个页面，包括个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，左侧导航区域每个导航背景色不同，导航四个背景色与页面背景呼应。
内容修改
网页代码采用基础水平DIV 布局制作，可使用Dreamweaver、HBuilder、Notepad++等任意HTML软件编辑修改内容。
作品演示
代码演示
代码说明：以下仅展示首页部分代码供参考
<div class="menu"> <ul> <li class="menua"><a href="index.html">个人介绍</a></li> <li class="menub"><a href="work.html">我的作品</a></li> <li class="menuc"><a href="skill.html">个人技能</a></li> <li class="menud"><a href="message.html">在线留言</a></li> </ul> </div> <div class="right"> <p> <strong>关于</strong><br> 姓名：<br> 籍贯：<br> 邮箱：<br> 寻找自我，树立自我，相信自我。迷茫时不必祈求神灵，忧愁时不必寄情于深邃的夜空，最好的依靠自我。 </p> </div>作品源地址
stu-works.com/html/geren/336.html
-
静态HTML网页作业模板 华为企业网站设计作品 静态学生网页设计作业简单网页制作
2020-11-14 14:14:27HTML静态华为网站设计作品模板网页作品介绍网页效果预览网页文件展示网页代码展示网页作品下载 网页作品介绍 本HTML静态网页作品采用DW制作，主题为华为热门产品，共10个页面，首页1页，二级图文页面1页，二级产品1... -
学生汽车网页设计作品静态HTML网页模板源码 大学生汽车网站制作 简单汽车网页设计成品
2020-11-14 12:53:13学生奥迪汽车静态网页设计模板网页作品介绍作品首页截图网页作品地址 网页作品介绍 本网页设计期末大作业成品使用DIV CSS布局制作，题材为奥迪概念车。顶部LOGO区及首页的汽车区使用 CSS3动画属性 制作了鼠标经过... -
html制作个人简历网页
2020-06-13 08:57:13支持二次开发,是我自己写的,因为全程都是调用网上的地址,所以没有任何其他的包需要导入和下载,一个html就可以了,但是希望大家仅做参考,毕竟每个人做出来的都是不一样的,只有你去做了,它才是你自己的 效果图 源码... -
学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
2020-11-19 17:21:27此作品为学生个人主页网页设计题材，代码为简单学生水平 DIV CSS布局制作，整个作品由主页、个人历程、兴趣爱好、学业成绩、联系我们共5页组成，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD等... -
简单个人网页制作 个人介绍网页模板 静态HTML留言表单页面网站模板 大学生个人主页网页
2020-11-15 11:33:33静态HTML个人网页主页模板网页作品介绍作品页面演示作品代码演示网页作品下载 网页作品介绍 学生个人网页制作设计模板采用DIV CSS布局制作，共4个页面：个人介绍页面、相册列表页面、作品展示页面、留言表单页面。... -
学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 dreamweaver简单个人网页...
2020-11-16 13:03:51此作品为学生个人主页网页设计题材，代码为简单学生水平 DIV CSS布局制作，整个作品由主页、个人历程、兴趣爱好、学业成绩、联系我们共5页组成，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD等... -
致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
2020-11-14 13:46:33抗疫感动致敬逆行者学生网页设计作品网页作品介绍作品首页截图作品代码展示作品下载地址 网页作品介绍 抗击疫情致敬逆行者感人类题材网页设计作品...代码说明：为保障作品的原创性，以下仅展示首页部分代码供参考： < -
网页制作HTML代码全攻略
2017-06-08 09:06:44网页制作HTML代码全攻略 -
学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板
2020-11-14 14:03:53海贼王动漫网页航海王漫画网页作品网页介绍技术知识点作品简介绍作品演示作品演示图作品文件图网页源代码作品下载 网页介绍 技术知识点 Javascript、音乐、视频、表单、三层结构 作品简介绍 海贼王动漫网页制作学生... -
HTML网页设计基础笔记 • 【第1章 HTML5基础】
2020-03-19 13:42:471.1.2 网页 1.1.3 Web 标准 1.1.4 HTML5 与移动互联网 1.1.5 网页开发工具 1.2 HTML5 标签 1.2.1 HTML5 标签概述 1.2.2 doctype 标签 1.2.3 html标签 1.2.4 head 标签 1.2.5 meta 标签 1.2.6 t... -
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
2021-06-14 02:18:38此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术（如结合使用CSS及表格、DIV、框架等技术），完成各页面的布局设计。 工具： EditPlus 一、网页效果（模仿游戏... -
网页设计（一）——HTML基础概念
2020-07-11 14:02:32网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 目录 HTML基础概念 HTML是什么 ... -
在HTML网页中书写JavaScript
2016-10-30 17:32:06参考书籍：《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著：张亚飞 1.使用<script>元素定义JavaScript脚本代码 在HTML文档中，可以使用使用<script>元素向HTML页面中插入JavaScript... -
学生简单个人博客网页DW模板 简单HTML静态网页设计个人主页制作 大学生个人网站模板下载 网页作业个人主页...
2020-11-18 11:06:11HTML静态个人博客网页个人主页作品采用DIV布局制作，共5个页面，未使用任何特殊技术，代码布局简单，整体使用CSS制作了页面背景图片，排版布局使用float基础标签制作，简单制作了导航鼠标经过和选中效果。... -
简单个人网页设计作业 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作...
2020-11-14 14:50:16学生简单静态个人主页网页设计作品作品介绍知识点应用作品简介绍网页演示网页首页演示源码文件展示网页代码预览作品修改作品下载 作品介绍 知识点应用 背景音乐、背景图片、留言表单、鼠标经过 作品简介绍 学生个人... -
基于Html+Css+javascript的网页制作（体育主题）
2021-01-17 22:57:06HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等 CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等 JavaScript：JavaScript用来实现网页上的特效... -
js爬取网页文字图片 html爬取网页信息
2019-05-28 21:44:19声明：本网页代码仅供朋友们学习使用，一 切商用等事项大家一定注意，而且我们身为开发者更应有版权意识。 功能简述 我是在网页上用js写的，因为一些原因只可以用IE浏览器运行。 主要功能是：输入一串网站地址到... -
用HTML5做一个个人网站，此文仅展示个人主页界面。内附源代码下载地址
2017-12-03 15:29:53html5 ，用css去修饰自己的个人主页 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&... -
html文本水平居中对齐_如何使用HTML将网页上的文本居中或对齐
2020-08-18 00:07:38html文本水平居中对齐How To Build a Website With HTML 如何使用HTML构建网站This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup ... -
python代码爬取html网页总结
2019-02-17 21:12:25爬取网页的目的是为了通过机器来访问网页并高效地获取有效信息，然而通常网站服务器为了减少请求负担而拒绝非人类访问，所以爬取网页 -
HTML网页常用的图像格式
2020-08-09 10:50:37网页中常见的图像格式有两种：JPEG,GIF 一.JPEG(Joint Photographic Experts Group)是特别为...虽然它仅包括256种色彩，但GIF提供了出色的，几乎没有丢失的图像压缩，并且GIF可以包含透明区域和很多动画。它靠水平扫描 -
html网页详细代码
2016-07-07 12:03:28html网页代码大全 1)贴图： 2)加入连接：写上你想写的字 3)在新窗口打开连接：写上要写的字 4)移动字体(走马灯)：写上你想写的字 5)字体加粗：写上你想写的字 6)字体斜体：写上你想写的字 7)字体下划线: 写上你想写... -
简单个人网页制作 大学生网页设计作业 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页作品...
2020-11-18 13:08:17学生简单静态个人主页网页设计作品作品介绍知识点应用作品简介绍网页演示网页首页演示源码文件展示网页代码预览作品修改作品地址 作品介绍 知识点应用 背景音乐、背景图片、留言表单、鼠标经过 作品简介绍 学生个人... -
HTML5网页动画效果
2018-01-20 11:24:04HTML5的确可以制作出非常绚丽的网页动画效果，尤其是利用HTML5 Canvas特性和HTML5 3D特性，我们更加可以欣赏到超酷的动画特效。今天我从html5tricks网站上整理了8款令人惊叹的HTML5 Canvas动画教程，大家可以一起来... -
HTML5添加网页背景音乐
2019-08-28 11:33:24<embed> 标签是 HTML 5 中的新标签。 <embed> 后面没有/结尾。 方式五（没试成功）： < bgsound src="static/sound/happyBirthday.mp3" loop=-1/> loop=2表示循环两次，loop=-1表示无限循环，... -
大一可能用到的使用HTML+CSS做成简单的静态网页
2020-08-19 21:08:46大一可能用到的使用HTML+CSS做成简单的静态网页 不知道你们大一学html和css没有,哈哈.要是老师负责还好,要是不负责就jj了,期末,期中可能就要交课程报告了,希望能帮到你.! 我就做了一个简单的网页哈,一个仿小米首页的...
收藏数
165,909
精华内容
66,363