100字范文 > 项目实战（一）HTML5+CSS3+JS完成前端网站的制作

项目实战（一）HTML5+CSS3+JS完成前端网站的制作

时间：2023-02-19 06:17:38

css样式：

*{padding:0;margin:0;box-sizing: border-box;}html,body{font-family: 'segoe UI',Tahoma,Geneva,verdana,sans-serif;line-height: 1.7em;}a{color: #333;text-decoration: none;}h1,h2,h3{padding-bottom: 20px;}p{margin: 10px 0;}.container{margin:0 auto;max-width: 1100px;overflow: hidden;padding: 0 20px;}.text-primary{color: #f7c08a;}.bg-dark{background: #444;color: #fff;}.clr{clear: both;}.py{padding: 10px 0;}.l-heading{font-size: 40px;padding-top: 20px;}#navber{background: #333;color: #fff;overflow: auto;}#navber a{color: #fff;}#navber h1{float: left;padding-top: 20px;}#navber ul{float: right;list-style: none;}#navber ul li{float: left;}#navber ul li a{display: block;padding: 20px;text-align: center;}#navber ul li a:hover,#navber ul li a.current{background: #444;color: #f7c08a;}#showcase{background: url('../img/1.jpg') no-repeat center center/cover;height: 600px;}#showcase .showcase-content{color: #fff;text-align: center;padding-top: 170px;}#showcase .showcase-content h1{font-size:60px;line-height: 1.2em;}#showcase .showcase-content p{font-size:20px;line-height: 1.7em; padding-bottom: 20px;}.btn{display: inline-block;font-size:18px;color: #fff;background: #333;padding: 13px 20px;border:none; }.btn:hover{background: #f7c08a;}.btn-light{background: #f4f4f4;color: #333; }#home-info{height: 400px;}#home-info .info-img{float: left;width: 50%;background: url('../img/2.jpg') no-repeat center center/cover;height: 100%;}#home-info .info-content{float: right;width: 50%;text-align: center;height: 100%;padding: 50px 30px;overflow: hidden;}#home-info .info-content p{padding-bottom: 30px; }.box{float: left;width: 33.3%;padding: 50px;text-align: center;}.box i{margin-bottom: 10px;}.bg-light{background: #f4f4f4;color: #333;}.bg-primary{background: #f7c08a;color: #333;}#about-info .info-left{float: left;width: 50%;height: 100%;}#about-info .info-right{float: right;width: 50%;height:100;}#about-info .info-right img{display: block;width: 80%;margin: 0 auto;border-radius: 50%;}#testimonials{height: 600px;background: url('../img/6.jpg') no-repeat center center/cover;padding-top: 100px;}#testimonials h2{color: #fff;text-align: center;padding-bottom: 40px;}#testimonials .testimonial{padding: 20px;margin-bottom: 40px;border-radius: 5px;opacity: 0.9;}#testimonials .testimonial img{width: 100px;height: 100px;border-radius: 50%;float: left;margin-right: 20px;}#contact-form .form-group{margin-right: 20px;}#contact-form label{display: block;margin-bottom: 5px;}#contact-form input,#contact-form textarea{width: 100%;padding: 10px;border: 1px #ddd solid;}#contact-form textarea{height: 200px;}#contact-form input,#contact-form textarea:focus{outline: none;border-color: #f7c08a;}#main-footer{text-align: center;background: #333;color: #fff;padding:20px;}

制作首页HTML框架：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="X-UA-Compatible" content="ie=edg"><meta name ="description" content="欢迎来到德云社"><meta name="keywords" content="413德云社"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/font-awesome.min.css"><title>德云社|首页</title></head><body><header><nav id="navber"><div class="container"><h1><a href="index.html">德云社</a></h1><ul><li><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="album.html">我们的回忆</a></li><li><a href="contact.html">联系我们</a></li></ul></div></nav><div id="showcase"><div class="container"><div class="showcase-content"><h1>欢迎来到<span class="text-primary"> 德云社</span> </h1><p>德云社，带给你的欢乐无限。欢迎您的到来！</p><a class="btn" href="about.html">关于我们</a></div></div></div></header><section id="home-info" class="bg-dark"><div class="info-img"></div><div class="info-content"><h2><span class="text-primary">德云社</span> 介绍</h2><p>"德云社"是以弘扬中华民族文化、培养曲艺人才、服务大众为主旨的曲艺演出团体。社团最初由著名相声演员刘洋、汤东霖、臧传奇、吴超群于1995年创建，经历了二十五年的风雨历程走到今日实属艰辛，然值得欣慰的是经过哈源先生和众多位新老相声演员的不懈努力，德云社正在逐步走向辉煌。德云社所属的"江苏相声大会"每周都在江苏农林职业技术学院等地演出五、六场。取得这么大的成功都是因为有郭老师的指导帮助。<br /></p><a class="btn btn-light" href="about.html"></a></div></section><section id="features"><div class="box bg-light"><i class="fa fa-users fa-3x"></i><h3>成员介绍</h3><p>德云社演员：<br /> 汤小脸，刘野鸡，哈萨K，超群 <br /> 一刀999，郭班主</p></div><div class="box bg-primary"><i class="fa fa-handshake-o fa-3x"></i><h3>商务合作</h3><p>关于相声表演 <br />关于校园演出 <br />关于喜剧演出 </p></div><div class="box bg-light"><i class="fa fa-envelope fa-3x"></i><h3>联系我们</h3><p>电话：163524996 <br /> 邮箱：756@ <br /> 地址：江苏农林职业技术学院</p></div></section><div class="clr"></div><footer id="main-footer"><p>德云社 © , All Rights Reserved</p></footer></body></html>

附页HTML代码框架：

附页HTML框架：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="X-UA-Compatible" content="ie=edg"><meta name ="description" content="欢迎来到德云社"><meta name="keywords" content="413德云社"><link rel="stylesheet" href="css/style.css"><title>德云社| 关于我们</title></head><body><header><nav id="navber"><div class="container"><h1><a href="index.html">德云社</a></h1><ul><li><a href="index.html">首页</a></li><li><a class="current" href="about.html">关于我们</a></li><li><a href="album.html">我们的回忆</a></li><li><a href="contact.html">联系我们</a></li></ul></div></nav></header><section id="about-info" class="py bg-light"><div class="container"><div class="info-left"><h1 class="l-heading">关于<span class="text-primary">德云社</span></h1><p>暂且不提最近因为《庆余年》频繁上热搜的郭麒麟少班主。张九龄恋情也出现在了热搜榜单上，德云社的相声演员连狗仔都安排上了，谁看了不得说句佩服呢！<br />除此之外德云社票的话题更是两次登上热搜，有时候简简单单的德云社三个字就可以在热搜榜单上占据一席之位。</p></div><div class="info-right"><img src="./img/3.jpg" alt="德云社"></div></div></section><section id="testimonials"><div class="container"><h2 class="l-heading"> 网友评价</h2><div class="testimonial bg-primary"><img src="./img/4.jpg" alt="jan"><p>最近超级喜欢德云社，了解了里面的人之后，觉得他们都是各有特色并朝着各自的方向不断成长的。人也都很好，以前被蒙骗以为德云社很黑暗，了解之后才知道很好。</p></div></div><div class="container"><div class="testimonial bg-primary"><img src="./img/5.jpg" alt="Amay"><p>德云社年成立，但当时说白了就是召集了一伙说相声的组队找观众。初具规模，之后渐火。德云社的这十年，也是很多人认识相声并喜爱他的十年。之前除了侯宝林，马季，马三立老先生和姜昆，冯巩等非专业相声演员观众很少知道其它人.</p></div></div><div class="container"><div class="testimonial bg-primary"><img src="./img/7.jpg" alt="zhang"><p>德云社演员独特的个性和相声表演手法满足了很多人的胃口。（以下部分形容词仅代表个人观点）有汤小脸的贱，刘野鸡的憨，哈萨K，一刀999的二人转式表演也有超群的稳重，这些不同风格满足了不同观众的需求，也让更多人喜欢这个曲艺形式。</p></div></div></section><footer id="main-footer"><p>德云社 © , All Rights Reserved</p></footer></body></html>

关于我们的页面HTML和css代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我们的回忆</title> <style type="text/css">*{padding:0;margin:0;box-sizing: border-box;}html,body{font-family: 'segoe UI',Tahoma,Geneva,verdana,sans-serif;line-height: 1.7em;}a{color: #333;text-decoration: none;}.container{margin:0 auto;max-width: 1100px;overflow: hidden;padding: 0 20px;}.text-primary{color: #f7c08a;}.bg-dark{background: #444;color: #fff;}#navber{background: #333;color: #fff;overflow: auto;}#navber a{color: #fff;}#navber h1{float: left;padding-top: 20px;}#navber ul{float: right;list-style: none;}#navber ul li{float: left;}#navber ul li a{display: block;padding: 20px;text-align: center;}#navber ul li a:hover,html {overflow:hidden; -ms-touch-action:none;-ms-content-zooming:none;}body {position:absolute;margin:0px;padding:0px;background:#fff;width:100%;height:100%;}#canvas {position:absolute;width:100%;height:100%;background:#fff;}</style><script type="text/javascript" src="js/ge1doot.js"></script><script type="text/javascript">"use strict";(function () {/* ==== definitions ==== */var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1,2],// ---- poly constructor ----Poly = function (parent, face) {this.parent = parent;this.ctx = ctx;this.color = face.fill || false;this.points = [];if (!face.img) {// ---- create points ----for (var i = 0; i < 4; i++) {this.points[i] = new ge1doot.transform3D.Point(parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),parent.pc.y + face.y[i],parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ));}this.points[3].next = false;}},// ---- diapo constructor ----Diapo = function (path, img, structure) {// ---- create image ----this.img = new ge1doot.transform3D.Image(this, path + img.img, 1, {isLoaded: function(img) {img.parent.isLoaded = true;img.parent.loaded(img);}});this.visible = false;this.normalX = img.nx;this.normalZ = img.nz;// ---- point center ----this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);// ---- target positions ----this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);// ---- create polygons ----this.poly = [];for (var i = -1, p; p = structure[++i];) {layers[i] = (p.img === true ? 1 : 2);this.poly.push(new Poly(this, p));}},// ---- init section ----init = function (json) {// draw poly primitivePoly.prototype.drawPoly = ge1doot.transform3D.drawPoly;// ---- init screen ----scr = new ge1doot.Screen({container: "canvas"});ctx = scr.ctx;scr.resize();// ---- init pointer ----pointer = new ge1doot.Pointer({tap: function () {if (camera.over) {if (camera.over === camera.target.elem) {// ---- return to the center ----camera.target.x = 0;camera.target.z = 0;camera.target.elem = false;} else {// ---- goto diapo ----camera.target.elem = camera.over;camera.target.x = camera.over.tx;camera.target.z = camera.over.tz;// ---- adapt tesselation level to distance ----for (var i = 0, d; d = diapo[i++];) {var dx = camera.target.x - d.pc.x;var dz = camera.target.z - d.pc.z;var dist = Math.sqrt(dx * dx + dz * dz);var lev = (dist > 1500) ? quality[0] : quality[1];d.img.setLevel(lev);}}}}});// ---- init camera ----camera = new ge1doot.transform3D.Camera({focalLength: Math.sqrt(scr.width) * 10,easeTranslation: 0.025,easeRotation: 0.06,disableRz: true}, {move: function () {this.over = false;// ---- rotation ----if (pointer.isDraging) {this.target.elem = false;this.target.ry = -pointer.Xi * 0.01;this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);} else {if (this.target.elem) {this.target.ry = Math.atan2(this.target.elem.pc.x - this.x,this.target.elem.pc.z - this.z);}}this.target.rx *= 0.9;}});camera.z = -10000;camera.py = 0;// ---- create images ----for (var i = 0, img; img = json.imgdata[i++];) {diapo.push(new Diapo(json.options.imagesPath, img, json.structure));}// ---- start engine ---- >>>setInterval(function() {quality = (fps > 50) ? [2,3] : [1,2];fps = 0;}, 1000);run();},// ---- main loop ----run = function () {// ---- clear screen ----ctx.clearRect(0, 0, scr.width, scr.height);// ---- camera ----camera.move();// ---- draw layers ----for (var k = -1, l; l = layers[++k];) {light = false;for (var i = 0, d; d = diapo[i++];) {(l === 1 && d.draw()) || (d.visible && d.poly[k].draw());}}// ---- cursor ----if (camera.over && !pointer.isDraging) {scr.setCursor("pointer");} else {scr.setCursor("move");}// ---- loop ----fps++;requestAnimFrame(run);};/* ==== prototypes ==== */Poly.prototype.draw = function () {// ---- color light ----var c = this.color;if (c.light || !light) {var s = c.light ? this.parent.light : 1;// ---- rgba color ----light = "rgba(" + Math.round(c.r * s) + "," +Math.round(c.g * s) + "," + Math.round(c.b * s) + "," + (c.a || 1) + ")";ctx.fillStyle = light;}// ---- paint poly ----if (!c.light || this.parent.light < 1) {// ---- projection ----for (var i = 0; this.points[i++].projection(););this.drawPoly();ctx.fill();}}/* ==== image onload ==== */Diapo.prototype.loaded = function (img) {// ---- create points ----var d = [-1,1,1,-1,1,1,-1,-1];var w = img.texture.width * 0.5;var h = img.texture.height * 0.5;for (var i = 0; i < 4; i++) {img.points[i] = new ge1doot.transform3D.Point(this.pc.x + (w * this.normalZ * d[i]),this.pc.y + (h * d[i + 4]),this.pc.z + (w * this.normalX * d[i]));}}/* ==== images draw ==== */Diapo.prototype.draw = function () {// ---- visibility ----this.pc.projection();if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {// ---- light ----this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;// ---- draw image ----this.visible = true;this.img.draw();// ---- test pointer inside ----if (pointer.hasMoved || pointer.isDown) {if (this.img.isPointerInside(pointer.X,pointer.Y)) camera.over = this;}} else this.visible = false;return true;}return {// --- load data ----load : function (data) {window.addEventListener('load', function () {ge1doot.loadJS("js/imageTransform3D.js",init, data);}, false);}}})().load({imgdata:[// north{img:'imgs/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},{img:'imgs/2.jpg', x:0,y:0, z:1500, nx:0, nz:1},{img:'imgs/3.jpg', x:1000, y:0, z:1500, nx:0, nz:1},// east{img:'imgs/4.jpg', x:1500, y:0, z:1000, nx:-1, nz:0},{img:'imgs/5.jpg', x:1500, y:0, z:0, nx:-1, nz:0},{img:'imgs/6.jpg', x:1500, y:0, z:-1000, nx:-1, nz:0},// south{img:'imgs/7.jpg', x:1000, y:0, z:-1500, nx:0, nz:-1},{img:'imgs/8.jpg', x:0,y:0, z:-1500, nx:0, nz:-1},{img:'imgs/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},// west{img:'imgs/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},{img:'imgs/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},{img:'imgs/12.jpg', x:-1500, y:0, z:1000, nx:1, nz:0}],structure:[{// wallfill: {r:255, g:255, b:255, light:1},x: [-1001,-490,-490,-1001],z: [-500,-500,-500,-500],y: [500,500,-500,-500]},{// wallfill: {r:255, g:255, b:255, light:1},x: [-501,2,2,-500],z: [-500,-500,-500,-500],y: [500,500,-500,-500]},{// wallfill: {r:255, g:255, b:255, light:1},x: [0,502,502,0],z: [-500,-500,-500,-500],y: [500,500,-500,-500]},{// wallfill: {r:255, g:255, b:255, light:1},x: [490,1002,1002,490],z: [-500,-500,-500,-500],y: [500,500,-500,-500]},{// shadowfill: {r:0, g:0, b:0, a:0.2},x: [-420,420,420,-420],z: [-500,-500,-500,-500],y: [150, 150,-320,-320]},{// shadowfill: {r:0, g:0, b:0, a:0.2},x: [-20,20,20,-20],z: [-500,-500,-500,-500],y: [250, 250,150,150]},{// shadowfill: {r:0, g:0, b:0, a:0.2},x: [-20,20,20,-20],z: [-500,-500,-500,-500],y: [-320, -320,-500,-500]},{// shadowfill: {r:0, g:0, b:0, a:0.2},x: [-20,20,10,-10],z: [-500,-500,-100,-100],y: [-500, -500,-500,-500]},{// basefill: {r:32, g:32, b:32},x: [-50,50,50,-50],z: [-150,-150,-50,-50],y: [-500,-500,-500,-500]},{// supportfill: {r:16, g:16, b:16},x: [-10,10,10,-10],z: [-100,-100,-100,-100],y: [300,300,-500,-500]},{// framefill: {r:255, g:255, b:255},x: [-320,-320,-320,-320],z: [0,-20,-20,0],y: [-190,-190,190,190]},{// framefill: {r:255, g:255, b:255},x: [320,320,320,320],z: [0,-20,-20,0],y: [-190,-190,190,190]},{img:true},{// ceilingLightfill: {r:255, g:128, b:0},x: [-50,50,50,-50],z: [450,450,550,550],y: [500,500,500,500]},{// groundLightfill: {r:255, g:128, b:0},x: [-50,50,50,-50],z: [450,450,550,550],y: [-500,-500,-500,-500]}],options:{imagesPath: ""}});</script></head> <body><header><nav id="navber"><div class="container"><h1><a href="index.html">德云社</a></h1><ul><li><a href="index.html">首页</a></li><li><a class="current" href="about.html">关于我们</a></li><li><a href="album.html">我们的回忆</a></li><li><a href="contact.html">联系我们</a></li></ul></div></nav></header><div style="text-align:center;clear:both;"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div><canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas></body></html>

想学习更多技术获得更多源码欢迎关注我的公众号"码农日常"

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。