15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > web课程设计网页规划与设计:HTML+CSS美发设计题材——(洗发水官网5页)

web课程设计网页规划与设计:HTML+CSS美发设计题材——(洗发水官网5页)

时间:2023-09-09 15:06:01 | 来源:网站运营

时间:2023-09-09 15:06:01 来源:网站运营

web课程设计网页规划与设计:HTML+CSS美发设计题材——(洗发水官网5页):> ⛵ 源码获取 文末联系

Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业,Web大学生网页
  1. HTML:结构
  2. CSS:样式 在操作方面上运用了html5和css3, 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
  3. JavaScript:做与用户的交互行为
@TOC


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面; (2)css文件:css全部页面样式,文字滚动, 图片放大等; (3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个   (2)二级页面:从首页点击进入之后的页面叫做二级页面 (3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的 首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名 导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用. 网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示




在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述



HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>XXX官网</title><link href="css/css.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script></head><body><div class="top1"><div class="top"><div class="logo"><h1><a href="#">XXX官网</a></h1></div><div class="box"> <div id="nav-menu"> <ul class="menu"> <li class="stmenu li1"><h3><a href="" class="xialaguang"><span>首页</span></a></h3></li> <li class="stmenu"> <h3><a href="about.html" class="xialaguang"><span>品牌实力</span></a></h3> <ul class="children"> <li><h3><a href="#"><span>FEYA简介</span></a></h3></li> <li><h3><a href="#"><span>品牌历程</span></a></h3></li> <li><h3><a href="#"><span>合作媒体</span></a></h3></li> <li><h3><a href="#"><span>卓越团队</span></a></h3></li> </ul> </li> <li class="stmenu"> <h3><a href="pro.html" class="xialaguang"><span>全线产品</span></a></h3> <ul class="children"> <li><h3><a href="#"><span>全线产品</span></a></h3></li> <li><h3><a href="#"><span>微商热销</span></a></h3></li> <li><h3><a href="#"><span>FEYA新品</span></a></h3></li> <li><h3><a href="#"><span>美发知识</span></a></h3></li> </ul> </li> <li class="stmenu"> <h3><a href="new.html" class="xialaguang"><span>最新动态</span></a></h3> <ul class="children"> <li><h3><a href="#"><span>最新动态</span></a></h3></li> <li><h3><a href="#"><span>FEYA公告</span></a></h3></li> </ul> </li> <li class="stmenu"> <h3><a href="nyfwcx.html" class="xialaguang"><span>授权查询</span></a></h3> </li> <li class="stmenu"><h3><a href="#" class="xialaguang"><span>防伪查询</span></a></h3></li> <li class="stmenu"><h3><a href="#" class="xialaguang"><span>联系我们</span></a></h3></li> </ul> </div></div><script type="text/javascript">$('#nav-menu .menu > li').hover(function(){ $(this).find('.children').animate({ opacity:'show', height:'show' },200); $(this).find('.xialaguang').addClass('navhover');}, function() { $('.children').stop(true,true).hide(); $('.xialaguang').removeClass('navhover');});</script></div></div><div class="banner-box"> <div class="bd"> <ul> <li style="background:#F3E5D8;"> <div class="m-width"> <a href="javascript:void(0);"><img src="picture/banner01.jpg" width="100%" height="600"></a> </div> </li> <li style="background:#B01415"> <div class="m-width"> <a href="javascript:void(0);"><img src="picture/banner02.jpg"></a> </div> </li> <li style="background:#C49803;"> <div class="m-width"> <a href="javascript:void(0);"><img src="picture/banner03.jpg"></a> </div> </li> <li style="background:#FDFDF5"> <div class="m-width"> <a href="javascript:void(0);"><img src="picture/banner04.jpg"></a> </div> </li> </ul> </div> <div class="banner-btn"> <a class="prev" href="javascript:void(0);"></a> <a class="next" href="javascript:void(0);"></a> <div class="hd"><ul></ul></div> </div></div><script type="text/javascript">$(document).ready(function(){ $(".prev,.next").hover(function(){ $(this).stop(true,false).fadeTo("show",0.9); },function(){ $(this).stop(true,false).fadeTo("show",0.4); }); $(".banner-box").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold", interTime:3500, delayTime:500, autoPlay:true, autoPage:true, trigger:"click" });});</script><div class="main"><div class="manmm "><div class="v2_ilike"> <div class="v2_ititle"> <div class="v2_ihz">推荐产品<em>Recommended Products</em></div> <div class="v2_ibox"> <a href="javascript:;" class="v2_ib_btn on"></a> <a href="javascript:;" class="v2_ib_btn"></a> <a href="javascript:;" class="v2_ib_btn"></a> </div> </div> <div class="v2_icontent_boxs"> <div class="v2_icontent_box"> <div class="v2_icontent_list"> <dl> <dt><a href="#"><img src="picture/imgdf_14.jpg" width="111" height="84"></a></dt> <dd><h3><a href="#">XXX头部理疗养护套组</a></h3> <p><a href="#">强效修护,让秀发健康、顺滑、舒爽</a></p> </dd> </dl> </div> <div class="v2_icontent_list"> <dl> <dt><a href="#"><img src="picture/imgdf_14.jpg" width="111" height="84"></a></dt> <dd><h3><a href="#">XXX头部理疗养护套组</a></h3> <p><a href="#">强效修护,让秀发健康、顺滑、舒爽</a></p> </dd> </dl> </div> <div class="v2_icontent_list"> <dl> <dt><a href="#"><img src="picture/imgdf_14.jpg" width="111" height="84"></a></dt> <dd><h3><a href="#">XXX头部理疗养护套组</a></h3> <p><a href="#">强效修护,让秀发健康、顺滑、舒爽</a></p> </dd> </dl> </div> </div> </div></div><script type="text/javascript">var icurrent =0;//当前元素var max = 3;//元素最多个数var divwidth = 274;function change(obj){ $('.v2_ibox a').removeClass('on'); $(obj).addClass('on'); var index = $('.v2_ibox').find('.on').index(); icurrent = index; $(".v2_icontent_box").animate({left:'-'+icurrent*divwidth+'px'});}$('.v2_ibox .v2_ib_btn').mouseover(function(){ change(this);});window.setInterval(function changeauto(){ if(icurrent==max){ icurrent = 0; } $('.v2_ibox a').removeClass('on'); $('.v2_ibox a').eq(icurrent).addClass('on'); $(".v2_icontent_box").animate({left:'-'+icurrent*divwidth+'px'}); icurrent++;} , 2000);</script><div class="mainzz fl"><div class="mainzzm"><div class="v2_ihz dsf "><span class="fr"><a href="#">更多></a></span>最新动态<em>News</em></div> <dl class="cl"> <dt></dt> <dd><h3><a href="#">XXX品牌荣获消费者最喜爱洗护大奖...</a></h3> <p><a href="#">专业线香水洗护是除了简单的头皮清洁以外,被用来提升人体美丽程度的物质...<em style="color:#e4007f">[详细]</em></a></p> </dd> </dl> </div></div><div class="mainzrm fr"><div class="v2_ihz sfa ">服务专区<em>Service Area</em></div> <dl> <dt><img src="picture/imgdf_17.jpg" width="151" height="36"></dt> <dd> <p class="fl"><a href="#">官方商城</a></p><p class="fr"><a href="javascript:;" target="_self">在线反馈</a></p> </dd> </dl> </div></div></div><div class="weixin"><a href="javascript:;">官方微信</a>|<a href="#">合作媒体</a>|<a href="#">加入XXX</a>|<a href="#">联系我们</a></div><div class="huoban wid"><div class="huobanm w"><a><img src="picture/imgdf_35.jpg" width="113" height="116"></a><a><img src="picture/imgdf_37.jpg" width="113" height="116"></a><a><img src="picture/imgdf_39.jpg" width="113" height="116"></a><a><img src="picture/imgdf_41.jpg" width="113" height="116"></a><a><img src="picture/imgdf_43.jpg" width="113" height="116"></a><a><img src="picture/imgdf_45.jpg" width="113" height="116"></a></div></div><div class="main3 wid"><p class="w">Copyright©2020 版权所有 京ICP备XXX号</p></div><div class="di"><a href="#"><img src="picture/imgdf_51.jpg" height="90" width="227"></a></div><div class="suspend"> <dl> <dt class="IE6PNG"></dt> <dd class="suspendQQ"><a href="#" target="_blank"><img src="picture/fdf_06.jpg" width="66" height="57"></a></dd> <dd class="suspendTel"><a href="javascript:void(0);"><img src="picture/fdf_08.jpg" width="66" height="63"></a></dd> </dl></div><script type="text/javascript"> $(document).ready(function(){ $(".suspend").mouseover(function() { $(this).stop(); $(this).animate({width: 103}, 400); }) $(".suspend").mouseout(function() { $(this).stop(); $(this).animate({width: 25}, 400); });});</script></body></html>

学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光 —————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识





在这里插入图片描述


关键词:设计,题材,课程,规划,发水

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭