【免费】Web前端开发技术-实验三（按照老师的素材和要求做网页）资源-CSDN文库

共46个文件

png：23个

jpg：18个

html：2个

需积分: 0 139 浏览量 2022-11-11 12:47:03 上传评论收藏 1.12MB ZIP 举报

在本实验中，我们将深入探讨Web前端开发技术，特别是HTML5这一重要的标记语言。HTML5是Web开发的基础，它使得创建交互式、响应式的网页变得更为简单和直观。实验三的目标是按照指导教师提供的素材和具体要求，动手构建一个完整的网页。我们需要了解HTML5的基本结构。HTML5文档通常由`<!DOCTYPE html>`声明开始，紧接着是`<html>`元素，它是整个页面的根元素。在`<html>`内部，我们有两个主要部分：`<head>`和`<body>`。`<head>`包含元数据，如页面标题、字符集设置、引用的CSS和JavaScript文件等；`<body>`则包含用户在浏览器中看到的实际内容。在HTML5中，新增了许多语义化的标签，如`<header>`、`<nav>`、`<section>`、`<article>`、`<aside>`和`<footer>`等。这些标签有助于搜索引擎理解页面内容，提高可访问性和SEO优化。例如，`<header>`通常用于页面或区域的顶部，包含logo、导航链接等；`<nav>`用于定义主要的导航链接；`<section>`代表页面的一个独立部分；`<article>`表示自包含的内容，可以脱离上下文独立理解；`<aside>`是与主内容相关的补充信息；`<footer>`则用于页脚，展示版权信息、联系链接等。在创建网页时，我们还需要关注HTML5的表单控件。新引入的`<input>`类型，如`<input type="date">`、`<input type="email">`和`<input type="range">`等，提供了更丰富的用户输入体验。此外，`<fieldset>`和`<legend>`用于组织和解释表单，`<output>`则用于显示计算或用户输入的结果。实验中可能还会涉及到CSS3，它是对CSS的增强，提供了更多样式控制和动画效果。例如，我们可以使用`box-sizing`属性改变元素的边框和内填充计算方式，用`border-radius`创建圆角，用`transition`和`animation`实现平滑过渡和动态效果。CSS3还引入了媒体查询（Media Queries），让我们能够根据设备屏幕尺寸实现响应式设计，适应不同设备的浏览需求。至于案例4，它可能是实验中的一个实际操作项目，可能涉及到使用上述HTML5和CSS3特性来创建一个具有特定布局、内容和功能的网页。你需要按照教师提供的素材，如图片、文本、布局示意图等，结合HTML5标签和CSS3样式，将这些元素恰当地组合在一起，同时确保网页的结构清晰、样式美观、交互性良好。完成这个实验后，你不仅会掌握HTML5的基本语法和新特性，还能提高对网页布局和样式控制的理解，为以后的Web前端开发打下坚实基础。通过实际操作，你将更加熟练地运用所学知识，解决实际问题，从而提升自己的实践能力。所以，认真对待每个步骤，仔细分析教师的要求，动手实践，你一定能在Web前端开发领域更进一步。

资源推荐

资源详情

资源评论

收起资源包目录

案例4 (3).zip （46个子文件）

案例4

css

渐变.css 557B

index.css 12KB

img

images

avatar.jpg 987B

banner_l_03.png 40KB

f3.png 10KB

windows.png 324B

tw.png 436B

b2.jpg 28KB

b1.jpg 34KB

p3.jpg 43KB

s6.jpg 22KB

search.png 3KB

quotes.png 423B

msg.png 3KB

icons.png 4KB

p2.jpg 53KB

icons.svg 1KB

s4.jpg 15KB

p1.jpg 38KB

f2.png 13KB

logo2.png 1KB

p4.jpg 37KB

s2.jpg 16KB

t1.jpg 28KB

slide3.png 187KB

slide2.png 197KB

bg.jpg 20KB

f4.png 12KB

flat-phone.jpg 33KB

move-top.png 3KB

logo.png 7KB

s3.jpg 17KB

s1.jpg 36KB

f1.png 10KB

ser-bg.png 8KB

img-sprite.png 6KB

s5.jpg 32KB

b_arrow.png 3KB

mail.png 718B

message_03.jpg 4KB

s-icons.png 14KB

single.jpg 48KB

plus.png 3KB

slide1.png 218KB

index.html 10KB

渐变.html 258B

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/index.css"/> </head> <body>  <header> <div class=" w clearfix"> <div class="logo fl"><img src="img/images/logo.png" ></div> <div class= "nav fl "> <ul class="clearfix"> <li class="fl"><a href="">Home</a></li> <li class="fl"><a href="">About</a></li> <li class="fl"><a href="">Portfolio</a></li> <li class="fl"><a href="">Features</a></li> <li class="fl"><a href="">Blog</a></li> <li class="fl"><a href="">Contact</a></li> </ul> </div> <div class="shares clearfix"> <div class="share fr "><a href=""></a></div> <div class="share fr "><a href=""></a></div> <div class="share fr "><a href=""></a></div> <div class="share fr "><a href=""></a></div> <div class="share fr "><a href=""></a></div> <div class="share fr "><a href=""></a></div> </div> </div> </header>  <div class="banner"> <div class="w clearfix"> <div class="banner_l fl"> <div><img src="img/images/banner_l_03.png" alt=""></div> <ul class="clearfix"> <li id="libg"class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> </ul> </div> <div class="banner_r fr"> <div><img src="img/images/slide1.png" alt=""></div> </div> </div> </div>  <div class="icons w clearfix"> <div class="icon fl"> <div class="iconfl1 fl"> </div> <h3>EVENTS PLANNING</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> </div> <div class="icon fl"> <div class="iconfl2 fl"> </div> <h3>MASTERING DESIGN</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> </div> <div class="icon fl"> <div class="iconfl3 fl"> </div> <h3>EXPERT DEVELOPERS</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> </div> <div class="icon fl"> <div class="iconfl4 fl"> </div> <h3>ATTENSION TO DETAILS</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> </div> <div class="icon fl"> <div class="iconfl5 fl"> </div> <h3>ANOTHER COOL SERVICE.</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> </div> <div class="icon fl"> <div class="iconfl6 fl"> </div> <h3>EVENTS PLANNING</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> </div> </div>  <div class=" w BN"> <div class="BN_l fl"> <h3>HI THERE. I AM A THEME, WITH ATTITUDE. I AM ALSO RESPONSIVE, EASY DO EDIT. WHY DON'T YOU TRY ME ?</h3\> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.</p> </div> <div class="button fr">BUY NOW!</div> </div>  <div class=" w TP"> <div class="TPl"> <h2>THE PORTFOLIO</h2> </div> </div>  <div class="mians w clearfix"> <div class="main fl"> <div class="maint"> <img src="img/images/p1.jpg" width="248px" height="336px"> </div> <div class="mainb"> <h3>I AM AN AMAZING PROJECT</h3> <p>Lorem ipsum dolor sit amet,</p><p>consectetur adipiscing elit.Quisque</p><p> quis nulla amet. turpis.</p> </div> </div> <div class="main fl"> <div class="maint"> <img src="img/images/p2.jpg" width="248px" height="336px"> </div> <div class="mainb"> <h3>I AM AN AMAZING PROJECT</h3> <p>Lorem ipsum dolor sit amet,</p><p>consectetur adipiscing elit.Quisque</p><p> quis nulla amet. turpis.</p> </div> </div> <div class="main fl"> <div class="maint"> <img src="img/images/p3.jpg" width="248px" height="336px"> </div> <div class="mainb"> <h3>I AM AN AMAZING PROJECT</h3> <p>Lorem ipsum dolor sit amet,</p><p>consectetur adipiscing elit.Quisque</p><p> quis nulla amet. turpis.</p> </div> </div> <div class="main fl"> <div class="maint"> <img src="img/images/p4.jpg" width="248px" height="336px"> </div> <div class="mainb"> <h3>I AM AN AMAZING PROJECT</h3> <p>Lorem ipsum dolor sit amet,</p><p>consectetur adipiscing elit.Quisque</p><p> quis nulla amet. turpis.</p> </div> </div> </div>  <div class=" w email"> <div class="email1 fl"> <h3>SUBSCRIBE TO OUR NEWSLETTER. WE HATE SPAM AS MUCH AS YOU DO, SO NO WORRIES.</h3\> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.</p> </div> <div class="email2 fr"> </div> </div>  <div class="OB w"> <div class="OBl fl"> <h2>OUR BLOGGY</h2> </div> <div class="OBr fr"> <h2>TESTIMONIALS</h2> </div> </div>  <div class="news w clearfix"> <div class="newlt fl"> <div class="newltimg "> <img src="img/images/b1.jpg "width="340px"height="255px" > </div> <div class="newltbt "> <h3>JUST A COOL BLOG POST TITLE HERE.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p> <p>elit. Quisque quis nulla vel dolor ultrices blandit nec</p> <p>sit amet. turpis, ipsum dolor sit amet, consectetur</p> <p id="lastbd">adipiscing elit.</p> </div> </div> <div class="newlt fl"> <div class="newltimg "> <img src="img/images/b2.jpg"width="340px"height="255px" > </div> <div class="newltbt "> <h3>JUST A COOL BLOG POST TITLE HERE.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p> <p>elit. Quisque quis nulla vel dolor ultrices blandit nec</p> <p>sit amet. turpis, ipsum dolor sit amet, consectetur</p> <p id="lastbd">adipiscing elit.</p> </div> </div> <div class="newrt fl"> <div class="newrtimg fl"> <img src="img/images/f3.png" width="87px"height="101px" > </div> <div class="newrtbt"> <h3>VERY PLEASED WITH THE</h3> <h3> COOL SERVICES PROVIDED.</h3> <p id="big">Linda Scott / Webdesigner</p> <p id="changcolor">http://www.mywebsite.com</p> <p id="bf">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Quisque quis nulla vel dolor ultrices blandit nec sit amet. </p> <p>turpis.</p> </div> </div> <div class="newrt fl"> <div class="newrtimg fl"> <img src="img/images/f4.png" width="87px"height="101px" > </div> <div class="newrtbt"> <h3>VERY PLEASED WITH THE</h3> <h3> COOL SERVICES PROVIDED.</h3> <p id="big">Linda Scott / Webdesigner</p> <p id="changcolor">http://www.mywebsite.com</p> <p id="bf">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Quisque quis nulla vel dolor ultrices blandit nec sit amet. </p> <p>turpis.</p> </div> </div> </div>  <div class=" w RM clearfix"> <div class="RM1 fl"> <p>Read more</p> </div> <div class="RM1 fl"> <p>Read more</p> </div> </div> <div class="lasts"> <div class="last w "> <div class="last1 fl"> <h3>ABOUT STUDEON</h3> <div class="h3bd"></div> <p>Lorem i

评论收藏

内容反馈