一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

二、作品效果

视频演示

https://live.csdn.net/v/embed/240766

(title-U19JP-老虎-7页)]

截图演示

三、 作品代码

隣HTML代码

 
  


  
  

  

    

      
在线留言

    

    

      

        姓名
        
      

      

        电话
        
      

      

        留言
        
      

      

        
        
      

    

  

  

    

      
新闻资讯

    

    

      

        
保护渐行渐远的森林之王

        
老虎攻击人后,为何一定得击毙?不能关起来吗?专家说的很有道理

        
老虎咬了我家狗,打死它算“正当防卫”吗?

        
野生老虎的双面性格,你知道吗?【虎王战记16】

        
万兽之王为何落此地步?科学家用卫星定位系统,保护老虎远离公路

        
保护东北虎的经济账怎么算?值不值得?

        
为什么要保护老虎?保护老虎意味着什么,会不会再产生虎患?

        
大摇大摆走在公路上,遇到老虎该如何保命?

        
为何大熊猫一千多个了还在保护东北虎濒临灭绝了还无人问津?

        
保护东北虎 保护这片森林3.0

      

    

  

  

  

    

      
老虎图片

    

    

      

        

          
老虎图片

        

        

          
老虎图片

        

        

          
老虎图片

        

        

          
老虎图片

        

      

    

  

CSS代码

/* CSS Document */
a {
 font-size: 14px;
 color: #333;
 text-decoration:none
}

a:hover {
 color:#FF9933
}

body {
 margin: 0 auto;
 padding: 0;
 background-color: #f5f5f5;
 width: 1000px;
 background-size: cover;
 color: #333;
 line-height: 30px
}

.clearfix:after {
 clear: both;
 content: '';
 display: block;
}

.head {
 background: rgba(255, 255, 255, .8);
 height: 104px;
 overflow: hidden
}

.head a {
 color: #3366CC;
 background: #FFFFFF;
 padding: 0 10px;
 border-radius: 10px
}

h1,
h2,
h3 {
 margin: 0;
 padding: 0
}

.head a {
 font-size: 19px;
 color: #333;
 margin: 35px 10px;
 display: inline-block;
 padding-left: 30px;
 box-sizing: border-box;
 background: url(../images/nav.png) no-repeat left;
 background-size: 30px auto;
}

.head a:hover{ color:#FF9966}

.fl {
 float: left
}

.fr {
 float: right
}

.head .fl {
 background: #fff;
}

.head .fl img {
    width: 180px;
    padding-top: 10px;
}

.bg000 {
 background: rgba(255, 255, 255, .8)
}

.bar {
 background:#FFCC33;
 color: #000;
 font-size:14px;
 padding:10px
}

.w40 {
 width: 40%;
}

.w60 {
 width: 60%
}

#jSearchHeroDiv li {
 margin: 0;
 padding: 0;
 list-style: none;
 display: inline-block;
 text-align: center;
 width: 200px;
 margin: 15px;
}

#jSearchHeroDiv img {
 width: 200px;
 height: 140px
}

.div2 .fr div {
 margin: 5px 5px;
 height: 332px
}

.div2 {
 float: left;
 margin-top: 20px;
 width: 480px;
}

.div4 {
 float: right;
 margin-top: 20px;
 width: 500px;
 
}
.swiper-container img{
 height: 500px;

}
.end {
 text-align: center;
 padding:10px 0;
 background:#FFCC33;
 margin-top:20px;

}

.con {
 padding: 20px
}

#latest_guide_list li:hover {

}

.title {
 color: #FF0033;
 text-align: center;
 padding: 20px 0;
 border-bottom: #333 dashed 1px;
 margin-bottom: 20px
}

.div1 img {
 float: left
}

.div7 {
 margin-top: 20px
}
.form{ float:left}
form {
 margin: 0;
 padding: 35px 0 0 50px;
 width: 488px;
}
.fr{ float:right; }
.rs{float:right;margin:40px 40px 0 50px}
.rs a{ display:inline-block; width:100px; font-size:24px; height:100px; background:#FFCC33; color:#000; padding:40px}
form label {
 display: block;
 margin: 0 0 20px;
 overflow: hidden;
 padding: 0;
}

form label span {
 color: #7d7c7c;
 display: block;
 font-size: 13px;
 float: left;
 height: 31px;
 margin: 0;
 padding: 5px 14px 0 0;
 text-align: right;
 text-transform: uppercase;
 width: 74px;
}

form label .inp {
 border: 1px solid #d6d6d6;
 background: #fff;
 color: #7d7c7c;
 display: block;
 float: left;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 height: 34px;
 line-height: 34px;
 margin: 0;
 padding: 0 5px;
 width: 388px;
}

form label textarea {
 border: 1px solid #d6d6d6;
 background: #fff;
 color: #7d7c7c;
 display: block;
 float: left;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 height: 205px;
 margin: 0;
 overflow: auto;
 padding: 5px;
 width: 388px;
}

form #submit2 {
 border: 0;
 background:#FFCC33;
 color:#000;
 display: block;
 height: 37px;
 margin: 0 0 0 88px;
 padding: 0;
 width: 101px;
}


.div2 form {
    margin: 0 auto;
 padding: 0 ; 
    width: 437px;
}
.div2 form label{
 margin: 0;
 padding: 0;
}
.div2 form input{
 width: 100%;
 height: 30px;
}
.div2 textarea{
 width: 100%;
 height: 100px;
}
.div2{
 padding-bottom: 35px;
}

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app