源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | ‍个人博客网站 | ‍个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. 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">&nbsp;&nbsp;&nbsp;&nbsp;一生用建筑征服世界</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">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</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%,你可能就会发出一声叹息:原来工作也不过如此嘛。

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

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


学习更多

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


学生个人网页模板 简单个人主页--贝聿铭人物介绍 6页带表单 带报告3800字相关推荐

  1. 学生HTML个人网页作业作品 HTML+CSS贝聿铭人物介绍 6页 (1)

  2. HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做...

    1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...

  3. HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做

    HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做 1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大 ...

  4. 我的家乡潍坊HTML静态网页 学生个人网页设计作品 学生家乡网页模板 简单个人主页成品

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

  5. 学生个人网页设计作品 HTML+CSS+JavaScript仿小米商城(8页) 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做

    临近期末,大一新生的各种考试和专业结课作业纷至沓来.什么高数啊.线代啊.C语言.网页设计等,简直让人头大.你还在为网页设计老师的作业要求感到头大?网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...

  6. 学生个人网页设计作品 学生个人网页模板简单个人主页成品 个人网页制作 HTML学生个人网站作业设计

  7. 个人博客 HTML个人介绍网页 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计

  8. 个人设计web前端大作业 HTML期末大作业 学生个人网页设计作品 学生个人网页设计作品 学生个人网页模板 简单个人主页成品

  9. HTML学生个人网站作业设计 学生大学生活网页设计作品 学生个人网页模板 简单个人主页成品 div+css个人网页制作

最新文章

  1. 互联网垂直社交创业新形态——ThinkSNS
  2. 360手机麦克风测试软件,【奇酷小技巧】教你无需ROOT增大话筒、听筒和外放声音!...
  3. Mysql内连接_INNER JOIN
  4. driver.class.php line: 109,thinkphp3.2.3 无法加载数据库驱动: Think\Db\Driver\
  5. 2020年旷世校招JAVA岗笔试第一题
  6. k8s查看节点CPU消耗情况
  7. Linux网络端口命名规则,一致性网络设备命名
  8. 【RDMA】qp数量和RDMA性能(节选翻译)|连接数
  9. 深夜读萧红《呼兰河传》
  10. 皮尔逊(Pearson)相关系数 - 公式和代码实现
  11. 有趣的数据结构——Linux内核中的链表(Black Aureole)
  12. 逍遥模拟器自定义默认桌面程序
  13. 使用CS发送钓鱼邮件
  14. Java的MessageDigest类、MD5算法
  15. jmeter可以做接口测试和压力测试(较全)
  16. 微信应用号 +QQ娱乐社交 腾讯能否独步天下?
  17. android pdfview,android pdfview运行报错,求大神过来解答。跪谢
  18. 复盘:一副牌(54张),三人斗地主,大小王在同一家的概率是多少
  19. java实现手机验证码登录功能,写给正在求职的Java开发
  20. 玩游戏吗~Python教你实现 经典90坦克大战(支持单双人模式哦)| 附源代码

热门文章

  1. Java写一个等腰三角形(数字符号都可)
  2. Windows 老毛病又犯了,鸡肋功能降低37%性能,教你一键关闭
  3. JDBC原理实现详解
  4. mysql 查看所有的连接数_Mysql 查看连接数,状态
  5. 神经网络反向传播BP算法举例说明
  6. eclipse git push 冲突问题解决
  7. P2575 高手过招 (博弈、sg函数)
  8. 高手过招不用鼠标,一款超好用的跨平台命令行界面库
  9. Apache配置文件介绍
  10. Caffe框架总结-Caffe结构