期末前端web大作业 |
您所在的位置：网站首页 › hbuilder制作网页设计动画步骤 › 期末前端web大作业 |
期末前端web大作业
|
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 @TOC 一、网页介绍📖1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。 2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。 一、网页效果🌌 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述二、代码展示😈1.HTML代码结构 🧱代码如下（示例）：以下仅展示部分代码供参考~ 代码语言：html复制 首页
网站首页
热门人物
热门推荐
会员登陆
会员注册
热门连载 
最新更新 
新番动漫 
经典完结 热门动漫人物
哆唻A梦
漩涡鸣人
江户川柯南
宇智波佐助
野比大雄
经典动漫
哆啦A梦 ドラえもん 
火影忍者 NARUTO -ナルト- 
名侦探柯南 名探偵コナン 最新更新
Copyright©经典动漫网版权所有Rights Reserved. 2.CSS样式代码 🏠代码语言：css复制body { margin: 0 auto; font-size: 12px; font-family: "微软雅黑",arial; line-height: 22px; background: #e0ecfa; } div,p,input,li,h1,h2,h3,h4,h5 { height: auto; margin: 0; padding: 0px; vertical-align: middle; } li { list-style: none; } a { text-decoration: none; color: #000; } img { border: 0; margin: 0; padding: 0; } .web { width: 1140px; height: auto; overflow: hidden; margin: 0 auto; background: #FFF; padding: 0px 30px; } .top { height: 55px; padding-top: 15px; } .logo { width: 116px; height: 39px; float: left; margin-right: 50px; } .nav { width: 720px; height: 39px; float: left; } .nav ul { padding: 0px; margin: 0; } .nav ul li { height: 39px; line-height: 39px; float: left; margin: 0px 20px; } .nav ul li a { font-size: 18px; color: #000; } .sous { width: 140px; height: 39px; float: right; } .inut { width: 110px; height: 39px; border: none; border-bottom: 1px solid #000; float: left; } .btn { width: 30px; height: 30px; background: url(../images/btn.jpg) no-repeat; border: none; margin-top: 10px; } .banner { width: 1140px; height: 364px; margin-bottom: 25px; } .box1 { width: 910px; height: 90px; margin: 0 auto; margin-bottom: 40px; } .box1 .bx { width: 88px; height: 90px; float: left; margin: 0px 60px; text-align: center; font-size: 14px; } .box1 .bx img { margin-bottom: 10px; } .tit { height: 60px; line-height: 60px; padding-left: 20px; font-size: 26px; margin-bottom: 15px; color: #464543; } .box2 { height: 250px; } .box2 .bx2 { width: 193px; height: 250px; float: left; margin: 0px 17px; text-align: center; font-size: 16px; } .box2 .bx2 img { margin-bottom: 15px; } .box3 { height: 270px; } .box3 .bx3 { width: 337px; height: 270px; float: left; margin: 0px 18px; } .box3 .bx3 img { margin-bottom: 10px; } .box3 .bx3 p { line-height: 25px; font-size: 16px; } .box4 { height: 305px; } .box4 .bx4 { width: 337px; height: 305px; float: left; margin: 0px 18px; } width: 300px; font-size: 16px; margin-top: 25px; height: 42px; border: 0; overflow: hidden; vertical-align: middle; line-height: 42px; color: #fff; background: url(../images/ico7.png) no-repeat; } .jies { width: 1140px; height: auto; overflow: hidden; margin: 0 auto; } .lv-box { height: 225px; padding: 20px 0px; } .lv-box img { width: 300px; height: 203px; float: left; margin-right: 20px; } .lv-box-r { width: 820px; height: 225px; float: left; } .lv-box .lv-tit { font-size: 16px; height: 40px; line-height: 40px; font-weight: bold; } .lv-box p { font-size: 14px; line-height: 30px; float: left; text-indent: 2em; } .lv-box a { color: #000; } .lv-box span { height: 50px; line-height: 50px; float: right; margin-right: 20px; } .lv-box span a { color: #F00; } .nr { width: 1140px; height: auto; overflow: hidden; background: #FFF; padding-top: 20px; padding-bottom: 20px; } .neititle { height: 50px; line-height: 50px; font-size: 18px; text-align: center; border-bottom: #CCC 1px dashed; margin-bottom: 20px; } .llbx1 { height: auto; overflow: hidden; margin-bottom: 30px; } .img1 { margin: 0px 20px; float: left; float: left } .img2 { margin: 0px 20px; float: left; float: right; } .llbx1 p { font-size: 16px; line-height: 30px; text-indent: 2em; }三、个人总结😊一套合格的网页应该包含(具体可根据个人要求而定) 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；undefined所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；菜单美观、醒目，二级菜单可正常弹出与跳转；要有JS特效，如定时切换和手动切换图片新闻；页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。💂【获取方式】gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app |
【本文地址】
今日新闻 |
推荐新闻 |