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

发布时间：2024年01月11日

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

? 【作者主页——🔥获取更多优质源码】

? 【学习资料/简历模板/面试资料/ 网站设计与制作】

? 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

一、网页介绍📖

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;}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “??评论” “💙收藏” 一键三连哦！

2.??【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

文章来源:https://blog.csdn.net/html_wangye/article/details/126170669
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章