⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 个人博客网站 | 个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业
-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
文章目录
- 前端学习路线
- 网页基本结构
- 网页演示
- HTML结构代码
- 学的反而越迷茫
- 学习更多
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贝聿铭</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<style>
/*banner begin*/
.benner{
width:1100px;
height: 500px;
margin:100px auto;}
.left1{
width: 250px;
height: 500px;
float: left;
margin:10px 20px auto auto;}
.tr{
width: 250px;
height: 250px;}
.benner .left1 .tr img{
padding:20px;
border:1px solid #666;
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #999 inset;}
.right1{
width: 800px;
height: 500px;
float: right;
margin-left:25px;
}
.benner .right1 img{
width:730px;
animation-name:mymove;
animation-duration:10s;}
@keyframes mymove{
from{ transform:translate(0) rotateY(180deg)};
50%{ transform:translate(10px) rotateY(180deg)};
51%{ transform:translate(10px) rotateY(0deg)};
to{ transform:translate(0) rotateY(0deg)};
}
/*banner end*/
/*content begin*/
.content{
width:1100px;
height:600px;
margin:10px auto;
position:relative;
}
.conone{
width:340px;
height:550px;
position:absolute;
left:0;
top:25px;}
.childone1{
width:340px;
height:450px;}
.childone2{
width:340px;
height:80px;
margin:20px auto;
background-image:radial-gradient(ellipse at center,#FFF ,#39506A);
background-repeat:no-repeat;
background-size:cover;
border-radius:6%;
font-family:"华文仿宋";
font-size:24px;
color:#000;
line-height:3;
font-weight:800;
text-align:center;}
.pb{
font-family:"华文仿宋";
font-size:24px;
line-height:1.5;
border-bottom: 1px solid #000;
margin:0 auto 10px auto; }
.ps{
font-family:"华文仿宋";
font-size:16px;
line-height:1.5;}
.spa{
font-family:"华文新魏";
font-size:14px;
float:right;
line-height:4;
margin-right:10px;}
.contwo{
width:340px;
height:550px;
position:absolute;
left:380px;
top:25px;}
.childtwo1{
width:340px;
height:270px;}
.childtwo2{
width:340px;
height:270px;}
.conthree{
width:340px;
height:550px;
position:absolute;
left:760px;
top:25px;}
.childthree1{
width:340px;
height:170px;}
.childthree2{
width:340px;
height:370px;}
/*content end*/
</style>
</head>
<body>
<!--head begin-->
<header id="head">
<div class="con">
<div class="left">
<div class="lle"><img src="pictures/lu/lu7.jpg" width="60px" height="60px"/></div>
<span id="word1">贝聿铭</span>
<span id="word2"> 一生用建筑征服世界</span>
</div>
<div class="right"><a href="register.html" target="new">┋注册┋</a></div>
</div>
</header>
<!--head end-->
<!--nav begin-->
<nav>
<div class="nav_in">
<div class="navbox"><a href="index.html" target="new">首 页</a></div>
<div class="navbox"><a href="shengping.html" target="new">人物生平</a></div>
<div class="navbox">
<div class="dropdown">
<a href="works.html"><button class="dropbtn">主要作品</button></a>
<div class="dropdown-content">
<a href="works.html">•卢浮宫金字塔</a>
<a href="works.html">•北京香山饭店</a>
<a href="works.html">•香港中银大厦</a>
<a href="works.html">•苏州博物馆</a>
</li>
<li> </li>
<li></li>
<li>
</div>
</div>
</div>
<div class="navbox"><a href="shipin.html" target="new">人物视频</a></div>
<div class="navbox"><a href="fengcai.html" target="new">个人风采</a></div>
</div>
</nav>
<!--nav end-->
<!--banner begin-->
<div class="benner">
<div class="left1">
<div class="tr"><img src="pictures/renxiang/ren12.png" height="200px" width="200px"></div>
<p>贝聿铭</br>（Ieoh Ming Pei）</br>1917年4月26日-2019年5月16日</br>美籍华人建筑师</br>美国艺术与科学院院士</br>中国工程院外籍院士</br>土木专家</p>
</div>
<div class="right1">
<img src="pictures/lun/lun11.gif" />
</div>
</div>
<!--banner end-->
<!--content begin-->
<div class="content">
<div class="conone">
<div class="childone1">
<p class="pb">人物简介</p>
<p>
<ul class="ps">
<li> <b>中文名:</b>贝聿铭</li>
<li> <b>外文名：</b>Ieoh Ming Pei</li>
<li> <b>国 籍:</b>美国</li>
<li> <b>祖 籍:</b>江苏苏州</li>
<li> <b>出生地：</b>广东广州 </li>
<li> <b>出生日期：</b>1917年4月26日</li>
<li> <b>逝世日期：</b>2019年5月16日 </li>
<li> <b>毕业院校：</b>哈佛大学 </li>
<li> <b>职 业：</b>建筑设计师 </li>
<li> <b>代表作品:</b>卢浮宫金字塔、东海大学路思义等</li>
<li> <b>主要成就：</b>：1979年获得美国建筑学会金奖<br/> 1981年获得法国建筑学金奖<br/> 1983年获得普利兹克奖</li>
</ul>
</div>
<a href="register.html" target="new">
<div class="childone2">
点此注册
</div>
</a>
</div>
<div class="contwo">
<div class="childtwo1">
<p class="pb">个人风采<a href="fengcai.html" target="new"><span class="spa">→由此进入</span></a></p>
<div><img src="pictures/renxiang/lu10.jpg" width="300" /></div>
</div>
<div class="childtwo2">
<p class="pb">人物视频<a href="shipin.html" target="new"><span class="spa">→由此进入</span></a></p>
<div><img src="pictures/renxiang/lu11.jpg" width="300" /></div>
</div>
</div>
<div class="conthree">
<div class="childthree1">
<p class="pb">主要作品<a href="works.html" target="new"><span class="spa">→由此进入</span></a></p>
<p>
<ul class="ps">
<li>•卢浮宫金字塔</li>
<li> •北京香山饭店</li>
<li>•香港中银大厦</li>
<li>•苏州博物馆</li>
</ul>
</p>
</div>
<div class="childthree2">
<p class="pb">人物生平<a href="shengping.html" target="new"><span class="spa">→由此进入</span></a></p>
<p>
<ul class="ps">
<li>•1917--1946 <br/>1917年4月26日，贝聿铭出生于广州，为苏州望族之后。</li>
<li> •1948--1963 <br/> 1948年，贝聿铭以优异的成绩从麻省理工大学毕业并任哈佛大学建筑系助理教授，从波士顿剑桥小镇（Cambridge）搬到大城市纽约。</li>
<li>•1964--1979<br/> 1964年，为纪念已故美国总统约翰·肯尼迪，贝聿铭在波士顿港口设计了约翰·肯尼迪图书馆。</li>
<li>•1980--2019<br/>1980年，法国总统密特朗邀请贝聿铭翻修卢浮宫,后贝聿铭从事务所退休，退休后他在世界各地做了许多博物馆设计。 </li>
</ul>
</p>
</div>
</div>
</div>
<!--content end-->
<!--footer begin-->
<footer>
<div class="foot">
<a href="#head"><span>Top</span></a>
<p>Copyright©2021 闫莆亚 beiyuming.com 版权所有</p>
</div>
</footer>
<!--footer end-->
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
![[附源码]java毕业设计学生宿舍设备报修](https://img-blog.csdnimg.cn/4f8df232298447a4949ce589f0438632.png)
