20240309web前端_第一周作业_豆瓣电影

作业四:豆瓣电影

成果展示:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>豆瓣电影</title>
</head>
<body><h1>热门电影板块</h1><hr><table><tr><td style="width:160px;"><b style="font-size: 20px;">最近热门电影</b></td><td style="width: 65px;font-size: 18px;">热门</td><td style="width: 60px;font-size: 18px;">最新</td><td style="width: 110px;font-size: 18px;">豆瓣满分</td><td style="width: 100px;font-size: 18px;">冷门佳片</td><td style="width: 60px;font-size: 18px;">华语</td><td style="width: 60px;font-size: 18px;">欧美</td><td style="width: 65px;font-size: 18px;">韩国</td><td style="width: 180px;font-size: 18px;">日本</td><td style="width: 65px;font-size: 18px;">更多>></td></tr></table><hr><table><tr><td><img src="img2/猜火车 8.1.png"></td><td><img src="img2/贝尔科实验 6.0.png"></td><td><img src="img2/加州公路巡警 6.8.png"></td><td><img src="img2/歌声不绝 6.3.png"></td><td><a href="#bottom" name="top">直<br>到<br>底<br>部<br></a></td></tr><tr><td style="height: 40px;font-size: 18px;">猜火车 8.1</td><td style="height: 40px;font-size: 18px;">贝尔科实验 6.0</td><td style="height: 40px;font-size: 18px;">加州公路巡警 6.8</td><td style="height: 40px;font-size: 18px;">歌声不绝 6.3</td></tr><tr><td><img src="img2/明日的我与昨日的我.png"></td><td><img src="img2/速度与激情8.png"></td><td><img src="img2/极速特工.png"></td><td><img src="img2/金刚狼3 :殊死一战.png"></td></tr><tr><td style="height: 40px;font-size: 18px;">明日的我与昨日的我</td><td style="height: 40px;font-size: 18px;">速度与激情8</td><td style="height: 40px;font-size: 18px;">极速特工</td><td style="height: 40px;font-size: 18px;">金刚狼3 : 殊死一战</td></tr><tr><td><a href="#top" name="bottom">回到顶部</a></td></tr></table>
</body>
</html>

解析:

豆瓣电影的网页显示,主要是多图片文字平行显示和回到顶部、直到底部的超链接建立

标题使用<h1>设置一级标题,<hr>显示水平分割线

    <h1>热门电影板块</h1><hr>

主体部分可以使用没有表格线的表格来布局,使文字及图片平行多项显示,使用表格中style标签中的width调整文字容器范围即表格宽度,font-size调整字号,<td>中的文字默认左对齐,需要使用水平分割线,因此上方文字部分独立使用table表格

    <table><tr><td style="width:160px;"><b style="font-size: 20px;">最近热门电影</b></td><td style="width: 65px;font-size: 18px;">热门</td><td style="width: 60px;font-size: 18px;">最新</td><td style="width: 110px;font-size: 18px;">豆瓣满分</td><td style="width: 100px;font-size: 18px;">冷门佳片</td><td style="width: 60px;font-size: 18px;">华语</td><td style="width: 60px;font-size: 18px;">欧美</td><td style="width: 65px;font-size: 18px;">韩国</td><td style="width: 180px;font-size: 18px;">日本</td><td style="width: 65px;font-size: 18px;">更多>></td></tr></table><hr>

在每一个表格中嵌套img图片标签,建立直到底部的超链接标签,跳转点通过a标签的name属性设置,链接通过a标签中href属性设置,#引用链接的name完成跳转

<tr><td><img src="img2/猜火车 8.1.png"></td><td><img src="img2/贝尔科实验 6.0.png"></td><td><img src="img2/加州公路巡警 6.8.png"></td><td><img src="img2/歌声不绝 6.3.png"></td><td><a href="#bottom" name="top">直<br>到<br>底<br>部<br></a></td></tr>

根据表格上下对齐的特点在图片下方表格输入电影名称,使用style标签的height属性设置表格的高度,使用font-size调整文字大小

<tr><td style="height: 40px;font-size: 18px;">猜火车 8.1</td><td style="height: 40px;font-size: 18px;">贝尔科实验 6.0</td><td style="height: 40px;font-size: 18px;">加州公路巡警 6.8</td><td style="height: 40px;font-size: 18px;">歌声不绝 6.3</td></tr>

在页面下方建立回到顶部的超链接标签,跳转点通过a标签的name属性设置,链接通过a标签中href属性设置,#引用链接的name完成跳转

        <tr><td><a href="#top" name="bottom">回到顶部</a></td></tr>

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

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

相关文章

Word转PDF保持图片原有清晰度

目录 1、需要的软件 2、配置Acrobat PDFMaker 3、配置Acrobat Distiller 4、更改Acrobat PDFMaker中的首选项 5、将word转换成pdf 1、需要的软件 利用Adobe Acrobat DC工具。 打开word&#xff0c;选择Acrobat的插件&#xff0c;选择首选项。 如果没有出现Acrobat插件也…

C++的类与对象(三):构造函数、析构函数、对象的销毁顺序

目录 类的6个默认成员函数 构造函数 语法 特性 析构函数 特性 对象的销毁顺序​​​​​​​​​​​​​​ 类的6个默认成员函数 问题&#xff1a;一个什么成员都没的类叫做空类&#xff0c;空类中真的什么都没有吗&#xff1f; 基本概念&#xff1a;任何类在什么都不…

2024年最便宜的阿里云服务器购买图文教程,2核2G61元,2核4G99元

2024年&#xff0c;阿里云推出了多款价格非常便宜的云服务器和轻量应用服务器&#xff0c;其中轻量应用服务器2核2G3M带宽50G系统盘只要61元/1年&#xff0c;2核4G4M带宽60G系统盘只要165元/1年。云服务器2核2G3M带宽40G系统盘只要99元/1年&#xff0c;2核4G5M带宽80G系统盘只要…

功能测试转自动化测试好不好转型?

手工测试做了好多年&#xff0c;点点点成了每天必须做的事情。但是随着自动化测试趋势的日渐明显&#xff0c;以及受到薪资、技能的双重考验&#xff0c;掌握自动化测试成为了必备技能。 手工转自动化测试&#xff0c;不是一蹴而就的。“预先善其事&#xff0c;必先利其器”&a…

FTP,SFTP,FTPS,SSL,TSL简介,区别,联系,使用场景说明

文章目录 简介FTPFTPSSFTP加密场景选择FTPS还是SFTPFTP、SFTP、FTPS区别、联系和具体使用场景如何使用FTP、SFTP和FTPSSSLTLSSSL和TLS区别和联系&#xff0c;以及使用场景SSL和TLS技术上的区别一些问题隐式的TLS&#xff08;FTPS/SSL&#xff09;或者显式的TLS&#xff08;FTPS…

LeetCode 707. 设计链表 (JAVA)

1.题目 2. 思路分析 1.我们要设置一个虚拟头节点&#xff0c;因为这个虚拟头节点对于增加节点操作和删除节点操作都很方便。 2.仔细读题&#xff0c;题目中说链表中的节点下标是从0开始的。也就是说第一个节点下标为0。 3.增加节点和删除节点的操作我们都要获取到它前一个的节…

洗衣洗鞋店小程序对接水洗唛打印,一键预约,支付无忧

随着社会的进步和科技的发展&#xff0c;我们的生活幸福感与日俱增。为了让我们从琐碎中解脱出来&#xff0c;干洗店洗鞋店行业也日新月异。今天&#xff0c;我为大家推荐这款优秀的干洗店小程序系统&#xff0c;让您的洗衣洗鞋服务体验更上一层楼。 干洗店管理系统是一款专为洗…

HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

css clip-path polygon属性实现直角梯形

2024.3.8今天我学习了如何用css实现直角梯形的效果&#xff0c; 效果&#xff1a; 具体实现原理&#xff1a; 一、需要三个div&#xff1a; 外面一个大的div&#xff0c;里面左右两个小的div 我们需要先把第一个div变成直角梯形&#xff1a; 大概是这样&#xff0c;设置好之…

conda PackagesNotFoundError

参考&#xff1a;https://wenku.csdn.net/answer/3u2f0vgdaj 报错&#xff1a;Solving environment: failed PackagesNotFoundError: The following packages are not available from current channels: 解决方法 ##添加channels conda config --add channels anaconda conda …

【CV论文阅读】【计算机视觉中的Transformer应用综述】(1)

0.论文摘要 摘要——自然语言任务的Transformer model模型的惊人结果引起了视觉社区的兴趣&#xff0c;以研究它们在计算机视觉问题中的应用。在它们的显著优点中&#xff0c;与递归网络例如长短期记忆&#xff08;LSTM&#xff09;相比&#xff0c;Transformer能够模拟输入序…

golang学习随便记16-反射

为什么需要反射 下面的例子中编写一个 Sprint 函数&#xff0c;只有1个参数&#xff08;类型不定&#xff09;&#xff0c;返回和 fmt.Fprintf 类似的格式化后的字符串。实现方法大致为&#xff1a;如果参数类型本身实现了 String() 方法&#xff0c;那调用 String() 方法即可…

C++ 有哪些流行的开发框架或库?

这是我在知乎上回答的一个问题&#xff0c;不到两周收藏数超过 500&#xff0c;点赞还不到 100&#xff0c;看来 C 程序员还是不少&#xff0c;且大家都想进步。 不过从“收藏”就是“学过”的这种风气来看&#xff0c;大概率只是扫一眼&#xff0c;然后放到收藏里吃灰了。 下面…

《手把手教你》系列技巧篇(三十)-java+ selenium自动化测试- Actions的相关操作下篇(详解教程)

1.简介 本文主要介绍两个在测试过程中可能会用到的功能&#xff1a;Actions类中的拖拽操作和Actions类中的划取字段操作。例如&#xff1a;需要在一堆log字符中随机划取一段文字&#xff0c;然后右键选择摘取功能。 2.拖拽操作 鼠标拖拽操作&#xff0c;顾名思义就是&#xff…

CubeMX使用教程(5)——定时器PWM输出

本篇我们将利用CubeMX产生频率固定、占空比可调的两路PWM信号输出 例如PA6引脚输出100Hz的PWM&#xff1b;PA7引脚输出500Hz的PWM&#xff0c;双路同时输出 我们还是利用上一章定时器中断的工程进行学习&#xff0c;这样比较方便 首先打开CubeMX对PA6、PA7进行GPIO配置 注&a…

SpringMVC03、HelloSpring

3、HelloSpring 3.1、配置版 新建一个Moudle &#xff0c; springmvc-02-hello &#xff0c; 添加web的支持&#xff01; 确定导入了SpringMVC 的依赖&#xff01; 配置web.xml &#xff0c; 注册DispatcherServlet <?xml version"1.0" encoding"UTF-8…

Linux操作系统-07-Linux安装应用

一、使用rpm安装应用&#xff08;不推荐&#xff09; 先下载到本地&#xff0c;以.rpm文件名结尾&#xff0c;下载完成后&#xff0c;再安装 rpm -qa | grep mysql #查询当前系统是否有下载过mysql包 先上传mysql的rpm安装包到linux的opt目录 安装 rpm -ivh …

[项目设计] 从零实现的高并发内存池(三)

&#x1f308; 博客个人主页&#xff1a;Chris在Coding &#x1f3a5; 本文所属专栏&#xff1a;[高并发内存池] ❤️ 前置学习专栏&#xff1a;[Linux学习] ⏰ 我们仍在旅途 ​ 目录 4.CentralCache实现 4.1 CentralCache整体架构 4.2 围绕Span的相关设计…

【代码随想录 | 数组 01】二分查找

文章目录 1.二分查找1.1题目1.2思路&#xff08;核心&#xff1a;区间的定义&#xff09;1.3左闭右闭1.4左闭右开1.5总结 1.二分查找 1.1题目 704.二分查找—力扣题目链接 题目&#xff1a;给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 …

C语言分析基础排序算法——插入排序

目录 插入排序 直接插入排序 希尔排序 希尔排序基本思路解析 希尔排序优化思路解析 完整希尔排序文件 插入排序 直接插入排序 所谓直接插入排序&#xff0c;即每插入一个数据和之前的数据进行大小比较&#xff0c;如果较大放置在后面&#xff0c;较小放置在前面&#x…