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.mzph.cn/news/738637.shtml

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

相关文章

探索计算机视觉的未来

目录 前言1 计算机视觉简介2 计算机视觉的基本原理2.1 图像获取2.2 图像预处理2.3 特征提取2.4 模式识别 3 深度学习与计算机视觉3.1 深度学习的基本原理3.2 深度学习在计算机视觉中的应用 4 计算机视觉的应用领域4.1 人脸识别4.2 物体识别4.3 图像分割4.4 视频追踪 5 未来发展…

Midjourney从入门到实战:图像生成命令及参数详解

目录 0 专栏介绍1 Midjourney Bot常用命令2 Midjourney绘图指令格式3 Midjourney绘图指令参数3.1 模型及版本3.2 画面比例3.3 风格化3.4 图片质量3.5 混乱值3.6 随机数种子3.7 重复贴图3.8 停止3.8 垫图权重3.9 提示词权重分割 0 专栏介绍 &#x1f525;Midjourney是目前主流的…

Vue3全家桶 - VueRouter - 【3】嵌套路由【children】

嵌套路由【children】 如果在路由视图中展示的组件包含自己的路由占位符&#xff08;路由出口&#xff09;&#xff0c;则此处会用到嵌套路由&#xff1b;如图所示&#xff1a;点击关于链接&#xff0c;则会展示About组件&#xff0c;在其组件中又包含了路由链接和路由占位符&…

蓝桥杯-ISBN号码

此题然让本人纠结了很久&#xff0c;真的好多坑。。。。果然还是太菜了。 完整代码以及思路解析(在注释中) #include <iostream> using namespace std; int main() {string num;cin>>num; int count0;int w1;for(int i0;i<10;i){if((i!1)&&(i!5)) //坑…

常见的限流算法- python版本

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 在系统的稳定性设计中&#xff0c;需要考虑到的就是限流&#xff0c;避免高并发…

Elastic Stack--08--SpringData框架

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 SpringData[官网&#xff1a; https://spring.io/projects/spring-data](https://spring.io/projects/spring-data) Spring Data Elasticsearch 介绍 1.SpringData-…

AI+X 高校行:首场浙大站爆满!

Datawhale线下 线下活动&#xff1a;AIX 高校行活动 AIX&#xff1a;希望将人工智能&#xff08;AI&#xff09;与各个学科和行业&#xff08;X&#xff09;结合&#xff0c; 激发无限潜力和创造力&#xff08;X&#xff09;&#xff0c;让年轻人拥有更多可能性&#xff08;X&…

Discord OAuth2授权以及机器人监听群事件

下面文章讲解获取OAuth2授权整个流程&#xff0c;创建机器人&#xff0c;使用机器人监听工会&#xff08;工会就是创建的服务器&#xff09;成员变化等等&#xff0c;对接国外的都是需要VPN的哦&#xff0c;对接的时候记得提前准备。 创建应用 点击 此页面添加应用,&#xff…

Midjourney绘图欣赏系列(七)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

【wps】wps与office办公函数储备使用(结合了使用案例 持续更新)

【wps】wps与office办公函数储备使用(结合了使用案例 持续更新) 1、TODAY函数 返回当前电脑系统显示的日期 TODAY函数&#xff1a;表示返回当前电脑系统显示的日期。 公式用法&#xff1a;TODAY() 2、NOW函数 返回当前电脑系统显示的日期和时间 NOW函数&#xff1a;表示返…

蚂蚁链摩斯荣获“艾瑞保险业数字化卓越服务商“奖

近日&#xff0c;艾瑞咨询发布《2023年中国保险业数字化转型研究报告》&#xff0c;摩斯隐私计算解决方案被报告入选&#xff0c;并获得“保险业数字化卓越服务商”奖。 蚂蚁摩斯是隐私计算行业的领先布局者&#xff1a;早在2017年&#xff0c;蚂蚁集团启动了隐私计算项目&…

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

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

Linux 多进程开发(上)

第二章 Linux 多进程开发 2.1 进程概述2.2 进程状态转换2.3 进程创建2.4 exec 函数族2.5 进程控制 网络编程系列文章&#xff1a; 第1章 Linux系统编程入门&#xff08;上&#xff09; 第1章 Linux系统编程入门&#xff08;下&#xff09; 第2章 Linux多进程开发&#xff08;…

Opencv 插值方法 总结

一、概括 面试的时候问到了一个图&#xff0c;就是如何将一个算子放缩&#xff1f;&#xff1f;我第一反应是resize&#xff08;&#xff09;,但是后来我转念一想&#xff0c;人家问的是插值方式&#xff0c;今天来总结一下 最邻近插值法原理分析及c实现_最临近插值法-CSDN博…

Python与C++的对比——跟老吕学Python编程

Python与C的对比——跟老吕学Python编程 Python与C的对比1.C编译型 vs Python解释型2.执行效率3.开发效率4.跨平台5.可移植性6.内存管理机制7.易学性8.静态类型 vs 动态类型9.面向对象编程概念10.垃圾回收11.应用领域 Python与C的对比表 Python与C的对比 Python和C都是最受欢迎…

数据结构小记【Python/C++版】——散列表篇

一&#xff0c;基础概念 散列表&#xff0c;英文名是hash table&#xff0c;又叫哈希表。 散列表通常使用顺序表来存储集合元素&#xff0c;集合元素以一种很分散的分布方式存储在顺序表中。 散列表是一个键值对(key-item)的组合&#xff0c;由键(key)和元素值(item)组成。键…

解密阿里巴巴面试题:如何设计一个微博?

亲爱的小米科技粉丝们,大家好呀!今天小米带来了一则热门话题——阿里巴巴面试题:如何设计一个微博?别着急,跟着小米一起来揭秘吧! 实现哪些功能? 在设计微博系统时,需要考虑实现哪些功能才能满足用户的需求。除了基本的发布推文、时间线、新闻推送、关注/不允许用户以…

【JavaScript 漫游】【034】AJAX

文章简介 本篇文章为【JavaScript 漫游】专栏的第 034 篇文章&#xff0c;对浏览器模型的 XMLHttpRequest 对象&#xff08;AJAX&#xff09;的知识点进行了总结。 XMLHttpRequest 对象概述 浏览器与服务器之间&#xff0c;采用 HTTP 协议通信。用户在浏览器地址栏键入一个网…

Java项目源码基于springboot的家政服务平台的设计与实现

大家好我是程序员阿存&#xff0c;在java圈的辛苦码农。辛辛苦苦板砖&#xff0c;今天要和大家聊的是一款Java项目源码基于springboot的家政服务平台的设计与实现&#xff0c;项目源码以及部署相关请联系存哥&#xff0c;文末附上联系信息 。 项目源码&#xff1a;Java基于spr…

虚拟机镜像iso下载

MSDN, 我告诉你 - 做一个安静的工具站 (itellyou.cn)