⛵Get the source code and contact at the end of the article✈
Web front-end development technology
description of web design theme, DIV+CSS layout production, HTML+CSS web design final course homework tea culture website | Chinese traditional cultural theme | Beijing opera culture ink style calligraphy and painting | & Production | HTML Final College Web Design Assignment, Web College Web Pages
-
HTML: structure
-
CSS: style
In terms of operation, html5 and css3 are used, and
basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are adopted -
JavaScript: do interactive behavior with the user
Article directory
Front-end learning route
(1) html file: where index.html is the home page, and other html is the second-level page;
(2) css file: css all page styles, text scrolling, image zoom, etc.;
(3) js file: js realizes dynamic carousel special effects , form submission, click event, etc. (js code is used in web pages)
Basic structure of web page
(1) Homepage: The first page you see when you enter the webpage (LOGO, company name, navigation, banner, news, related information, bottom information, banner is generally 5) (2) Secondary page: After clicking to enter from the
homepage The page is called the second-level page
(3) Third-level page: the page clicked from the second-level page
Web page html : A web page is the basic element of a website and a platform for carrying various website applications.
In layman's terms, a website is a home page composed of web pages : the home page is the entry
page of a website, so it is often edited to make it easy to understand . The top or side area, also known as the navigation bar, plays the role of linking various pages in the site or software.
Web page footer : It is the area at the bottom of each page in the web page. Often used to display additional information. Such as author, record number, etc.
web demo
HTML structure code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<title>故宫博物馆</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/homecommon.css">
<link rel="stylesheet" href="css/home.css">
<script src="js/函数.js"></script>
<script src="js/common.js"></script>
<script src="js/home.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 头部 -->
<header>
<div class="logo"></div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="guide.html">导览</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="exhibition.html">展览</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="teach.html">教育</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="probe.html">探索</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="learning.html">学术</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="cultural.html">文创</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="about.html">关于</a><b><img src="picture/arrow1.png" alt=""></b></li>
</ul>
</div>
<div class="tools">
<ul class="clear">
<li>
<a href="javascript:;"><img src="picture/tools1.png" alt=""></a>
<div class="show">
<a href="signin.html">登录</a>
<a href="signin.html">注册</a>
</div>
</li>
<li>
<a href="javascript:;"><img src="picture/tools2.png" alt=""></a>
<div class="show">
<a href="javascript:;">EN</a>
<a href="javascript:;">青少版</a>
</div>
</li>
<li>
<a href="javascript:;"><img src="picture/tools3.png" alt=""></a>
<div class="show">
<a href="javascript:;">搜索</a>
</div>
</li>
</ul>
<a href="#" class="tools4">
<img src="picture/tools4.png" alt="">
</a>
</div>
<div class="nav_child">
<div class="child c1">
<div class="nav">
<a href="javascript:;">开放时间</a>
<a href="javascript:;">票务服务</a>
<a href="javascript:;">交通路线</a>
<a href="javascript:;">游览须知</a>
<a href="javascript:;">全景故宫</a>
</div>
</div>
<div class="child c2">
<div class="nav">
<a href="javascript:;">近期展览</a>
<a href="javascript:;">专馆</a>
<a href="javascript:;">原状陈列</a>
<a href="javascript:;">赴外展览</a>
</div>
</div>
<div class="child c3">
<div class="nav">
<a href="javascript:;">教育新闻</a>
<a href="javascript:;">故宫讲坛</a>
<a href="javascript:;">故宫博物院教育中心</a>
<a href="javascript:;">国际博协培训中心</a>
<a href="javascript:;">故宫志愿者</a>
</div>
</div>
<div class="child c4">
<div class="nav">
<a href="javascript:;">建筑</a>
<a href="javascript:;">藏品</a>
<a href="javascript:;">古籍</a>
<a href="javascript:;">宫廷历史</a>
<a href="javascript:;">文物医院</a>
<a href="javascript:;">文化专题</a>
<a href="javascript:;">名画记</a>
<a href="javascript:;">数字多宝阁</a>
<a href="javascript:;">数字文物库</a>
<a href="javascript:;">藏品总目</a>
</div>
</div>
<div class="child c5">
<div class="nav">
<a href="javascript:;">学术资讯</a>
<a href="javascript:;">专家名录</a>
<a href="javascript:;">故宫研究院</a>
<a href="javascript:;">故宫学院</a>
<a href="javascript:;">其他学术机构</a>
<a href="javascript:;">故宫博物院院刊</a>
</div>
</div>
<div class="child c6">
<div class="nav">
<a href="javascript:;">故宫出版</a>
<a href="javascript:;"> 文创产品</a>
<a href="javascript:;"> 故宫壁纸</a>
<a href="javascript:;"> 故宫APP</a>
<a href="javascript:;"> 故宫游戏</a>
</div>
</div>
<div class="child c7">
<div class="nav">
<a href="javascript:;">总说</a>
<a href="javascript:;">领导资讯</a>
<a href="javascript:;">院史编年</a>
<a href="javascript:;">景仁榜</a>
<a href="javascript:;">机构</a>
<a href="javascript:;">设置</a>
</div>
</div>
</div></header>
<div class="home">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
</ol>
</div>
<div class="h_w">
<div class="h_row1">
<h1>故宫博物院关于“五一”假期期间参观的温馨提示</h1>
<p>“五一”假期期间，故宫博物院开馆时间从8:30提前至8:00。为了更好地提供票务服务，即日起，故宫博物院门票的开售时间从每日24时，提前至每日20时。</p>
<a href="javascript:;">详细内容
<div id="line0" style="position: absolute; inset: 0px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110" height="40" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#dadada" d="M0,5L5,5L5,0L105,0L105,5L110,5L110,35L105,35L105,40L5,40L5,35L0,35L0,5" stroke-width="2" stroke-dasharray="1000,1000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; stroke-dashoffset: 0px; stroke-dasharray: 500, 500;"></path></svg></div>
</a>
</div>
<div class="h_row2">
<div class="row2_col1">
<div class="row1">
<div class="new">
<h1><img src="picture/public-icon1.png" alt="">故宫 资讯<img src="picture/public-icon2.png" alt="">
<a href="javascript:;" class="a">更多
<i></i>
</a>
</h1>
<div class="list">
<a href="javascript:;">【声明】关于故宫博物院在职、离退休人员参加社会文物鉴定等公务性活动的声明</a>
<a href="javascript:;">【严正声明】关于我院依法对“故宫博物院”享有名称权和对已注册商标的商标专用权的严正声明</a>
</div>
<ul class="bottom">
<li>故宫博物院第九届故宫学高校教师讲习班招收学员启事
<p>03 / 17</p>
</li>
<li>故宫博物院关于“五一”假期期间参观的温馨提示
<p>04 / 30</p>
</li>
<li>故宫博物院2021年度部门预算
<p>04 / 30</p>
</li>
<li>“庙堂仪范——故宫博物院藏历代人物画特展（第一期）
<p>04 / 30</p>
</li>
<li>故宫博物院陶瓷馆于“五一”武英殿开馆
<p>04 / 30</p>
</li>
</ul>
</div>
<div class="img"><img src="picture/s6084d111809d6.jpg" alt=""></div>
</div>
<div class="row2">
<img src="picture/s60471e6f2bc3d.png" alt="">
</div>
</div>
<div class="row2_col2">
<div class="row1">
<div class="col1">
<div class="h1">2021 / 5 / 2</div>
<div class="h2">今日开馆</div>
<div class="p">
<div class="p">除法定节假日，故宫博物院全年实行周一闭馆<strong>入馆参观需验证健康码，测体温，刷身份证</strong></div>
</div>
<div class="list">
<div class="li">
<h1>08:30</h1>
<p>开放进馆时间</p>
</div>
<span></span>
<div class="li">
<h1>16:00</h1>
<p>止票时间<br>(含钟表馆、珍宝馆)</p>
</div>
<span></span>
<div class="li">
<h1>16:10</h1>
<p>停止入馆时间</p>
</div>
<span></span>
<div class="li">
<h1>17:00</h1>
<p>闭馆时间</p>
</div>
</div>
</div>
<div class="col2">
<div class="col2_row1">
<div class="item1">
<img src="picture/s5fae58c4971ad.png" alt="">
<div class="h">官方购票网站</div>
</div>
<div class="item1">
<img src="picture/s5fae58c497445.png" alt="">
<div class="h">官方购票公众号</div>
</div>
<div class="item2">
<div class="h1">票务咨询电话</div>
<div class="p1">服务时间：8:30 — 22:00</div>
<div class="t">
<span>010-85007057</span>
<span>010-85007058 </span>
<span>010-85007062 </span>
<span>010-85007063 </span>
<span>010-85007966 </span>
<span>010-85007970</span>
<span>010-85007967</span>
<span>010-85007968</span>
</div>
</div>
</div>
<div class="slp"></div>
<ul class="col2_row2">
<li><img src="picture/s5fa5319858ff0.png" alt="">导览地图</li>
<li><img src="picture/s5fa531985946e.png" alt="">交通路线</li>
<li><img src="picture/s5fa5319859960.png" alt="">票务服务</li>
<li><img src="picture/s5fa5319859c8d.png" alt="">游览须知</li>
</ul>
</div>
</div>
<div class="box4">
<h1><img src="picture/public-icon1.png" alt="">开放 公告<img src="picture/public-icon2.png" alt="">
<a href="javascript:;" class="a">更多
<i></i>
</a>
</h1>
<div class="list">
<a href="javascript:;">故宫博物院关于暂停城墙开放的公告</a>
<a href="javascript:;">故宫博物院实行全部网络购票</a>
</div>
<ul class="bottom">
<li>关于承乾宫青铜器馆暂停开放的公告
<p>2021 / 04 / 27</p>
</li>
<li>关于故宫博物院典藏如意展恢复开放的公告
<p>2021 / 03 / 10</p>
</li>
<li>关于故宫博物院典藏如意展暂停开放的公告
<p>2021 / 03 / 03</p>
</li>
</ul>
</div>
</div>
</div>
<div class="h_row3">
<div class="box1">
<h1><img src="picture/public-icon1.png" alt="">故宫 藏品<img src="picture/public-icon2.png" alt=""></h1>
<div class="num"><b>1,863,404</b>
<p><img src="picture/indexicon1.png" alt=""></p>
</div>
<a href="javascript:;">藏品总目
<div id="line1" style="position: absolute; inset: 0px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="140" height="40" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#ffffff" d="M0,5L5,5L5,0L135,0L135,5L140,5L140,35L135,35L135,40L5,40L5,35L0,35L0,5" stroke-width="2" stroke-dasharray="1000,1000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; stroke-dashoffset: 0px; stroke-dasharray: 500, 500;"></path></svg></div>
</a>
<a href="javascript:;">数字文物库
<div id="line2" style="position: absolute; inset: 0px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="140" height="40" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#ffffff" d="M0,5L5,5L5,0L135,0L135,5L140,5L140,35L135,35L135,40L5,40L5,35L0,35L0,5" stroke-width="2" stroke-dasharray="1000,1000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; stroke-dashoffset: 0px; stroke-dasharray: 500, 500;"></path></svg></div>
</a>
</div>
<ul class="box2">
<li><img src="picture/s60754db6220db.jpg" alt="">
<div class="mask">
<p>马远白蔷薇图页</p>
<p> 宋</p>
<p>纵26.2cm，横25.8cm</p>
<p></p>
<p class="jj">画中的白蔷薇花朵硕大，枝叶繁茂，光彩夺目。画家笔法严谨，画风清丽活泼，颇具生气，代表了南宋画院花鸟画的典型风貌。</p>
</div>
</li>
<li><img src="picture/s60754db622db6.jpg" alt="">
<div class="mask">
<p>晴春蝶戏图页</p>
<p> 宋</p>
<p>纵23.7cm，横25.3cm</p>
<p></p>
<p class="jj">图绘体态多姿的凤蝶、娇小素净的粉蝶等各种蝴蝶，在明媚的春光下宛若俏丽的花团漫天绽放，形象生动地体现出蝶戏的创作主题。</p>
</div>
</li>
<li><img src="picture/s60754db620cb3.jpg" alt="">
<div class="mask">
<p>碧桃图页</p>
<p> 宋</p>
<p>纵24.8厘米，横27厘米</p>
<p></p>
<p class="jj">图中盛开的碧桃红白相映，枝叶扶疏，娇柔妩媚。虽然画面上仅绘桃花两枝，但它的繁花簇簇、苞蕾盈枝则透露出浓郁的春意。</p>
</div>
</li>
</ul>
</div>
<div class="h_row4">
<div class="row1">
<h1><img src="picture/public-icon1.png" alt=""> 博物馆活动<img src="picture/public-icon2.png" alt=""></h1>
<ul class="box3">
<li>
<h3>【讲座报道】朱玉麒：从燕然山到大成殿——西北边疆平定的纪功碑——故宫研究院学术讲坛第八十二讲</h3>
<p>2021年4月21日下午，北京大学历史学系暨中国古代史研究中心教授朱玉麒先生在故宫博物院第二会议...</p>
</li>
<li>
<h3>《（新编）中国通史》清代（上）卷、中国历史图录卷 编纂工作正式启动</h3>
<p>《（新编）中国通史》是党中央在中国特色社会主义进入新时代，中华民族迎来全面建成小康社会，实现第一...</p>
</li>
<li>
<h3>国际古迹遗址日中国主题活动“我在故宫画彩画——听障青少年走进文化遗产地”顺利举行</h3>
<p>2021年4月18日上午，由国家文物局指导，中国古迹遗址保护协会、故宫博物院、中国听力语言康复研...</p>
</li>
<li>
<h3>【讲座报道】王旭东院长：“敦煌与故宫——中华文化包容互鉴的结晶” ——2021年北大故宫系列学术讲座隆重开启</h3>
<p>2021年4月9日晚，在这春意盎然的美好日子里，故宫博物院院长王旭东做客北京大学，举办主题为“敦...</p>
</li>
</ul>
</div>
<div class="row2">
<img src="picture/s608b636e07539.jpg" alt="">
</div>
</div>
<ul class="h_row5">
<li><img src="picture/s5ebe364fa24bd.jpg" alt="">
<div class="cont"><img src="picture/s5863704a46b10.png" alt="">
<p>图书馆</p>
</div>
<div class="mask"></div>
</li>
<li><img src="picture/s5835a58eb4421.jpg" alt="">
<div class="cont"><img src="picture/s58636fe246e0a.png" alt="">
<p>视听馆</p>
</div>
<div class="mask"></div>
</li>
<li><img src="picture/s5835a57aca965.jpg" alt="">
<div class="cont"><img src="picture/s58bcfc20c5076.png" alt="">
<p>数字文物库</p>
</div>
<div class="mask"></div>
</li>
<li><img src="picture/s5f86a1c4afbf6.jpg" alt="">
<div class="cont"><img src="picture/s58bcfc33c893d.png" alt="">
<p>全景故宫</p>
</div>
<div class="mask"></div>
</li>
<li><img src="picture/s5835a57aca965.jpg" alt="">
<div class="cont"><img src="picture/s58bcfc4e63ba3.png" alt="">
<p>V故宫</p>
</div>
<div class="mask"></div>
</li>
</ul>
</div>
<div class="sidebar">
<ul class="sidebar_ul">
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;">常</a>
<div class="box"><i>年</i> · <i>庆</i> · <i>博</i> · <i>春</i> · <i>夏</i> · <i>秋</i> · <i>冬</i> · <i>常</i></div>
</li>
<li>
<a href="javascript:;">享</a>
<div class="box"><img src="picture/share-icon1.png" alt=""><img src="picture/share-icon2.png" alt=""></div>
</li>
<li>
<a href="javascript:;">书</a>
<div class="box">图书馆</div>
</li>
<li>
<a href="javascript:;">听</a>
<div class="box">视听馆</div>
</li>
<li>
<a href="cultural.html">创</a>
<div class="box">文创馆</div>
</li>
<li>
<a href="javascript:;">景</a>
<div class="box">全局故宫</div>
</li>
<li>
<a href="javascript:;">VR</a>
<div class="box">V故宫</div>
</li>
<li>
<a href="javascript:;">云</a>
<div class="box">云游故宫</div>
</li>
<li>
<a href="signin.html">登</a>
<div class="box">会员登录</div>
</li>
<li>
<a href="javascript:;"></a>
<div class="box">调查问卷</div>
</li>
</ul>
<div class="sidebar_x"></div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="num">网站访问量<span><i>1</i><i>3</i><i>1</i><i>7</i><i>7</i><i>3</i><i>8</i><i>8</i><i>0</i></span></div>
<div class="nav_foot"> 网站地图 相关链接 影像授权 隐私政策 版权声明 在线咨询 联系我们 关于我们 调查问卷 </div>
<div class="row1">网站维护：故宫博物院资料信息部 联系方式：[email protected]</div>
<div class="row2"><img src="picture/ico.png" alt=""> 京公网安备 11010102004165号 京ICP备05067311号-1</div>
<div class="row3">© 2001- 现在 故宫博物院 网站建设： 北京分形科技</div>
<div class="jy">浏览建议</div>
<div class="row4">
<div class="col">
<div class="col3"></div>
</div>
<div class="col2"></div>
</div>
</div>
</body>
</html>
The more you learn, the more confused you become
It's normal to feel this way, because you haven't really been in the company, and you don't know how much you need to learn to be competent for the work assigned to you in the company. I can see from your statement that your foundation should still be very solid. There is definitely no problem following the full set of video tutorials on the Internet.
When you actually enter the company in the future and find that the difficulty and amount of work are only about 20% of your study period, you may sigh: So the work is nothing more than that.
This is normal, because most companies recruit you to work and write business, not to let you be a newcomer to develop the company structure. They are all ready-made things, what you have to do is to add bricks and tiles under the guidance of others and direct them hand in hand. At that time, I am afraid you will exclaim: This is it?
So, relax and enjoy your college time
—————————————————
learn more
Follow me | Like blog posts | Take you to increase your knowledge every day
