HTML网页制作——简单家乡风景静态HTML网页设计作品 web网页制作与实现

码农世界 2024-05-30 前端 100 次浏览 0个评论

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

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

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

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

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈

1.HTML结构代码 🧱
2.CSS样式代码 🏠
三、个人总结😊

四、更多干货🚀

一、网页介绍📖

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

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

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

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

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

丰都县名山风景旅游区

返回上一层

丰都县名山风景旅游区

丰都名山景区内鬼城仿阳间司法体系，营造了一个等级森严，融逮捕、羁押、庭审、判决、教化功能为一体的“阴曹地府”，以惩治生前作奸犯科者，遂使海内外善男信女们进山朝拜，或祈求神灵庇佑，或自我反省忏悔。虽阎王判官小鬼之传说虚妄，但其惩恶扬善的社会教化功用又为人们所称道。

查看详情

望
乡
台

动车

全程约1小时30分钟

重庆北站北广场
丰都火车站
乘坐201、202、203路公交车
新县城
乘坐109路公交车
名山风景旅游区

客车

全程约2小时

重庆四公里交通枢纽
丰都新县城
乘坐109路公交车
名山风景旅游区

2.CSS样式代码 🏠

/* CSS Document */
*{
    margin: auto;
    padding: 0;
	}
ul,li,ol{
    list-style: none;
	}
img{
    border:none;
	}
a{
    color:inherit;
    text-decoration:none;
	}
a:hover{
    color:inherit;
    text-decoration:none;
	cursor:pointer;
	}
.clears{
    clear: both;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
	}
body{
    font-family: Arial,Verdana,"Microsoft Yahei","Pingfang SC","Simsun";
    font-size: 14px;
    color: #333;
	height:600px;
	}
/*.section{*/
    /*width: 1200px;*/
/*}*/
.f_left{
    float:left;
	}
.f_right{
    float:right;
	}
.f_clear{
    clear:both;              /*清除浮动*/
	}
/*头部*/
header{
    width: 1200px;
    height: 90px;
    overflow:hidden;
    background-color: #fff;
	}
.logo{
    margin: 16px 19px;
	}
.company_name{
	margin-left:16px; 
	font-size: 26px;
	color:#b10501;
	line-height:90px;
	}
.welcome{
	line-height:90px;
	font-size:16px;
	color:#adadad;
	margin-right:8px;
	}
/*导航*/
.nav{
    width: 100%;
    height: 60px;
    background: #b10501;
    font-size: 18px;
	position:relative;
	z-index:9999;	
	}
.section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
	}
.nav_section{
    height: 60px;
	}
/*一级导航，相对定位 盖*/
.nav_ul>li{
    float: left;
    line-height: 60px;
    position: relative;
	}
.nav_ul>li>a{
    color: #fff;
    display: block;
    padding-left: 28.5px;
    padding-right: 28.5px;
    transition: all 0.2s; 
	}
.nav_ul>li>a:hover,
.nav_ul>li:hover>a{
    background: #ff9c00;
    text-decoration: none;
	}
/*二级导航，绝对定位 管*/
.submenu{
    position: absolute;  
    width: 130px;
    background: #b10501;
    font-size: 16px;
    line-height: 40px;
    top: 60px;  
    left: 50% ;  
    margin-left: -65px;  
    display: none; 
	}
.submenu a{
    color: #fff;
    display: block;
    text-align: center;
    transition: all 0.2s;  
	}
.submenu a:hover{
    color: #fff;
	text-decoration:underline;
	}
.search{
    width: 267px;
    height: 36px;
    background: #fff;
    border-radius: 3px;
    margin-top: 12px;
	position:relative;
	}
.search>input{
    width: 225px;
    height: 30px;
    margin-top: 4px;
	border:0px;
	outline:0px;
	}
.search_bt{
    width: 22px;
    height: 23px;
	top:7px;
	right:13px;
    background: url("../image/search.png") ;
	position:absolute;
	}