一个AI制作出来的web前端网页和手撸有什么区别

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法如盒子的嵌套、浮动、margin、border、background等属性的使用外部大盒子设定居中内部左中右布局下方横向浮动排列大学学习的前端知识点和布局方式都有运用CSS的代码量也很足、很细致使用hover来完成过渡效果、鼠标滑过效果等使用表格、表单补充模块为方便新手学习页面中没有使用js有需要的可以自行添加。⚽精彩专栏推荐❤【作者主页——获取更多优质源码】❤【web前端期末大作业——毕设项目精品实战案例(1000套)】文章目录一、网页介绍一、网页效果二、代码展示1.HTML结构代码 2.CSS样式代码 三、个人总结四、更多干货一、网页介绍1网页简介此作品为学生个人主页网页设计题材HTMLCSS 布局制作,web前端期末大作业,大学生网页设计作业源码这是一个不错的网页制作画面精明代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑网页作品代码简单可使用任意HTML编辑软件如Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad等任意html编辑软件进行运行及修改编辑等操作。3.知识应用技术方面主要应用了网页知识中的: DivCSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等视频、 音频元素 、Flash同时设计了Logo源文件所需的知识点。一、网页效果二、代码展示1.HTML结构代码 代码如下示例以下仅展示部分代码供参考~!-- * Author: your name * Date: 2021-10-20 11:20:07 * LastEditTime: 2021-10-20 11:20:47 * LastEditors: Please set LastEditors * Description: In User Settings Edit * FilePath: \index\index.html --!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8title山西长治/titlelinkrelstylesheettypetext/csshrefcss/boostrap.csslinkrelstylesheethrefhttps://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.cssscriptsrchttps://cdn.staticfile.org/jquery/2.1.1/jquery.min.js/scriptscriptsrchttps://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js/scriptlinkhrefhttps://fonts.googleapis.com/css?familySourceSansPro:200relstylesheetlinkrelstylesheethrefcss/style.css/headbodyscriptsrc/demos/googlegg.js/scriptdivclassbooulclasspaginationliahref#laquo;/a/liliclassactiveahrefscenery1.html1/a/liliclassactiveahrefscenery2.html2/a/liliclassactiveahreffood1.html3/a/liliclassactiveahreffood2.html4/a/liliclassactiveahrefculture1.html5/a/liliclassactiveahrefculture2.html6/a/liliahref#raquo;/a/li/ul/divdivclassgallery-containerdivclassDivb神农定居地长治久安城/btableclassTabletrclassmtd姓名张圆圆/tdtd班级计算机1162/tdtd学号1161301231/tdtdQQ号1309482916/tdtd手机号18800662027/td/tr/table/div/divdivclassgallerydivclassframeimgclassimagesrcimg/water.jpgdivclassinfo通天峡/div/divdivclassframeimgclassimagesrcimg/snack.jpegdivclassinfoahreffood1.htmltarget_blank唇齿留香/a/div/divdivclassframeimgclassimagesrcimg/view.jpegdivclassinfoahrefscenery1.htmltarget_blank晋善晋美/a/div/divdivclassframeimgclassimagesrcimg/culture.jpegdivclassinfoahrefculture1.htmltarget_blank文化传承/a/div/divdivclassframeimgclassimagesrcimg/moun.jpgdivclassinfo天脊山/div/div/divscriptsrcjs/index.js/script/body/html2.CSS样式代码 body{height:100vh;overflow:hidden;background:gainsboro;}.gallery-container{position:relative;height:100vh;width:100vw;overflow:hidden;}.gallery{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;width:100vw;height:200px;-webkit-perspective:800px;perspective:800px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:translateY(-50%);transform:translateY(-50%);}.frame{display:flex;flex-flow:column;align-items:center;justify-content:center;border-radius:4px;position:relative;height:100%;width:200px;background:gainsboro;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:center center;transform-origin:center center;cursor:pointer;overflow:hidden;background:gainsboro;}.frame .image{display:block;position:relative;height:auto;width:90%;pointer-events:none;}.frame .info{color:white;text-shadow:0 0 2pxrgba(0,0,0,0.8);font-family:Source Sans Pro,serif;font-size:1.2em;color:black;}#codepen-link{position:absolute;bottom:20px;right:30px;height:40px;width:40px;z-index:10;border-radius:50%;box-sizing:border-box;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg);background-position:center center;background-size:cover;opacity:0.4;transition:all 0.25s;}#codepen-link:hover{opacity:0.8;box-shadow:0 0 6px #000000;}.Table{position:absolute;bottom:30px;margin-left:450px;}.m{text-align:center;font-size:small;}.Div{margin-top:100px;text-align:center;font-family:KaiTi;font-size:xx-large;}三、个人总结一套合格的网页应该包含(具体可根据个人要求而定)页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分所有页面相互超链接可到三级页面有5-10个页面组成页面样式风格统一布局显示正常不错乱使用DivCss技术菜单美观、醒目二级菜单可正常弹出与跳转要有JS特效如定时切换和手动切换图片新闻页面中有多媒体元素如gif、视频、音乐表单技术的使用页面清爽、美观、大方不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。四、更多干货1.如果我的博客对你有帮助、如果你喜欢我的博客内容请 “点赞” “✍️评论” “收藏”一键三连哦2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者一起探讨 前端 Node 知识互相学习」3.以上内容技术相关问题欢迎一起交流学习