588.大学生HTML期末大作业 —【我的家乡湛江旅游主题精品网页(7页)】 Web前端网页制作 html+css

目录

一、网页简介

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强


欢迎来到我的CSDN主页!您的支持是我创作的动力!Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等,有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅:全网最全的的网页案例集合,5000+套网页完整代码,主题涵盖40+种类型,网页案例持续更新中,需要的文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客


一、网页简介

本实例应用html5+css3,div+css布局,代码精简,适用于大学生网页课程作业设计;本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改;支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。


二、网页文件

本网页共包含7个页面:


三、网页效果

以下是本篇文章正文内容,下面案例仅供参考(节选示例):


四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css.css">
<title>湛江</title>
</head>
<body>
<div class="head2"><a href="index.html">网站首页</a> <a href="lishi.html">市名由来</a> <a href="lvyou.html">旅游景点</a> <a href="meishi.html">餐饮美食</a> <a href="dili.html">地理环境</a> <a href="shipin.html">视频介绍</a> <a href="liuyan.html">留言</a>
  <div class="clear"></div>
</div>
<div class="home">
  <div class="img">
    <h1>广东湛江</h1>
    <div class="name">
      <p>湛江,广东省地级市,旧称“广州湾”,别称“港城”,位于中国大陆南端、广东省西南部,介于东经109°31′~110°55′,北纬20°12′~21°35′之间,总面积13225.44平方公里。 [1-2]  湛江属于热带北缘季风气候,终年受海洋气候的调节,冬无严寒,夏无酷暑,亚热带作物及海产资源丰富。 [3]  截至2019年,湛江市下辖4个市辖区、2个县,代管3个县级市,市政府驻赤坎区, [4]  2019年湛江常住人口736万人,城镇常住人口323.55万人,城镇化率43.96%。</p>
    </div>
    <div class="menu"></div>
  </div>
</div>
<img src="img/1.jpg" width="100%">
<div class="foot">网页底部</div>
</body>
</html>

...

2.CSS

代码如下(节选示例):

ul,li {
    list-style:none;
    padding:0
}
body {
    width:1200px;
    margin:0 auto;
    position:relative;
    min-height:100%;
    line-height:35px;
}
.img a {
    margin:8px 3px;
    display:inline-block;
    border:#fff solid 1px;
    border-radius:100px;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    text-decoration:none;
    color:#fff;
    font-size:20px
}

.img {
    position:relative;
    margin:0 auto;
    text-align:center;
    color:#fff
}
.img h1 {
    font-size:48px
}
.name {
    color:#fff
}
.home {
    position:absolute;
    top:50%;
    margin-top:-170px;
    height:330px;
    width:550px;
    background:rgba(26,94,84,0.6);
    padding:20px;
    margin-left:-275px;
    left:50%;
    
    z-index:5
}

.head2 {
    background:#336666;
    text-align:center
}
.head2 a {
    margin:8px 5px;
    display:inline-block;
    
    width:120px;
    height:100px;
    line-height:100px;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,0.2);
    font-weight:bold;
    font-size:20px
}
.tc {
    text-align:center;
    background:#000
}
.msg {
    width:500px;
    margin:0 auto;
    padding:20px
}
.ip {
    width:400px
}
.bar {
    text-align:center;
    font-size:24px
}

...


五、总结

设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;

2.使用方便

要满足使用者的要求,网页适合使用,显示出其功能美;

3.整体性好

围绕一个统一的目标设计,强调整体的功能性; 

4.形象突出

尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。

5.交互式强

发挥网络的优势,想方设法使每个使用者都参与到其中来。


更多优质博客文章、完整代码案例模板,点击以下链接查阅:

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等,有需要的添加以下微信交流👇🏻👇🏻👇🏻


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值