一个主题是王嘉尔的静态网页(html+css 附源代码）

【好像是没用到js 时间太久远所以忘记了】
【没考虑多设备适配和弹性布局嗷在大部分电脑上显示还是正常的】
【依然很菜……纯粹写来玩的QAQ】
【emo 最近好累吖】

完整资源压缩包下载链接
如果没有积分或者下载不了可以私信我或者在评论区留个邮箱~

在我的电脑上（联想小新pro13呜呜呜大三的时候一定要换一台有独显的电脑）显示是这样的

代码

<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" type="text/css" href="description.css"><title>content</title><style></style>
</head>
<!-- 以下是顶部导航栏的html部分 --><body><div class="part1"><div class="word">Description<p>Jackson Wang is a Hong Kong rapper, singer and dancer <br>in China. He is the founder of record label Team Wang.<br></div><img src="https://2021.igem.org/wiki/images/e/ea/T--BNU-China--teamwang.jpg "></div></div><header class="header"><div class="container"><nav class="nav"><ul class="nav__list"><li class="nav__list-item"><a class="navbar-brand" href="https://2021.igem.org/Team:BNU-China"style="margin-left:2vw;margin-top:0;"><img src="https://2021.igem.org/wiki/images/6/6f/T--BNU-China--BNU_icon.png" alt=""height="55" width="90"></a></li><li class="nav__list-item"><a href="https://2021.igem.org/Team:BNU-China" class="nav__link">Home</a></li><li class="nav__list-item"><a class="nav__link">Team</a><ul class="nav__list-item-dropdown"><li><a href="https://2021.igem.org/Team:BNU-China/Team" class="nav__link">Members</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Collaborations"class="nav__link">Collaboration</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Attributions"class="nav__link">Attribution</a></li></ul></li><li class="nav__list-item"><a class="nav__link">Project</a><ul class="nav__list-item-dropdown"><li><a href="https://2021.igem.org/Team:BNU-China/Contribution"class="nav__link">Description</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Contribution"class="nav__link">Contribution</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Experiments"class="nav__link">Experiments</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Implementation"class="nav__link">Implementation</a></li></ul></li><li class="nav__list-item"><a class="nav__link">Parts</a><ul class="nav__list-item-dropdown"><li><a href="https://2021.igem.org/Team:BNU-China/Part_Collection" class="nav__link">PartCollection</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Parts" class="nav__link">Parts</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Improve" class="nav__link">Improve</a></li></ul></li><li class="nav__list-item"><a class="nav__link">Awards</a><ul class="nav__list-item-dropdown"><li><a href="https://2021.igem.org/Team:BNU-China/Entrepreneurship"class="nav__link">Entrepreneurship</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Hardware" class="nav__link">Hardware</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Inclusivity"class="nav__link">Inclusivity</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Measurement"class="nav__link">Measurement</a></li><li><a href="https://2021.igem.org/Team:BNU-China/Plant" class="nav__link">Plant</a></li></ul></li><li class="nav__list-item"><a href="https://2021.igem.org/Team:BNU-China/Safety" class="nav__link"style=" font-style: bold;">Safety</a></li><li class="nav__list-item"><a href=https://2021.igem.org/Team:BNU-China/Human_Practices" class="nav__link"style=" font-style: bold;">Human Practices</a></li><li class="nav__list-item"><a href="https://2021.igem.org/Team:BNU-China/Poster" class="nav__link">Poster</a></li></ul></nav></div></header><!-- 创建两列，一列侧边目录，另一列是文字内容 --><div id="maincontainer"><!-- creates the main container (text area) --><div class="colp-1 rmvpadmarg"><h1 id=description class="bottomborder" align="center">Introduction</h1><p>Jackson Wang (born 28 March 1994) is a Hong Kong rapper, singer and dancerbased in China. He is the founder of record label Team Wang, and is the creative director and leaddesigner for fashion brand Team Wang Design. He is active in mainland China as a solo artistand television host. He is a member of the South Korean boy group Got7.</p><p> Born and raised in Hong Kong, Wang was a sabre fencer for Hong Kong's fencing team. He was rankedeleventh in the 2010 Summer Youth Olympics, and won first place at the Asian Junior and Cadet FencingChampionships in 2011. After passing a music audition, he moved to Seoul, South Korea in July 2011 topursue a career in K-pop. In January 2014, after over two years of training, Wang debuted as a member ofGot7 with the single "Girls Girls Girls".</p><br /><br /><div id="displayvid"><video width="700" height="300" controls><source src="https://2021.igem.org/wiki/images/e/e0/T--BNU-China--Jackson.mp4" type="video/mp4">Your browser does not support the video.</video></div><h2 id=detection class="bottomborder" align="center">Life and Career</h2><p>Wang was born in Kowloon Tong, British Hong Kong on 28 March 1994, and grew up in Sha Tin District, NewTerritories. His father, Wang Ruiji, is a former member of China's national fencing team and an AsianGames gold medalist. His mother, Sophia Chow, is a former acrobatics gymnast from Shanghai. Hismaternal grandfather, Zhou Yongchang, was a pioneer of ultrasound diagnostic medicine of mainlandChina. Under the guidance of his father and other professional coaches, Wang started his fencingtraining at the age of ten. He went on to win multiple awards as part of the Hong Kong national fencingteam, including first place at the Asian Junior and Cadet Fencing Championship in 2011. Heattended the American International School Hong Kong.</p><p>In 2010, while playing basketball at his school, Wang was noted by a representative of South Koreantalent agency JYP Entertainment and invited to participate in the global auditions in Kowloon, which hepassed in December 2010, five or six months later, ranking first place among 2,000 applicants.He was offered a scholarship to Stanford University for fencing, but turned it down after passing hisaudition. In July 2011, Wang moved to Seoul, South Korea for his K-pop training. He made anappearance on the reality survival program Win: Who Is Next two years later, which aired on Mnet on 6September 2013. The program was a competition between YG Entertainment trainees (who later debuted asmembers of Winner and iKon), and JYP trainees. Wang appeared alongside fellow trainees Mark, Yugyeom,and BamBam, who were then selected as members of Got7. </p><br /><br /><h2 id=results class="bottomborder" align="center">Personal Life</h2><p>In August 2019, Wang uploaded a photo of the Chinese flag and declared himself as "one of 1.4 billionguardians of the Chinese flag" on his official Weibo account, after a Chinese flag was removed andtossed into the Victoria Harbour during the 2019-20 Hong Kong protests. In a January 2020 interviewwith Forbes, Wang introduced himself as "Jackson Wang from China" and stated: "My goal is just to put myname out on the table just to let everybody to get to know me. I want to ... let people know thatChinese kids are working on good music too."</p><p> In March 2021, Wang terminated his working relationship with Adidas, after their previously made publicstatement regarding alleged forced labour in the cotton-producing region of Xinjiang resurfaced.[97]</p><br /><br /><h2 id=future class="bottomborder" align="center">Discography</h2><p>The discography of Hong Kong singer-songwriter, dancer and producer Jackson Wang consists of one studioalbum, 15 singles, 29 collaborations and 7 soundtrack appearances for television shows.</p><br /><br /><h2 id=references class="bottomborder" align="center">References</h2><p><font size="1">[1] Chippaux JP (1998). <em>Snake-bites: appraisal of the global situation.</em> Bulletin ofthe World Health Organization, 76(5),515-24.<br />[2] Gutiérrez JM, León G, Lomonte B, Angulo Y (2011). <em>Antivenoms for SnakebiteEnvenomings. Inflammation and Allergy.</em> Drug Targets 10(5), 369–80.<br />[3] Warrell D, Gutierrez JM, Padilla A (2007). <em>Rabies and Envenomings: a NeglectedPublic Health Issue: Report of a Consultative Meeting.</em> World Health Organization,Geneva. <br />[4] Theakston RD, Laing GD (2014). <em>Diagnosis of snakebite and the importance ofimmunological tests in venom research.</em> Toxins (Basel), 6(5),1667-95.</font></p></div><div class="colp-2 rmvpadmarg"><div class="rightnavbar rmvpadmarg"><ul><li class="rightnavbarbtn"><a href="#description">Introduction</a></li><li class="rightnavbarbtn"><a href="#detection">Career</a></li><li class="rightnavbarbtn"><a href="#results">Personal Life</a></li><li class="rightnavbarbtn"><a href="#future">Discography</a></li><li class="rightnavbarbtn"><a href="#references">References</a></li></ul></div></div></div><footer><div class="footer-social"><div class="texts"><ul class="footer_container"><a href="https://2021.igem.org/Team:BNU-China">HOME</a><a href="https://www.bnu.edu.cn/">BEIJING NORMAL UNIVERSITY</a><li><a href="#"><img class="some" src="https://2021.igem.org/wiki/images/f/f5/T--BNU-China--weChat.svg"></a></li><li><a href="#"><img class="some" src="https://2021.igem.org/wiki/images/f/f5/T--BNU-China--weChat.svg"></a></li><li><a href="#"><img class="some" src="https://2021.igem.org/wiki/images/f/f5/T--BNU-China--weChat.svg"></a></li><li><a href="#"><img class="some" src="https://2021.igem.org/wiki/images/f/f5/T--BNU-China--weChat.svg"></a></li><a href="https://www.bnu.edu.cn">BEIJING NORMAL UNIVERSITY</a><a href="http://cls.bnu.edu.cn/">CLS WEB</a></ul></div></div></footer></body>

 @font-face
{font-family: chalkboardSE;
src: url('ChalkboardSE.ttf')
}*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}/* 声明默认字体样式和一些常用颜色 */:root {/* Typography */font-family: chalkboardSE;--default-font-size: 1.8rem;/* Colors */--primary-color: #7FD7A9;--gray: #BDBEBC      ;--orange: #FFBC5F      ;--red: #D57870;--purple: #8E9DD2;--plant: #D3DDAF;--dark:#363638;}/* 任意浏览器的默认字体高都是16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。为了更方便的进行换算（比如1：10），如此设置，设置了62.5%以后就有 1rem=10px */html {font-size: 62.5%;box-sizing: border-box;/* 高度和宽度应用于元素的所有部分: 内容、内边距和边框 */}body {/* 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服 */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: var(--default-font-size);line-height: 2rem;background-color: var(--plant) !important;}/* 设置列表项目样式为不使用项目符号 */ul {list-style: none;}.part1{padding-top: 5%;padding-bottom: 1%;display: flex;justify-content: center;width: 100%;height: 35rem;z-index: -1;}.part1 img{margin-top: 5%;width: 40%;height: 100%;border-radius: 3rem;border:#7FD7A9 solid 1rem;}.word{color: #000000;width: 40%;height: 40%;font-size: 8rem;height: 20% ;margin-top: 15%;margin-right: 2rem;}.word p{margin-top: 7rem;font-size: 1vw;}/* 导航栏样式 *//* 未访问的链接 */.header a:link {text-decoration: none;}/* 导航栏的队伍图标 */.navbar-brand img {max-width: 10rem;/* position: relative; *//* margin-top: -2vh; */}/* 导航栏样式 */.header {font-family: chalkboardSE;width: 100%;height: 6.5rem;z-index: 1000;background-color: #fff;box-shadow: 0 0 1rem var(--primary-color);position: fixed;top: 0rem;left: 0;font-size: 1.8rem;/* padding: 0 9.5rem; */}.header,.header * {transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);}.nav {height: 6.5rem;margin-left: -2rem;}.nav__list {margin: 0px !important;height: 6.5rem;display: flex;align-items: center;  /* 纵轴中心对齐 */justify-content: space-between;/* 各个元素均匀分布 */list-style-type: none;/* 列表项无标记 */}.nav__list-item {position: relative;}.nav__list-item:hover .nav__list-item-dropdown {display: block;/* hover时元素显示为块级元素 */}.nav__list-item:hover .nav__list-item-dropdown a:hover {opacity: 0.5;}.nav__list-item-dropdown {/* 相对于nav__list-item进行定位 */position: absolute;top: 5.6rem;background-color: var(--primary-color);left: -1.5rem;list-style-type: none;/* 隐藏元素 */display: none;width: 20rem;}.nav__list-item-dropdown a {color: #fff;}.nav__link {width: 100%;text-decoration: none;display: inline-block;color: var(--primary-color);padding: 2rem !important;cursor: pointer;text-decoration: none !important;font-weight: 900;font-size: 18px;}.nav__link:hover {opacity: 0.5;}
/* 页面内容样式 */
.rmvpadmarg {margin: 0px;padding: 0px;}
#maincontainer {width: 80%;margin: 0 auto ;margin-top: 10rem;height: 210rem;}/* 创建两列 *//* 右侧栏 */.colp-1 {   float: right;width: 75%;}/* 左侧栏 */.colp-2 {float: left;width: 20%;/* margin-top: 20rem; *//* top: 150rem; *//* position: fixed; */}.rightnavbar {margin-top: 15rem;}#maincontainer .rightnavbar.fixedrightnavbar {margin-top: -3rem;position: fixed;}#maincontainer .rightnavbar li {position: relative;text-align: justify;}#maincontainer .rightnavbar li a {display: block;color: var(--red);padding: 1rem 3rem 1rem 1rem;margin: 0.5rem 5rem 0.5rem 0;font-size: 1em;text-decoration: none;width: 80%;}/* Change the link color on hover */#maincontainer .rightnavbar li a:hover {color: rgb(20,20,20); border-right: 0.2rem solid black;}#maincontainer .bottomborder {position: relative;padding: 4rem 0;}/***** styles borders for h1 elements *****/#maincontainer h1.bottomborder:after {content:""; background: black; position: absolute; left: 0rem;bottom: 16px;height: 1px; width: 700px;}/***** styles borders for h2 elements *****/#maincontainer h2.bottomborder:after {content:""; background: black; position: absolute; left: 15rem; bottom: 18px;height: 1px; width: 400px;}/* 底部 *//* Footer styles */
footer .footer-social {/* 固定在底部 */width: 100%;text-align: center;padding: 1.5rem 0px 0.5rem 0px;margin: 0 ;bottom: 0;background-color: var(--primary-color);overflow: hidden;}footer .footer-social ul li {display: inline-block;}footer .footer-social ul li a {display: block;font-size: 1.6rem;color: #ffffff;-webkit-transition: background-color 0.3s;transition: background-color 0.3s;}footer .footer-social a:hover {color: var(--dark) !important;font-weight: bold;}footer .texts ul a {font-weight: bold;text-decoration: none;color: #ffffff;padding: 1.5rem 3rem;font-size: 1.4rem!important;}/* Some icon styles */.some {display: inline-block;width: 4rem;/* 元素对齐行内中线 */vertical-align: middle;}.some:hover {content: url('https://2021.igem.org/wiki/images/4/4f/T--BNU-China--weChatGreen.svg');}

一个主题是王嘉尔的静态网页(html+css 附源代码）相关推荐

静态网页技术———CSS知识点汇总
静态网页技术---CSS知识点汇总 /*css可以认为时由多个选择器组成的集合,每个选择器由3个基本部分组成---"选择器名称"."属性"."值&qu ...
历经一个月，终于搞定了SVM(支持向量机)-附源代码解析
历经一个月,终于搞定了SVM(支持向量机)-附源代码解析前言其实整体算下来,断断续续的也得有快两个月了(原谅博主比较笨).中间也有好几次放弃,不想写这篇总结了,但是之前立下的誓言,要将学习到的每一 ...
web第一课模拟淘宝设置静态网页——html+css布局设计
学会使用webstorm 先打开webstorm(注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录(如下图所示文件保存在c盘路径为C:\Users\baitianmeng\Web ...
大学生个人主题网站HTML,DW静态网页｜大学生html网页｜个人网页设计｜黄昏树下个人主页...
亲,(咨询特价)只是成品模板价格,不提供修改的.如果需要本店进行修改,需要根据修改的内容多少来收费. 关于本店网页成品都是经过店主设计制作,非常好原创!页面精美漂亮.店主不在线可直接拍下,发邮箱地址到 ...
web大作业静态网页 HTML+CSS+JavaScript橙色的时尚服装购物商城
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
静态网页与动态网页的区别
原创图片插曲在开始主题之前,先来统一几个概念. 实际上,关于互联网(internet,国际标准首字母是小写).因特网(Internet,国际标准首字母是大写)和计算机网络三者的概念并没有完整统一的 ...
动态网页和静态网页的区别
在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像. ...
将静态网页打包成exe应用程序
在工作中遇到一个方案,需要将静态网页打包成exe应用程序,在网上找了一下发现可以使用nativefier工具进行打包,尝试之后发现可行. 使用技术:nodejs(nativefier 包) 1.电脑上 ...
# 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写（漫威主题个人博客）
关于学习自上次写博客已过了1个月左右时间.当时刚看完html继续学习css中. 而现在也接触到了jquery的一些东西(虽然大佬们都说jquery已过时,不过拿来入手应该不错).于是这一个月在学这些 ...

一个主题是王嘉尔的静态网页(html+css 附源代码）

一个主题是王嘉尔的静态网页(html+css 附源代码）相关推荐

最新文章

热门文章