HTML example web page code, this example is suitable for students who are beginners in HTML. In this example, there are css style settings and div style patterns. This example is more comprehensive and helpful for students to learn. This article will introduce how to practice design by designing a personal website from scratch and converting it into code .
Article Directory
1. Web page introduction
1 Web page introduction : This work is the theme of student personal homepage web design, HTML+CSS layout production, web front-end final assignment, college student web design homework source code, this is a good web page production, the picture is smart, the code is simple student level, very Suitable for beginners to learn to use.
2. Webpage editing : The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other arbitrary HTML editing software to run, modify and edit, etc.).
3. Knowledge application : In terms of technology, it mainly applies web page knowledge: Div+CSS, mouse over effects, Table, navigation bar effects, Banner, forms, secondary and tertiary pages, etc., video, audio elements, Flash, and design at the same time Knowledge points required for the Logo (source file).
1. Web page effect
2. Code display
1.HTML code
The code is as follows (example): The following only shows part of the code for reference~
<!-- 搜索框下方搜索标签开始 -->
<div class="search_tag">
<a href="">咱们结婚吧</a>
<a href="">特种兵3</a>
<a href="">爸爸去哪儿了</a>
<a href="">斗仙内测</a>
<a href="" class="link link2">点播帮</a>
<a href="" class="link">看看重庆</a>
</div>
<!-- 搜索框下方搜索标签结束 -->
<!-- 用户内容区域开始 -->
<div class="userarea">
<!-- 右侧开始 -->
<div class="user_r">
<b class="left"></b>
下载迅雷
<b class="right"></b>
<!-- 右侧隐藏盒子 -->
<div class="hidden_r">
<p class="arrow_r"></p>
<dl>
<dt>迅雷 7.9.13.4664Preview</dt>
<dd><a href="">本地下载</a></dd>
<dd>|</dd>
<dd><a href="">游戏版下载</a></dd>
</dl>
<dl>
<dt>迅雷看看播放器4.9.12.1909</dt>
<dd><a href="">本地下载</a></dd>
<dd>|</dd>
<dd><a href="">360安全版下载</a></dd>
</dl>
<dl>
<dt>迅雷看看移动客户端</dt>
<dd><a href="">iPad版</a></dd>
<dd>|</dd>
<dd><a href="">iPhone版</a></dd>
<dd>|</dd>
<dd><a href="">Android版</a> </dd>
</dl>
<dl class="download">
<dt>迅雷其他</dt>
<dd>
<a href="">迅雷VIP尊享版</a>
<span>|</span>
<a href="">Mac迅雷</a>
</dd>
<dd>
<a href="">迅雷手机助手</a>
<span>|</span>
<a href="">迅雷网游加速器</a>
</dd>
<dd>
<a href="">迅雷游戏盒子</a>
<span>|</span>
<a href="">手雷</a>
<span>|</span>
<a href="">看看联盟</a>
</dd>
</dl>
<div class="hidden_b">
<a href="">更多迅雷产品下载</a>
</div>
</div>
<!-- 右侧隐藏盒子结束 -->
</div>
<!-- 右侧结束 -->
<!-- 中间开始 -->
<div class="user_m">
<b class="left"></b>
我看过的
<b class="right"></b>
<!-- 中间隐藏盒子开始 -->
<div class="hidden_m">
<!-- 隐藏盒子头部 -->
<div class="hidden_m_top">
<span class="update">
影片更新
</span>
<span class="history">
观看记录
</span>
</div>
<!-- 隐藏盒子头部结束 -->
<!-- 隐藏盒子中间部分 -->
<div class="hidden_m_m">
</div>
<!-- 隐藏盒子中间部分结束 -->
<!-- 隐藏盒子底部 -->
<div class="hidden_m_b">
<a href="">更新管理</a>
</div>
<!-- 隐藏盒子底部结束 -->
<!-- tab切换观看记录 -->
<div class="history_box">
<p>您没有观看记录</p>
<dl>
<dt>不妨看看:</dt>
<dd>
<a href="">
《咱们结婚吧》女神嫁给国民老公
</a>
</dd>
<dd>
<a href="">
《我是特种兵之火凤凰》解放军版赤裸特
</a>
</dd>
<dd>
<a href="">
《千金归来》励志女神逆袭蜕变
</a>
</dd>
</dl>
</div>
<!-- tab切换观看记录结束 -->
<!-- 箭头 -->
<p class="arrow"></p>
<!-- 箭头结束 -->
</div>
<!-- 中间隐藏盒子结束 -->
</div>
<!-- 中间结束 -->
<div class="user_l">
<b></b>
<a href="">登陆</a>
<a href="">注册</a>
</div>
</div>
<!-- 用户内容区域结束 -->
</div>
<!-- 头部结束 -->
<!-- 导航栏开始 -->
<div id="nav">
<div class="nav_box">
<!-- 导航栏左侧开始 -->
<ul class="navarea_l">
<li class="navarea_one"><a href="">首页</a></li>
<li><a href="">电影</a></li>
<li><a href="">电视剧</a></li>
<li><a href="">综艺</a></li>
<li><a href="">动漫</a></li>
<li><a href="">游戏</a></li>
<li><a href="">音乐</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">纪录片</a></li>
<li><a href="">公开课</a></li>
<li><a href="">视频快报</a></li>
</ul>
<span class="new"></span>
<!-- 导航栏左侧结束 -->
<!-- 导航栏右边开始 -->
<ul class="navarea_r">
<li><a href="">电影院</a></li>
<li><a href="">3D影院</a></li>
<li><a href="">108OP影院</a></li>
<li><a href="">观影团</a></li>
</ul>
<!-- 导航栏右边结束 -->
</div>
</div>
<!-- 导航栏结束 -->
<!-- 轮换版开始 -->
<div id="focus_background">
<!-- 轮换版中间大盒子 -->
<div id="focus_box">
<!-- 轮换版小焦点图开始 -->
<ul class="smal_pic">
<li>
<a href="">
<img src="images/m_1.jpg" alt="" backImg="images/1.jpg" backColor="#704F84"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_2.jpg" alt="" backImg="images/2.jpg" backColor="#7C592A"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_3.jpg" alt="" backImg="images/3.jpg" backColor="#000000"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_4.jpg" alt="" backImg="images/4.jpg" backColor="#6F741E"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_5.jpg" alt="" backImg="images/5.jpg" backColor="#000000"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_6.jpg" alt="" backImg="images/6.jpg" backColor="#DDDCDC"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_7.jpg" alt="" backImg="images/7.jpg" backColor="#090E11"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_8.jpg" alt="" backImg="images/8.jpg" backColor="#000000"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_9.jpg" alt="" backImg="images/9.jpg" backColor="#030200"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_10.jpg" alt="" backImg="images/10.jpg" backColor="#000000"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_11.jpg" alt="" backImg="images/11.jpg" backColor="#01081B"/>
</a>
</li>
<li>
<a href="">
<img src="images/m_12.jpg" alt="" backImg="images/12.jpg" backColor="#E7E5EA"/>
</a>
</li>
</ul>
<!-- 轮换版小焦点图结束 -->
<!-- 播放图片按钮开始 -->
<span class="ico"></span>
<!-- 播放图片按钮结束 -->
<!-- 标题开始 -->
<div class="focus_title">
<a href="" style="display:block">《最美的时光》致那些被时光掩埋的虐爱(更新至01集)
</a>
<a href="">
《咱们结婚吧》女神戳中直男心 酿制鸳鸯戏水式浪漫(更新至22集)
</a>
<a href="">
《饥饿游戏2》最年轻奥斯卡影后大逃杀再度袭来
</a>
<a href="">
《闺中密友》杜若溪遭遇腹黑闺蜜小三(更新至09集)</a>
<a href="">
《青红》高圆圆19岁青涩初恋 旧时代强权下破碎爱情
</a>
<a href="">
枪神纪今日不删档测试
</a>
<a href="">
汪苏泷最新单曲《桃园》同名网游今日公测
</a>
<a href="">
西游降魔改编 还你西游真相
</a>
<a href="">
《闯天下》印小天变身杂技高手(更新至24集)
</a>
<a href="">
《决战燕子门》杜奕衡上演英雄救美(大结局42集全)
</a>
<a href="">
《负二代》负二代苦追女神纯情“献身”
</a>
<a href="">
《如果.爱》金城武、周迅吻出十年情
</a>
</div>
<!-- 标题结束 -->
2. CSS code
body{
background: #FBFBFB;
}
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
font-size: 12px;
}
li{
list-style-type:none;
}
input,img{
border:none;
}
em{
font-style: normal;
font-size: 12px;
}
/*头部开始*/
#header{
position: relative;
width:1200px;
height:102px;
margin: 0 auto;
z-index: 999;
}
/*logo开始*/
#header .logo a{
position: absolute;
top:28px;
left:2px;
display: block;
width:163px;
height:47px;
background: url(../images/headernav_0917.png) 0 -41px no-repeat;
}
/*logo结æŸ*/
/*flash开始*/
#header .flash_pic{
position: absolute;
left:165px;
top:7px;
width:130px;
height:80px;
}
/*flash结æŸ*/
/*æœç´¢æ¡†å¼€å§‹*/
.search{
position: absolute;
left:414px;
top:24px;
width:357px;
height:40px;
background: url(../images/headernav_0917.png) 0 0 no-repeat;
}
3. Personal summary
A set of qualified web pages should include (specifically, it can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer;
- All pages are hyperlinked to each other, and you can go to the third-level page, which consists of 5-10 pages;
- The unified layout of the page style is normal, not messy, using Div+Css technology;
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally;
- There must be JS special effects, such as timing switching and manual switching of picture news;
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology;
- The page is clean, beautiful, generous, and not the same.
- The front-end program of the website must not only be able to present the content required by the user, but also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
Four, wonderful recommendation
1. If you see this, please support me 【关注点赞收藏博文】three times. Your support is the driving force for my creation 【关注作者 |获取更多源码| 优质文章】 .
2. Follow me and take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, and whole site templates, college graduate graduation HTML templates, final assignment templates, etc.! "There are many front-end developers here, let's join together Discuss front-end Node knowledge and learn from each other!"
3. The above content and technology-related issues can learn and communicate with each other