《web应用基础》课程结业报告

Sonw44

于 2023-07-01 21:40:46 发布

阅读量80

点赞数

文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/weixin_64179065/article/details/131494382

版权

该文介绍了使用HTML、CSS和JavaScript构建的静态网页项目，主要内容为足球俱乐部的介绍，包括球员信息和联系方式。在开发过程中，作者解决了图片大小不一、动态效果实现等问题，使用了背景设置和OwlCarousel库实现图片轮播。同时，利用fontawesome图标增强了页面视觉效果，但还存在图片放大失真、内容单一和响应式设计不熟练等挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 项目简介

这是一个利用html，css，JavaScript制作的web静态网页，主要内容是关于俱乐部球队简单介绍，包括球员照片，球队简介，联系方式等等。

2. 开发过程

首先学习了html，css，JavaScript的一些相关基础知识
确定网站主题为足球俱乐部
查询相关资料及图片
搭建网站整体框架，如导航栏以及页面布局等
编写各部分具体内容
修改样式以达到预期效果

3. 遇到的问题

1、图片大小不一，显示在页面上时参差不齐，严重影响页面美观。

解决方案：通过设置div容器大小限制图片显示大小，通过背景设置的cover方法使图片填充容器，这里本人通过网络资源找到套图，编辑图片格式，使图片达到预期效果

部分代码展示：

 .item player{
        background-image:url("背景图.jpg");
        background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
    }

<div class="item player">
<a href="#"><img src="images/player_4.jpg" alt="Image" class="img-fluid"></a>
 <div class="p-4">
 <h3>托马斯·穆勒</h3>
  <p>25号/影子前锋</p>
  </div>
 </div>
 <div class="item player">
 <a href="#"><img src="images/player_1.jpg" alt="Image" class="img-fluid"></a>
 <div class="p-4"> 
 <h3>诺伊尔</h3>
 <p>1号/门将</p>
 </div>

显示效果：

2、为了提高浏览体验，需要设置一些动态显示效果（比如轮播切换图片），在这个过程中遇到了一些困难。

解决方案：通过棋哥网站查阅官方资料以及其它网络资源，学习到通过数组、计时器等功能实现图片的自动切换

部分代码展示：

if ( $('.owl-4-slider').length > 0 ) {
			var $owl4 = $('.owl-4-slider').owlCarousel({
		    loop: true,
		    autoHeight: true,
		    margin: 0,
		    autoplay: true,
		    smartSpeed: 1200,
		    items: 4,
		    nav: false,
		    navText: ['<span class="icon-keyboard_backspace"></span>','<span class="icon-keyboard_backspace"></span>'],
		    responsive:{
	        0:{
	            items:1
	        },
	        600:{
	            items:3
	        },
	        1000:{
	            items:4
	        }
	    	},
	    	onInitialized: reInitAgain
			});

3、图标的显示

解决方案：关于图标，通过查阅资料，我使用了fontawesome中文网的图标，学习了解了它们的使用并运用与网站中。

  <h3>互联网公众号</h3>
              <ul class="list-unstyled social">
                <li><a href="#"><span class="mr-2 icon-facebook"></span> Facebook</a></li>
                <li><a href="#"><span class="mr-2 icon-twitter"></span> Twitter</a></li>
                <li><a href="#"><span class="mr-2 icon-instagram"></span> Instagram</a></li>
                <li><a href="#"><span class="mr-2 icon-linkedin"></span> Linkedin</a></li>
                <li><a href="#"><span class="mr-2 icon-play"></span> Youtube</a></li>
              </ul>

效果展示：