HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第7章动手实践

7.6 动手实践

学习完前面的内容,下面动手实践一下吧。
请结合给出的素材,运用元素的浮动和定位实现图7-49所示的“焦点图”效果。
在这里插入图片描述

链接:https://pan.baidu.com/s/1H98ySBSkd8h3IRA19AV2mw?pwd=1024
提取码:1024

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>焦点图</title><link rel="stylesheet" type="text/css" href="style.css">
</head><body><div><img src="images/banner1.jpg" alt="美食" /><ul><li></li><li class="one"></li><li></li><li></li></ul><span class="left"></span><span class="right"></span></div>
</body></html>

css

@charset "utf-8";/* CSS Document */
* {margin: 0;padding: 0;list-style: none;
}div {width: 616px;height: 237px;margin: 20px auto;position: relative;
}ul {position: absolute;left: 269px;top: 212px;
}li {float: left;background: url(images/point1.png) no-repeat;width: 25px;height: 11px;
}.one {background: url(images/point2.png) no-repeat;
}span {display: inline-block;background: url(images/arrow1.png) no-repeat;width: 49px;height: 49px;position: absolute;left: 20px;top: 92px;
}.right {background: url(images/arrow2.png) no-repeat;position: absolute;left: 550px;top: 92px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/800907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录|Day34|动态规划03|343.整数拆分、96.不同的二叉搜索树

343.整数拆分 动规五步&#xff1a; 确定 dp[i] 含义&#xff1a;拆分数字 i&#xff0c;可以获得的最大乘积为 dp[i]。递推公式&#xff1a;dp[i] max(j * (i - j), j * dp[i - j])。i 可以被拆解为两个数&#xff08;j 和 i - j&#xff09;或者多个数&#xff08;j 和 dp[i…

网络I/O处理

引言&#xff1a;网络数据能够正常到达用户并且被接收是进行网络传输的根本目的&#xff0c;网络传输的数据发送和接收有多种方案&#xff0c;本文章就对通过向量接收和发送等数据传输方式&#xff0c;并且对多种I/O模型进详细分析介绍。 目录 一.I/O函数 1.1 recv和send rec…

KMP刷leetcode速通

前言 KMP真厉害&#xff0c;刷题刷到 28.找出字符串中第一个匹配项的下标 和 1668.最大重复子字符串 next 数组用来匹配不上时&#xff0c;前缀 j j j 可以快速回退到 n e x t [ j − 1 ] next[j-1] next[j−1] 的位置。 void getNext(vector<int>& next, const…

PyTorch学习(6):导出ONNX模型

1. 简述 在使用PyTorch进行模型训练时&#xff0c;我们通常希望将训练好的模型导出为ONNX&#xff08;Open Neural Network Exchange&#xff09;格式的文件。 ONNX&#xff08;Open Neural Network Exchange&#xff09;是一个开放格式&#xff0c;用于表示深度学习模型。它允…

5毛钱的DS1302 N/Z串行实时时钟IC

推荐原因&#xff1a; 便宜&#xff0c;够用 该器件最早为DALLAS的产品&#xff0c;所以冠有DS&#xff0c;现国内有多个厂家生产&#xff0c;部分价格不到5毛钱的含税价格&#xff0c;有此自行车&#xff0c;还要什么宝马&#xff1f; 下述为简介&#xff0c;使用前请参阅相应…

Linux 网络配置 主机名解析过程

Windows查看网络信息 ipconfigLinux中查看网络配置&#xff1a; ifconfigVMware的网络编辑器&#xff1a; 测试两台主机网络是否连通&#xff1a; ping ip地址自动获取IP 自动获取IP&#xff0c;可以避免IP冲突&#xff0c;但IP可能会变&#xff0c;使用图形界面&#xf…

xilinx AXI CAN驱动开发

CAN收发方案有很多&#xff0c;常见的解决方案通过是采用CAN收发芯片&#xff0c;例如最常用的SJA1000,xilinx直接将CAN协议栈用纯逻辑实现&#xff0c;AXI CAN是其中一种&#xff1b; 通过这种方式硬件上只需外接一个PHY芯片即可 上图加了一个电平转换芯片 软件设计方面&…

常见溯源,反溯源,判断蜜罐手段

常见溯源&#xff0c;反溯源&#xff0c;判断蜜罐手段 1.溯源手段2.反溯源手段3.如何判断蜜罐&#x1f36f;4.案例&#xff1a;MySQL读文件蜜罐 1.溯源手段 IP地址追踪&#xff1a;通过IP地址追踪可以确定攻击者的地理位置和ISP信息等&#xff1b;通过攻击IP历史解析记录/域名…

书生·浦语大模型-第三节课笔记/作业

笔记 作业 原版 prompt控制节奏&#xff0c;实现类似关键词检索、主题、信息抽取等功能注意这里根据llm返回的topic (prompt: 告诉我这句话的主题&#xff0c;直接说主题不要解释)进行召回检索(CacheRetriever), 并再次让大模型判断query与返回的检索的相关程度. 如果本地检索…

蓝桥杯 子串简写(暴力)

题目&#xff1a;子串简写 代码1&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<queue> #include<cmath>using namespace std;char c1,c2; int k; char s[100010]; int a[100010]; int b[100010]; int cnt; …

Nginx服务 高级配置

五、高级配置 1. 网页的状态页 基于 nginx 模块 ngx_http_stub_status_module 实现&#xff0c;在编译安装nginx的时候需要添加编译参数 --with-http_stub_status_module&#xff0c;否则配置完成之后监测会是提示语法错误注意。状态页显示的是整个服务器的状态&#xff0c;而…

关于SpringBoot的配置文件

1 配置的读取顺序 1.1 application配置文件的读取顺序 读取顺序由内而外: (1) - (2) - (3) - (4)&#xff0c;后读取到会覆盖先读取到&#xff0c;所以优先级正好反过来: (4) - (3) - (2) - (1) /optmy-spring-boot-project.jarapplication.yml (1)/configapplicat…

VPS入门指南:理解并有效利用虚拟专用服务器

VPS&#xff0c;即虚拟专用服务器&#xff08;Virtual Private Server&#xff09;&#xff0c;是一种流行的托管服务&#xff0c;它利用虚拟化技术&#xff0c;将一台服务器分割成多个虚拟服务器。每个VPS在一个更大的物理服务器上运行自己的操作系统副本&#xff0c;使用户可…

Python学习之-logging模块及彩色日志详解

前言&#xff1a; Python的logging模块是内建的、功能强大的日志系统&#xff0c;可通过简单的配置&#xff0c;就能满足基本到复杂的日志管理需求。它可以让你以各种方式记录错误、调试信息、以及其他运行时的信息&#xff0c;这些都是应用程序健壯性、可维护性的关键。 1 基…

SpringBoot实现增删改查

Spring Boot 是一个非常流行的 Java 开发框架&#xff0c;它简化了基于 Spring 框架的应用程序的开发过程。下面是一个简单的示例&#xff0c;展示了如何使用 Spring Boot 实现增删改查功能。 首先&#xff0c;你需要确保你的项目中已经添加了 Spring Boot 的依赖&#xff0c;…

分公司=-部门--组合模式

1.1 分公司不就是一部门吗&#xff1f; "我们公司最近接了一个项目&#xff0c;是为一家在全国许多城市都有分销机构的大公司做办公管理系统&#xff0c;总部有人力资源、财务、运营等部门。" "这是很常见的OA系统&#xff0c;需求分析好的话&#xff0…

CTK插件框架学习-服务工厂(06)

CTK插件框架学习-信号槽(05)https://mp.csdn.net/mp_blog/creation/editor/137240105 一、服务工厂定义 注册插件时使用服务工厂注册&#xff0c;使用getService根据调用者插件资源文件内容获取在服务工厂内的对应实现在服务工厂中可以知道是哪个插件正在调用服务工厂懒汉模式…

Day5-Hive的结构和优化、数据文件存储格式

Hive 窗口函数 案例 需求&#xff1a;连续三天登陆的用户数据 步骤&#xff1a; -- 建表 create table logins (username string,log_date string ) row format delimited fields terminated by ; -- 加载数据 load data local inpath /opt/hive_data/login into table log…

开源免费的多功能PDF工具箱

它支持修改PDF、编辑PDF书签、导出PDF书签、导入书签、生成、合并、拆分、提取页面内容、提取图片、OCR 功能介绍: 修改PDF信息&#xff1a;修改文档属性、页码编号、页面链接、页面尺寸&#xff1b;删除自动打开网页等动作&#xff0c;去除复制及打印限制&#xff1b;设置阅读…

SQLite数据库的性能问题并不是单纯地由数据量的大小决定的,而是受到多种因素的综合影响。以下是一些可能导致SQLite性能问题的因素

SQLite数据库的性能问题并不是单纯地由数据量的大小决定的&#xff0c;而是受到多种因素的综合影响。以下是一些可能导致SQLite性能问题的因素&#xff1a; 数据量&#xff1a;当SQLite数据库中的数据量增长到一定程度时&#xff0c;查询、插入和更新等操作可能会变得缓慢。这…