WEB前端技术基础--篮球专卖

2024-03-22 11:30

本文主要是介绍WEB前端技术基础--篮球专卖,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、实验目的

掌握背景图 ,闭合浮动,固定定位,绝对定位,相对定位,伪元素。

二、实验内容

1.实验区域

2.功能描述

使用img插入图片,使图片有序排列,其中使用了一个相对定位来将一个篮球图片放在粉色篮球的左下角,这是一个篮球购物界面;

3.html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>篮球专卖</title><link type="text/css" rel="stylesheet" href="css/basketball.css" /><style>#backgrond{background-color: paleturquoise;height: 2000px;text-align: center;}</style></head><body><div id="backgrond"><div class="header"><div class="biaoti fl"><img src="img/标题.png" /></div><div class="dianming fl"><img src="img/biaoti1.png" /></div><div class="wenzi fl"><h1>欢迎来到篮球的世界!</h></div></div><div class="display"><div class="fudong"><img src="img/fudong.jpg" /></div><div class="dispalys fl"><img src="img/篮球2副本.jpg" /></div><div class="dispalys fl"><img src="img/篮球3副本.jpg" /></div><div class="dispalys fl"><img src="img/篮球4副本.jpg" /></div><div class="dispalys fl"><img src="img/篮球5副本.jpg" /></div></div><div><h3>篮球专区</h3></div><div><img src="img/lanqiu1.png" /><img src="img/lanqiu2.png" /><img src="img/lanqiu3.png" /></div><div><img src="img/lanqiu4.png" /><img src="img/lanqiu5.png" /><img src="img/lanqiu6.png" /></div>	<div><p class="pp">如果有你喜欢篮球的话,就请选择并且购买吧!</p><p>  篮球,英文(basketball),起源于美国马萨诸塞州,是1891年12月21日由詹姆士·奈史密斯创造,是奥运会核心比赛项目,是以手为中心的身体对抗性体育运动。1891年12月21日,由美国马萨诸塞州斯普林菲尔德基督教青年会训练学校(现译名为美国春田大学,Springfield College)体育教师詹姆士·奈史密斯发明。1896年,篮球运动传入中国,并且2002年姚明以状元的身份入选NBA,开启了中国篮球新的狂潮。1904年,圣路易斯奥运会上第1次进行了篮球表演赛。1936年,篮球在柏林奥运会中被列为正式比赛项目。1992年,巴塞罗那奥运会开始,职业选手可以参加奥运会篮球比赛。主要的国际性篮球组织是成立于1932年总部设在瑞士日内瓦的国际篮球联合会(国际业余篮球联合会)。当今世界篮球水平最高的联赛是美国篮球职业联盟(NBA)比赛。代表中国的水平最高的联赛是中国职业篮球联赛(CBA)比赛。</p></div></div></body>
</html>

4.css描述

     *{margin: 0;padding: 0;
}
.header{width: 1000px;height: 60px;margin: 0 auto;
}
.fl{float: left;
}
.fr{float: right;
}
.biaoti{margin-top: 10px;margin-right: 50px;
}
.wenzi{margin-left:100px ;color: red;
}
.display{width: 1000px;height: 300px;margin: 0 auto;
}
.dispalys{text-align: center;margin-left: 30px;
}
h3{text-align: center;font-size: 50px;font-size: italic;color: blue;
}
.pp{font-size: 60px;border: 1px solid red;background-color: rosybrown;
}
.fudong{margin: 0 auto;position: relative;top: 225px;right: 475px;
}  

三、实验总结

1.实验过程中遇到的问题及解决办法

   遇到的问题

1)图片的位置摆放位置不是在同一水平面上;

2)相对定位的位置不是很合理;

3)图片都合在一起;

   解决办法

1)使用float;

2)经过多次调整测试;

3)使用间距来使之间有一定间隔;

2.本次实验过程总结

    在这次实验中,学会使用了div和img,虽然刚开始不是很熟悉,但是进行多次尝试以及对图像的调整之后,会对div和img有一个清晰的认识,对于调整间距以及浮动有一定的熟悉,要想熟悉一个东西,就需要经常编写已达到熟悉的地步,不像C++那样需要逻辑,可以在CSS中对样式进行调整,使整个代码看起来很舒服,可以让人一看就懂。

这篇关于WEB前端技术基础--篮球专卖的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/835211

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

Qt如何实现文本编辑器光标高亮技术

《Qt如何实现文本编辑器光标高亮技术》这篇文章主要为大家详细介绍了Qt如何实现文本编辑器光标高亮技术,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录实现代码函数作用概述代码详解 + 注释使用 QTextEdit 的高亮技术(重点)总结用到的关键技术点应用场景举例示例优化建议

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled