基于HTML+CSS+JavaScript制作一个介绍自己家乡河池主题的网站，排版整洁，内容丰富，主题鲜明

IT芷君

于 2022-08-16 10:34:33 发布

阅读量399

点赞数

分类专栏： html网页设计文章标签： javascript html css 家乡网页介绍html 我的家乡网站制作html

本文链接：https://blog.csdn.net/VX_WJ88950106/article/details/126201298

版权

html网页设计专栏收录该内容

1837 篇文章 98 订阅

订阅专栏

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="main" >

<div  class="content12">
<div class="daohang">





<div class="img"><img src="images/1.jpg"></div>
 


<ul>
<li class="active"><a href="index.html">首页</a>
</li>
<li ><a href="dilihuanjing.html">地理环境</a></li>
<li ><a href="ziranziyuan.html">自然资源</a></li>
<li ><a href="jingji.html">经济</a></li>
<li ><a href="fengjingmingsheng.html">风景名胜</a></li>
<li ><a href="xuexiaoliebiao.html">学校列表</a></li>
<li ><a href="geiwoliuyan.html">给我留言</a></li>
 
</ul>





</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="jingji">


<div class="img">
<img src="images/2.jpg"></div>
 

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">






<div class="title">
        <div class="cntitle">
        	经济            <div class="line line_l">&nbsp;</div>
            <div class="line line_r">&nbsp;</div>
        </div>
        <p class="pytitle">JINGJI</p>
    </div>







	  	  </div>
<div class="jingji">


<div class="img">
<img src="images/2.jpg"></div>
 

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">






<div class="title">
        <div class="cntitle">
        	河池            <div class="line line_l">&nbsp;</div>
            <div class="line line_r">&nbsp;</div>
        </div>
        <p class="pytitle">HECHI</p>
    </div>







	  	  </div>
<div class="hc">

















<div class="desc">
<p>河池，简称“河”，是中华人民共和国广西壮族自治区地级市，地处广西西北边陲、云贵高原南麓，距离山水甲天下的桂林市314千米，境内地形多样，结构复杂，地势西北高东南低。地处低纬，属亚热带季风气候区，辖2区9县，总面积3.35万平方千米。2017年户籍人口429.87万人。</div>

<div class="list">
<img src="images/3.jpg" class="simg">
<img src="images/4.jpg" class="simg">
 
</div>


<div class="clear"></div>

<div class="desc">

</p><p>河池境内国家“五纵七横”国道主干线西南出海大通道穿境而过，是西南出海大通道的咽喉要塞，是“南贵昆经济区”、“泛珠三角经济圈”、和“东盟自由贸易区”人流、物流、资金流、信息流聚集交汇的枢纽。河池是广西实施西部大开发的重点区域。河池是一座以壮族为主的多民族聚居城市是广西壮族自治区少数民族聚居最多的地区之一。</div>


<div class="clear"></div>
<div class="img">
<img src="images/5.jpg">
</div>

 














</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">






<div class="title">
        <div class="cntitle">
        	给我留言            <div class="line line_l">&nbsp;</div>
            <div class="line line_r">&nbsp;</div>
        </div>
        <p class="pytitle">GEIWOLIUYAN</p>
    </div>







	  	  </div>
<div class="lybd">





<form id="form" class="form">




<div>

<input  type="input" name="input"  class="input"  id="ziduan1" value="呢称" />
</div>
<div class="clear"></div>













<div>

<input  type="input" name="input"  class="input"  id="ziduan2" value="电话" />
</div>
<div class="clear"></div>





















<div>
<input class="radio" type="radio" name="radio3" value="男"  checked />男<input class="radio" type="radio" name="radio3" value="女"   />女</div>
<div class="clear"></div>










<div>
<div class="title"></div>
<textarea    class="textarea" name="textarea" > 介绍</textarea>
</div>
<div class="clear"></div>







<button type="button"  class="submit" id="sub"   >提交</button>

 
</form>
</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="dibu">

<div class="desc">
河池 
</div>


</div>
</div>
<div class="clear"></div></div></body></html>

2.CSS样式代码 🏠


@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}

.content12{width:1200px;margin:0 auto;}


.daohang {
width:1200px;background:#CC9966;float:left;

}
.daohang .img{
width:226px;
float:left;

}

.daohang .img img{
width:200px;height:90px;
float:left;
}



.daohang ul{
width:934px;
background:#CC9966;float:left;
}

.daohang ul li{
float:left;
width:100px; 
text-align:center;
height:90px;line-height:90px;color:#fff;position: relative;
}


.daohang ul li a.active{
color:#fff;}
.daohang ul li a{
color:#fff;}
 
.daohang li:hover a{
color:#fff;}









.guanggaotupian
{
text-align:center;

}
.guanggaotupian img
{
width:1200px;

}





.taitou .title {
     text-align: center;
	 margin-left:10px;
margin-right:10px;
margin-bottom: 10px;
margin-top: 10px;
}

.taitou .cntitle {
      color:#f22222;

  border: 1px solid #f22222;


	display: inline-block;
    zoom: 1;
    width: 200px;
    height: 40px;
    line-height: 40px;
    top: 0px;
    z-index: 99;
    font-size: 24px;
    position: relative;
}
.taitou .pytitle {
    width: 100%;
    height: 33px;
    line-height: 33px;
    font-size: 16px;
    color: #8F9193;
}

.taitou i {
    height: 4px;
	margin: 10px auto;
    width: 55px;
	


	display: block;
}

.taitou .line {
width: 110px;
    height: 1px;
      background:#f22222;
    position: absolute;
    top: 20px;

}

.taitou .line_l {
    left: -110px;
}

.taitou .line_r {
    right: -110px;
}




.hc 
{
width:1200px;    text-align: justify;
	
}
.hc .text
{
padding:10px;
}

.hc  .img
{

text-align:center;
}



.hc  .desc
{
padding:10px;
text-align:left;
float:left;
text-align: justify;
}
.hc  .list
{
text-align:center;
}



.hc  .img
{
margin:10px auto;

}
.hc  img
{
height:450px;}


.hc  .simg
{
float:left;
width:570px;margin:10px;height:300px;
}








.lybd 
{
width:1200px;text-align:left;
margin:0 auto;

}

.lybd form
{
line-height:40px;border-bottom-color:#000000;border-bottom-style:dashed;border-bottom-width:0px;border-top-color:#000000;border-top-style:dashed;border-top-width:0px;border-left-color:#000000;border-left-style:dashed;border-left-width:0px;border-right-color:#000000;border-right-style:dashed;border-right-width:0px;
}
.lybd select{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;
}

.lybd checkbox,radio{
text-align:left;
margin:0px 10px;

overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;
}


.lybd input{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;

}


.lybd textarea{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;

}


.lybd .title
{
margin:0px 10px;
}
.lybd button{
margin:10px 0px  0px 10px;
text-align:center;
line-height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;
}

.lybd .form{
width:1168px;border-radius:25px;
padding:15px;
margin:0 auto;
}
.lybd .input{
width:1140px;margin-bottom:10px;
padding-left:10px;
color:#999999;
}
.lybd .checkbox{
width:auto;

}
.lybd .radio{
width:auto;
}
.lybd .select{
width:1150px;}
.lybd .textarea{
width:1150px;height:130px;
color:#999999;
}
.lybd .submit{
width:1150px;}



.dibu .desc
{

text-align:center;color:#ffffff;
background:#CC9966;padding:20px 0px;
margin-top:10px;
}

.dibu img
{


}



.dilihuanjingliebiao ul
{
width:1200px;}
.dilihuanjingliebiao ul li{
width:280px;
float:left;
padding:10px;
text-align:center;
}

.dilihuanjingliebiao ul li:hover{
}


.dilihuanjingliebiao ul li img
{
width:280px;height:200px;display:block;

}
.dilihuanjingliebiao ul li .text{

}
.dilihuanjingliebiao ul li .desc{
padding:10px 0px;
}
.dilihuanjingliebiao ul li .title{padding:10px 0px;

}





.ziranziyuanliebiao table
{
width:1180px;}



.ziranziyuanliebiao table .img
{
width:130px;height:200px;}
.ziranziyuanliebiao table .img img
{
width:120px;padding:5px;
height:190px;}

.ziranziyuanliebiao table   .title{margin:10px 0px;
font-weight:bold;
font-size:16px;
}
.ziranziyuanliebiao table   .desc
{
width:130px;text-align:left;padding:5px;
}








.jingjiliebiao ul
{
width:1200px;float:left;
}
.jingjiliebiao ul li
{
width:580px;
padding:10px;
float:left;
}
.jingjiliebiao ul li .img
{
width:280px;padding:0px  5px;
height:210px;float:left;
}
.jingjiliebiao ul li img
{
width:280px;height:210px;}

.jingjiliebiao ul li .desc
{
width:280px;height:200px;overflow:hidden;float:left;
text-align:left;
padding:5px;
}





.fengjingmingshengliebiao ul
{
width:1200px;float:left;
}
.fengjingmingshengliebiao ul li
{
width:580px;
padding:10px;
float:left;
}
.fengjingmingshengliebiao ul li .img
{
width:280px;padding:0px  5px;
height:210px;float:left;
}
.fengjingmingshengliebiao ul li img
{
width:280px;height:210px;}

.fengjingmingshengliebiao ul li .desc
{
width:280px;height:200px;overflow:hidden;float:left;
text-align:left;
padding:5px;
}





.xuexiaoliebiaoliebiao ul
{
width:1200px;float:left;
}
.xuexiaoliebiaoliebiao ul li
{
width:580px;
padding:10px;
float:left;
}
.xuexiaoliebiaoliebiao ul li .img
{
width:280px;padding:0px  5px;
height:210px;float:left;
}
.xuexiaoliebiaoliebiao ul li img
{
width:280px;height:210px;}

.xuexiaoliebiaoliebiao ul li .desc
{
width:280px;height:200px;overflow:hidden;float:left;
text-align:left;
padding:5px;
}





.liuyanbiaodan 
{
width:1200px;text-align:left;
margin:0 auto;

}

.liuyanbiaodan form
{
line-height:40px;border-bottom-color:#000000;border-bottom-style:dashed;border-bottom-width:0px;border-top-color:#000000;border-top-style:dashed;border-top-width:0px;border-left-color:#000000;border-left-style:dashed;border-left-width:0px;border-right-color:#000000;border-right-style:dashed;border-right-width:0px;
}
.liuyanbiaodan select{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;
}

.liuyanbiaodan checkbox,radio{
text-align:left;
margin:0px 10px;

overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;
}


.liuyanbiaodan input{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;

}


.liuyanbiaodan textarea{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;

}


.liuyanbiaodan .title
{
margin:0px 10px;
}
.liuyanbiaodan button{
margin:10px 0px  0px 10px;
text-align:center;
line-height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:dashed;border-bottom-width:1px;border-top-color:#999999;border-top-style:dashed;border-top-width:1px;border-left-color:#999999;border-left-style:dashed;border-left-width:1px;border-right-color:#999999;border-right-style:dashed;border-right-width:1px;
}

.liuyanbiaodan .form{
width:1168px;border-radius:25px;
padding:15px;
margin:0 auto;
}
.liuyanbiaodan .input{
width:1140px;margin-bottom:10px;
padding-left:10px;
color:#999999;
}
.liuyanbiaodan .checkbox{
width:auto;

}
.liuyanbiaodan .radio{
width:auto;
}
.liuyanbiaodan .select{
width:1150px;}
.liuyanbiaodan .textarea{
width:1150px;height:130px;
color:#999999;
}
.liuyanbiaodan .submit{
width:1150px;}