html+css web page production directory
write in front
Next, share the inventory from my student days. It was for different styles of materials, so I chose topics from multiple directions to practice. This time I will continue to share my original web page production examples from my student days. , I hope it can bring some substantial help to the young people. Of course, I also shared the source code on the WeChat public account "IT Huang Da Da", There is a QR code for the public account at the end of the article. Reply to "Celebrity Wang Jiaer" to receive the complete source code package.
involving knowledge
Final homework webpage production exercises, webpage production major homework, introduction to character webpage production, webpage production demo source code, simple webpage production, html+css multi-page sample, original webpage production source code.
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟
Show results
page1, homepage
page2, about me
page3, growth experience
page4, friends
page5, hobbies
1. Web page concept
If you want to make a good page, you must first have a structure in your mind, just like a cook trying to solve a cow. If you have a clear understanding of the structure, all difficulties will be easily solved. When making this kind of web page work, we It is generally implemented using floating layout, because the compatibility requirements of this type of static page are not high, so we need to think about the general framework.
In the process of making my page, I mainly use the floating layout, designing and making it from left to right, and from top to bottom. Of course, I will first To make a layout for the page frame, first I will design the following parts:
Header: banner (mainly including navigation map and logo)
Menu: menu (mainly uses a tag to jump)
Theme: main (core content display)
Bottom: foot (copyright statement)
2. Web page implementation
2.1 Home page
The core framework has the following parts:
The header, menu and tail can be the same, and the middle part is the theme introduction that reflects different pages. This one is mainly a background image with a transparent layer mask and text description. The specific code is as follows:
Html:
<div class="big_box">
<div class="banner">
<!-- <div class="logo"></div> -->
<div class="logo">王嘉尔个人主页</div>
<div class="login">
<span>登 录 | 免 费 注 册</span>
<span style="color:red;font-weight: bold;font-size: 14px;"> 关于我们</span>
</div>
</div>
<div class="menu">
<ul>
<a href="index.html">
<li class="active">首页</li>
</a>
<a href="aboutme.html">
<li>关于我</li>
</a>
<a href="kaoyan.html">
<li>成长经历</li>
</a>
<a href="pengyou.html">
<li>朋友</li>
</a>
<a href="aihao.html">
<li>爱好</li>
</a>
</ul>
</div>
<div class="by_banner class_outer">
<span class="class_cover">青春不奋斗，时光怎可期？</span>
</div>
</div>
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟
Css
body,
html {
width: 100%;
height: 1000px;
margin: 0;
padding: 0;
}
.big_box {
width: 1200px;
height: 950px;
border: 1px solid #B2DFEE;
margin: 0 auto;
}
.banner {
width: 1200px;
height: 84px;
background-color: aliceblue;
margin: 0 auto;
color: blueviolet;
}
.by_banner {
width: 1200px;
height: 800px;
background-image: url(../images/wje1.jpg);
background-repeat: repeat-y;
background-size: 100% 100%;
margin: 0 auto;
}
.logo {
width: 180px;
height: 80px;
margin: 0 20px;
float: left;
font-size: 20px;
line-height: 60px;
}
.login {
float: right;
margin-top: 20px;
margin-right: 40px;
}
.menu {
width: 1200px;
height: 64px;
background-color: #B2DFEE;
margin: 0 auto;
color: blueviolet;
}
.title {
width: 400px;
height: 60px;
line-height: 60px;
font-size: 24px;
margin-left: 20px;
float: left;
}
.menu ul {
width: 100%;
float: left;
list-style: none;
margin-top: 0px;
}
ul a{
float: left;
}
ul li {
margin-top: 0px;
width: 80px;
height: 64px;
line-height: 60px;
float: left;
color: #FF3030;
text-align: center;
}
.active {
background: #7171C6;
color: #fff;
}
.class_outer {
position: relative;
}
.class_cover {
width: calc(100% - 15px);
height: 20%;
line-height: 140px;
padding-left: 15px;
background-color: rgba(0, 0, 0, .50);
color: #FFFFFF;
font-size: 26px;
position: absolute;
left: 0px;
bottom: 0px;
}
2.2 About me
This is relatively complicated, the core code is as follows:
Html
<div class="info">
<div class="aleft">
<span class="aboutme">关于我>></span>
<img width="300" height="380" src="images/self.jpg" alt="">
<span class="name" style="font-size:18px;height:35px">王嘉尔</span>
<span class="name">出生日期: 1994年3月28日</span>
<span class="name">职 业: 歌手、主持人</span>
<span class="name">毕业院校: American International School</span>
<span class="name">特 长: 击剑、极限武术、B-BOX</span>
<span class="name"> 代表作品：DAWN OF US、OKAY、Generation 2、Papillon
</span>
</div>
<div class="aright">
<div class="abo">
<span class="title_xq"> 相关作品</span>
<table log-set-param="table_view" data-sort="sortDisabled">
<tbody>
<tr>
<th width="143"><b>参演年份</b></th>
<th width="143"><b>歌曲名称</b></th>
<th width="143"><b>演唱者</b></th>
<th width="143">备注</th>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2014-08-20</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1"><a target="_blank"
href="">Stress Come on</a></td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">big bottle</td>
<td width="146" align="center" valign="middle">限定组合</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2015-01-16</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">鱿鱼大酱</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">big bottle</td>
<td width="146" align="center" valign="middle">限定组合</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2015-02-13</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">SHAKE THAT BASS
</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1"><a target="_blank"
href="https://baike.baidu.com/item/%E5%88%98%E9%80%B8%E4%BA%91/3940021?fr=aladdin">刘逸云</a><i>（</i><i>Amber</i><i>）</i>
</td>
<td width="146" align="center" valign="middle">客串</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2016-07-09</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">Shut Up</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">Unnies</td>
<td width="146" align="center" valign="middle" colspan="1" rowspan="1">客串</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2017-07-12</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">Generation 2</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">王嘉尔</td>
<td width="146" align="center" valign="middle" colspan="1" rowspan="1">solo</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2017-08-26</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">Papillon（巴比龙）
</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">王嘉尔</td>
<td width="146" align="center" valign="middle" colspan="1" rowspan="1">solo</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2017-11-30</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">OKAY</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">王嘉尔</td>
<td width="146" align="center" valign="middle" colspan="1" rowspan="1">solo</td>
</tr>
<tr>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">2017-12-27</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">MOOD</td>
<td width="145" align="center" valign="middle" colspan="1" rowspan="1">王嘉尔 & 孟佳</td>
<td width="146" align="center" valign="middle" colspan="1" rowspan="1">合唱</td>
</tr>
</tbody>
</table>
</div>
<div class="img">
<span class="title_xq"> 杂志写真</span>
<div class="main_zz">
<img width="166" height="200" src="images/zz_1.jpg" alt="">
<img width="166" height="200" src="images/zz_2.jpg" alt="">
<img width="166" height="200" src="images/zz_3.jpg" alt="">
</div>
<div class="sss">
<span>2018春夏刊 第六位登上glass封面的中国明星</span>
<span>men's uno(香港版) 2018年1月 封面</span>
<span>Easy音乐世界 2017年12月下刊 封面</span>
</div>
</div>
</div>
</div>
css code
.info{
width: 1100px;
height: 800px;
border: 1px solid red;
margin: 0 auto;
}
.aleft,.aright{
float: left;
width: 400px;
height: 700px;
border: 1px solid #eee;
margin:10px;
}
.aright{
width: 600px;
}
.aleft span{
width: 90%;
height: 30px;
font-size: 14px;
text-align: center;
display: inline-block;
}
.aboutme{
border-bottom: 1px solid #B2DFEE;
margin: 10px;
line-height: 30px;
font-weight: bold;
font-size: 20px;
color: #7171C6;
height: 40px;
}
.aleft img{
margin: 10px 40px;
}
.abo,.img{
width: 580px;
height: 320px;
border: 1px solid #ddd;
margin: 10px;
}
.title_xq{
width: 100%;
height: 40px;
color: #fff;
line-height: 40px;
display: inline-block;
background-color: #7171C6;
}
table th,table td {
padding: 2px 10px;
font-size: 12px;
line-height: 22px;
height: 22px;
border: 1px solid #e6e6e6;
}
.main_zz img{
margin:10px;
}
.sss span{
display: inline-block;
float: left;
width: 180px;
margin-left: 5px;
font-size: 12px;
text-align: center;
color: #999;
}
2.3 Growth experience
The relative feature of this part is that it supports video playback, which is also a media playback often encountered on web pages. The specific code is as follows:
Html:
<div class="by_banner">
<div class="title_img_li">
<div class="title_li"> 经历总览</div>
<div class="title_img"></div>
<div class="ul_li">
<ul class="title_ulli">
<li>早年经历</li>
<li class="li_active">演艺经历</li>
<li>个人生活</li>
<li>主要作品</li>
<li>主持节目</li>
</ul>
<ul class="text_ulli">
<li>—JYP公司宣布7人男子组合GOT7出道的消息<span class="f_right">【2014年1月1日】</span></li>
<li>—出演的青春校园魔幻网络剧《Dream Knight》首播<span class="f_right">【2015年1月27日】</span></li>
<li>—随GOT7发行组合第五张专辑《FLIGHT LOG: DEPARTURE》<span class="f_right">【2016年3月21日】</span></li>
<li>—获得新浪微博之夜年度人气艺人奖<span class="f_right">【2017年1月16日】</span></li>
<li>—受邀参加腾讯视频烎潮音发布会<span class="f_right">【2018年1月14日】</span></li>
<li>—与ICE共同创作并演唱的歌曲《Red》上线<span class="f_right">【2019年1月14日】</span></li>
</ul>
</div>
</div>
<div class="title_img_li gg">
<div class="title_li"> 视频特区</div>
<div class=" w_gg">
<video src="images/王嘉尔 - Dawn of us.mp4" controls="controls" width="100%" height="320"></video>
</div>
<div class=" w_gg">
<video src="images/王嘉尔 - Oxygen 完整版.mp4" controls="controls" width="100%" height="320"></video>
</div>
</div>
</div>
</div>
CSS:
.title_li{
width:100%;
height:40px;
background-color:#F17D70;
color: azure;
line-height: 40px;
font-weight: bold;
}
.title_img_li{
width:95%;
height: 470px;
margin:20px auto;
border: 1px solid #eee;
}
.gg{
height:470px;
}
.title_img{
width:315px;
height: 390px;
margin:20px;
background-image: url(images/text.jpg);
background-repeat: repeat-y;
background-size: 100% 100%;
float: left;
}
.ul_li{
width:700px;
height:390px;
margin:20px;
border: 1px solid #ddd;
float: left;
}
.title_ulli{
width:700px;
height: 40px;
background-color: #EEEEEE;
list-style: none;
padding:0;
margin:0;
}
.title_ulli li{
color: #111 !important;
width:140px;
height:40px;
line-height: 40px;
text-align: center;
}
.w_gg{
width:480px;
height:410px;
margin:10px 40px;
float: left;
background-repeat: repeat-y;
background-size: 100% 100%;
}
.li_active{
background-color: #fff;
}
.text_ulli{
list-style: none;
}
.text_ulli li{
width:600px;
height:40px;text-align: left;
color:#666;
}
.f_right{
float: right;
}
.embed{
margin:5px 20px;
}
2.4 Friends
This page has a new animation effect, which is slowly displayed.
Html
<div class="by_banner">
<div class="part1">
<h2> 挚友-综艺领门者</h2>
<div class="loadshow" style="display:none">
<img width="240" height="240" src="images/py_1.jpg" alt="">
<div class="text_hej">
<h3>何 炅</h3>
<p>王嘉尔说，何炅是他的领路人。对待何炅的感情就像亲哥哥一样。他还说：“希望自己成为一个品牌。这个品牌就代表，活一次，就要无悔地追求自己想做的东西。”20岁出头的王嘉尔，比我们想象中的更有担当更成熟。</p>
<p>综艺节目也为王嘉尔打开了中国娱乐市场的大门，他出现在《拜托了冰箱》里，跟何炅搭档主持，一炮而红。 何炅后来评价他：“真是捡到了宝。”</p>
<p>说到综艺，人们会想到王嘉尔叫何炅、井柏然、王凯“哥哥”时的模样。有人说，别人叫哥哥，好像是后辈对前辈的尊称，在王嘉尔这里，“哥哥”两个字被赋予了“我想跟你亲近”的真诚。</p>
</div>
</div>
</div>
<div class="part1 part2">
<h2> 神搭档-综艺碰撞爆棚者</h2>
<div class="loadshow" style="display:none">
<div class="text_hej">
<h3>萧 敬 腾</h3>
<p>王嘉尔和萧敬腾，一个是阳光帅气的大男孩王嘉尔，一个是有着“雨神”之称的萧敬腾，一个是香港的，一个是台湾的，那他们遇到一起会发生什么呢，这两个地方的生活方式和说话的方式，应该都是不一样的吧，而且语言也是不一样的，他们两个遇到一起，交流的方式都很有趣，怎么说呢，这两个地区人的普通话都是不怎么好的，别说是成语了。</p>
<p>当年他们两个人一起参加节目，也在一起交流成语，成语的话，对于他们两个让你来说，是不是一件非常困难的事呢，这个可是考验到他们了，在节目中需要寻找线索，已经把线索确定为了一个成语，如果是成语的话，萧敬腾就要投降了，这个可能不在他能理解的范围了</p>
<p>一个萧敬腾就算了，还加上一个王嘉尔，他们是不是就是来搞笑的啊，一个简简单单的找线索，都要变成一个港台交流会了，对于他们来说，成语就是一个大的考验，他们平时说话，看来都是不怎么用成语的，一遇到成语的事，就感觉是在暴露了自己的一个缺点一样的，这可不是什么好事啊，要悠着点哦</p>
</div>
<img width="240" height="340" src="images/py_2.jpg" alt="">
</div>
</div>
</div>
Css
.part1 {
width: 90%;
height: 350px;
margin: 20px 40px;
border: 1px solid #8EE5EE;
background-color: #fefefe;
}
.part1 h2 {
height: 50px;
color: #fff;
line-height: 50px;
width: 100%;
background-color: #8EE5EE;
margin: 0;
}
.part2 {
height: 450px;
}
.loadshow img {
float: left;
margin: 20px;
}
.text_hej {
width: 700px;
height: 240px;
margin: 20px;
float: left;
}
.text_hej p {
color: #666;
}
2.5 Hobbies
Add a click-to-expand effect, which uses a jquery component and the slideDown function to set the effect. The specific implementation code is as follows:
Html
<div class="by_banner">
<div class="part1">
<h2> 击剑王者</h2>
<div class="loadshow">
<p>王嘉尔虽然说自己现在年纪大了，都有人开始叫自己哥哥了。但是25岁的他其实是一个十分优秀的人，爸爸是一个击剑教练，从小就对击剑很感兴趣，自己也曾是一名击剑运动员</p>
<img width="800" height="461" src="images/ah_1.jpg" alt="">
<h3> 荣获荣誉 <span>点击查看 </span></h3>
<div class="hor" style="display:none">
<p> 2011-03 亚洲青少年击剑锦赛少年组男子佩剑个人金牌[86] （获奖）</p>
<p> 2011-03 亚洲青少年击剑锦赛少年组男子佩剑团体金牌[86] （获奖）</p>
<p> 2011-03 亚洲青少年击剑锦赛青年组男子佩剑团体银牌[86] （获奖）</p>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".loadshow h3").click(function () {
$(".hor").slideDown("slow");
});
})
</script>
Css
.part1 {
width: 90%;
height: 650px;
margin: 20px 40px;
background-color: #fefefe;
}
.part1 h2 {
height: 50px;
line-height: 50px;
width: 100%;
border-left: 6px solid #00868B;
margin: 0;
}
.part2 {
height: 450px;
}
.loadshow img {
float: left;
margin: 20px 140px;
}
.loadshow p {
width: 90%;
margin-left: 2%;
}
.part1 h3 {
margin-top: 530px;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #E6E6FA;
cursor: pointer;
}
.part1 h3 span {
float: right;
font-size: 18px;
color: blue;
}
.hor {
background-color: #D1EEEE;
}
3. Source code sharing
In fact, this is the source code I wrote when I was a student. I hope everyone can be inspired. Of course, the main purpose is to bring you an idea for making web pages through this article, rather than just copy and paste. Of course, there must be readers who want the source code. I have shared the source code of all pages in my official account. I hope everyone can
A. Follow the WeChat official account "IT Huang Dada》
B. Reply to “Celebrity Wang Jiaer” Then
C. Downloadthe complete source code package.
I hope that in the new year I can learn with you, grow together, and make progress together, and strive to become rich as soon as possible. Thank you for your attention in the most beautiful time! ! !
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟