静态轮播图-html教程-PHP中文网

首页

web前端

html教程

静态轮播图

PHP中文网

Jul 14, 2017 pm 06:10 PM

静态

<span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html>
</span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml">
</span><span style="color: #008080"> 3</span> <span style="color: #800000"><head>
</span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</span><span style="color: #008080"> 5</span> <span style="color: #800000"><title></title>
</span><span style="color: #008080"> 6</span> <span style="color: #800000"><link href="css/demo.css" rel="stylesheet" />
</span><span style="color: #008080"> 7</span> <span style="color: #800000"></head>
</span><span style="color: #008080"> 8</span> <span style="color: #800000"><body>
</span><span style="color: #008080"> 9</span> <span style="color: #800000"><div id="dlunbo">
</span><span style="color: #008080">10</span> <span style="color: #800000"><div id="igs">
</span><span style="color: #008080">11</span> <span style="color: #800000"><div class="ig"><img src="img/1_1.jpg" /></div>
</span><span style="color: #008080">12</span> <span style="color: #800000"><div class="ig"><img src="img/1_2.jpg" /></div>
</span><span style="color: #008080">13</span> <span style="color: #800000"><div class="ig"><img src="img/1_3.png" /></div>
</span><span style="color: #008080">14</span> <span style="color: #800000"><div class="ig"><img src="img/1_4.jpg" /></div>
</span><span style="color: #008080">15</span> <span style="color: #800000"><div class="ig"><img src="img/1_5.jpg" /></div>
</span><span style="color: #008080">16</span> <span style="color: #800000"></div>
</span><span style="color: #008080">17</span> <span style="color: #800000"><ul id="tabs">
</span><span style="color: #008080">18</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">19</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">20</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">21</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">22</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">23</span> <span style="color: #800000"></ul>
</span><span style="color: #008080">24</span> <span style="color: #800000"><div class="btn btn1" >&lt;</div>
</span><span style="color: #008080">25</span> <span style="color: #800000"><div class="btn btn2">&gt;</div>
</span><span style="color: #008080">26</span> <span style="color: #800000"></div>
</span><span style="color: #008080">27</span> <span style="color: #800000"></body>
</span><span style="color: #008080">28</span> <span style="color: #800000"></html><br></span>

<span style="color: #008080"> 1</span> <span style="color: #800000">*</span>{
<span style="color: #008080"> 2</span> <span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080"> 3</span> <span style="color: #ff0000">padding</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080"> 4</span> <span style="color: #ff0000">list-style-type</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080"> 5</span> }
<span style="color: #008080"> 6</span> <span style="color: #800000">#dlunbo</span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>;
<span style="color: #008080"> 9</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">10</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">11</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-166px</span>;
<span style="color: #008080">12</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">-250px</span>;
<span style="color: #008080">14</span> }
<span style="color: #008080">15</span> <span style="color: #800000">.ig</span>{
<span style="color: #008080">16</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">17</span> }
<span style="color: #008080">18</span> <span style="color: #800000">img</span>{
<span style="color: #008080">19</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>;
<span style="color: #008080">20</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>;
<span style="color: #008080">21</span> }
<span style="color: #008080">22</span> <span style="color: #800000">#tabs</span>{
<span style="color: #008080">23</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">24</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">300px</span>;
<span style="color: #008080">25</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">200px</span>;
<span style="color: #008080">26</span> }
<span style="color: #008080">27</span> <span style="color: #800000">.tab</span>{
<span style="color: #008080">28</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">30</span> <span style="color: #ff0000">border</span>:<span style="color: #0000ff">solid 1px #ffffff</span>;
<span style="color: #008080">31</span> <span style="color: #ff0000">float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">32</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">5px</span>;
<span style="color: #008080">33</span> <span style="color: #ff0000">border-radius</span>:<span style="color: #0000ff">100%</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>;
<span style="color: #008080">35</span> }
<span style="color: #008080">36</span> <span style="color: #800000">.btn</span>{
<span style="color: #008080">37</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">38</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">50px</span>;
<span style="color: #008080">39</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">40</span> <span style="color: #ff0000">background</span>:<span style="color: #0000ff">rgba(0,0,0,0.5)</span>;
<span style="color: #008080">41</span> <span style="color: #ff0000">color</span>:<span style="color: #0000ff">#fff</span>;
<span style="color: #008080">42</span> <span style="color: #ff0000">text-align</span>:<span style="color: #0000ff">center</span>;
<span style="color: #008080">43</span> <span style="color: #ff0000">line-height</span>:<span style="color: #0000ff">50px</span>;
<span style="color: #008080">44</span> <span style="color: #ff0000">font-size</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">45</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">46</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-25px</span>;
<span style="color: #008080">47</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>;
<span style="color: #008080">48</span> }
<span style="color: #008080">49</span> <span style="color: #800000">.btn1</span>{
<span style="color: #008080">50</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080">51</span> }
<span style="color: #008080">52</span> <span style="color: #800000">.btn2</span>{
<span style="color: #008080">53</span> <span style="color: #ff0000">right</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080">54</span> }

以上是静态轮播图的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

深入解析C语言中static关键字的作用和用法Feb 20, 2024 pm 04:30 PM

深入解析C语言中static关键字的作用和用法在C语言中，static是一种非常重要的关键字，它可以被用于函数、变量和数据类型的定义上。使用static关键字可以改变对象的链接属性、作用域和生命周期，下面就来详细地解析一下static关键字在C语言中的作用和用法。static变量和函数：在函数内部使用static关键字定义的变量称为静态变量，它具有全局生命周

PHP中私有静态方法的作用及应用场景Mar 23, 2024 am 10:18 AM

PHP中私有静态方法的作用及应用场景在PHP编程中，私有静态方法是一种特殊的方法类型，它只能在定义它的类内部访问，外部无法直接调用。私有静态方法通常用于类的内部逻辑实现，提供了一种封装和隐藏细节的方式，同时又具有静态方法的特性，可以在不实例化类对象的情况下被调用。下面将探讨私有静态方法的作用及应用场景，并提供具体的代码示例。作用：封装和隐藏实现细节：私有静态

快速掌握静态相对定位的技巧与方法Jan 18, 2024 am 11:18 AM

快速静态相对定位是网页开发中非常重要的一种定位方式。它可以使元素相对于其正常位置进行微调的同时，仍然保持在文档流中的位置。在本文中，我将详细介绍快速静态相对定位的使用方法，以及一些常见的应用场景。首先，我们需要了解快速静态相对定位的基本概念。在CSS中，元素的定位方式有四种：静态定位、相对定位、绝对定位和固定定位。静态定位是默认的定位方式，元素的位置通过文档

静态重定位技术的原理及其应用案例Jan 18, 2024 am 11:12 AM

静态重定位技术的原理和应用引言：在现代计算机系统中，内存管理是一个非常重要的课题。随着软件的复杂性和规模的增加，内存的限制成为了我们面临的一个挑战。为了更高效地利用内存资源，静态重定位技术应运而生。本文将介绍静态重定位技术的原理、应用以及提供一些具体的代码示例。一、静态重定位技术的原理静态重定位是一种将程序代码和数据从一个逻辑地址空间移动到另一个逻辑地址空间

优化页面布局方法：快速静态相对定位的应用技巧Jan 18, 2024 am 10:39 AM

如何运用快速静态相对定位优化页面布局随着互联网的发展，网页设计变得越来越重要。一个好的页面布局可以提升用户体验，并提高网站的可用性和可访问性。快速静态相对定位是一种常用的布局技术，可以有效地优化页面布局。本文将介绍如何运用快速静态相对定位优化页面布局。快速静态相对定位是一种基于CSS的布局技术，通过使用CSS样式表中的"position"属性，可以在不影响文

了解Golang的独特之处与优势Mar 03, 2024 am 10:51 AM

Golang，即Go语言，是一种由谷歌开发的编程语言，自问世以来备受开发者们的喜爱。Golang拥有独特的设计理念和优势，使其在大规模并发程序、网络编程和云计算等领域表现出色。本文将探讨Golang的独特之处与优势，并通过具体的代码示例来展示这些特点。1.并发编程Golang天生支持并发编程，通过goroutine和channel两大特性，开发者可以轻

Vue中引入静态jQuery避免错误提示Feb 19, 2024 pm 04:16 PM

在Vue项目中引入静态jQuery可能会引发一些错误提示，主要是因为Vue对于jQuery的引入和使用有一些特殊的要求。在实际开发中，我们需要遵循一些规范和注意事项，以避免这些错误提示的出现。下面我将介绍一些具体的代码示例和解决方法，来帮助读者避免这些错误。首先，我们需要明确一点：在Vue项目中引入jQuery并不是推荐的做法，因为Vue本身提供了丰富的功能

Go语言特性详解：一文了解Go的语言特点Mar 05, 2024 am 09:54 AM

Go语言特性详解：一文了解Go的语言特点Go语言是一种由Google开发的静态类型、编译型、并发型，并具有垃圾回收功能的开源编程语言。自2009年发布以来，Go语言因其高效的并发处理能力、简洁的语法以及快速的编译速度而备受程序员们喜爱。本文将详细介绍Go语言的一些主要特性，并通过具体的代码示例帮助读者更好地了解这些特点。并发编程Go语言的最大特点之一就是原生

See all articles