网页HTML编写练习:华语榜中榜
网页效果
HTML代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>华语榜中榜</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/华语榜中榜.css">
</head>
<body><!-- 1.头部header --><div class="header"><div class="header-top"><img src="images/header.png" alt="" class="header-logo fl"><span>官方微信</span><span>官方微博</span></div><div class="header-bottom"><ul class="header-nav fr"><li>首页</li><li>品牌内容</li><li>频道介绍</li><li>节目合作</li><li>消息公告</li><li>联系我们</li></ul></div></div><!-- 2.广告图banner --><div class="banner"><img src="images/banner.png" alt=""></div><!-- 3.列表list --><div class="list"><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list1.png" alt=""></div><h2>星空传媒</h2><h5>高度国际化</h5><h5>传媒公司</h5><h5>打造中外文化交流平台</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list2.png" alt=""></div><h2>星空卫视中文台</h2><h5>与综艺和娱乐内容为主</h5><h5>全天24小时普通话输出</h5><h5>高收视率频道</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list3.png" alt=""></div><h2>Channel[V]</h2><h5>自94年成立以来</h5><h5>作为亚洲第一的</h5><h5>华语音乐频道</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list4.png" alt=""></div><h2>星空卫视国际台</h2><h5>开播于2004年</h5><h5>定位文化时尚</h5><h5>想世界展示中国的窗口</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div></div><!-- 4.案例case --><div class="case"><div class="case-title"><span>CASES</span><span>节目合作</span></div><div class="case-content"><div class="case-left fl"><h1>视频推荐</h1><img src="images/case1.png" alt=""><h2>与星共舞</h2><h3>2015-08-21</h3><h4><<与星共舞>>是指2014年12月21日,大型明星舞蹈真人秀<<与星共舞>>于2014年12月21日晚在东方卫...</h4></div><div class="case-right fl"><div class="case-list fl"><h5>中国好歌曲</h5><h6>2015-08-18</h6><img src="images/case21.png" alt=""></div><div class="case-list fr"><h5>出彩中国人</h5><h6>2015-08-18</h6><img src="images/case22.png" alt=""></div><div class="case-list fl"><h5>娱乐梦工厂</h5><h6>2015-08-18</h6><img src="images/case23.png" alt=""></div><div class="case-list fl"><h5>中国好声音</h5><h6>2015-08-18</h6><img src="images/case24.png" alt=""></div></div></div></div><!-- 5.关于我们about --><!-- ????用新增h5标签创建高级表单????? --><!-- hgroup等用法,示例 --><div class="about"><div class="about-top"><table class="about-left fl"><tr><td>关于我们</td><td>星空传媒</td><td>星空卫视</td><td>CHANNEL[V]</td><td>星空国际</td></tr><tr><td>服务项目</td><td>星空传媒服务</td><td>星空卫视服务</td><td>CHANNEL[V]服务</td><td>星空国际服务</td></tr><tr><td>新闻动态</td><td>公司动态</td><td>行业资讯</td><td></td><td></td></tr><tr><td>联系我们</td><td>联系方式</td><td>需求提交</td><td></td><td></td></tr></table><div class="about-right fl"><p><span>网站建设咨询:</span><span>(QQ)445581301</span></p><p><span>投诉电话:</span><span>021-52032888转6366</span></p></div> </div><div class="about-bottom"><p><span>友情链接</span><span>/</span><span>LINK</span></p><ul><li><a>星空中国</a></li><li><a>星空国际</a></li><li><a>CHANNEL[V]</a></li><li><a>技术支持</a></li></ul></div></div><!-- 6.底部footer --> <div class="footer"><p><span>Copyright©2013-2015</span><span>星空华文国际传媒有限公司</span><span>b版权所有</span></p></div>
</body>
</html>
css 代码
/* 1.头部header */
.header{width: 1450px;height: 106px;background: #303030;margin: 0 auto;
}
.header-top{width: 100%;height: 36px;
}
.header-logo{display: block;margin-left: 116px;
}
.header-bottom{width: 100%;height: 70px;background: white;
}
.header-top span{float: right;margin-right: 30px;font-size: 12px;color: #c0c0c0;height: 100%;line-height: 25px;
}
.header-nav{width: 630px;height: 100%;/* background: rosybrown; */
}
.header-nav li{float: left;height: 100%;width: 105px;text-align: center;line-height: 70px;color: 1b1b1b;font-size: 12px;
}
.header-nav li:hover{color: #fdfdfd ;background: #303030;
}/* 2.广告图banner */
.banner{width: 1450px;height: 576px;margin: 0 auto;
}/* 3.列表list */
.list{width: 1000px;height: 450px;/* background: pink; */margin: 0 auto;
}
.list-nav{width: 230px;height: 350px;background: white;border: 1px solid #d2d2d2;margin: 50px 7px;
}
.list-nav-top{width: 200px;height: 266px;margin: auto 16px;/* background:cyan; */border-bottom: dotted #d2d2d2;}
.logo-box{width: 104px;height: 104px;background: #666666;border-radius: 50%;display: flex;margin: 24px auto;
}
.logo-box>img{margin: auto;
}
.list-nav h2{font-size: 16px;font-weight: bolder;color: #2c2c2c;text-align: center ;margin-bottom: 18px;
}
.list-nav h5{font-size: 12px;color: #484848 ;text-align: center;margin-bottom: 12px;
}
.list-nav-bottom{width: 100%;height: 57px;/* background: red; */display: flex;
}
.list-nav-bottom p{width: 120px;height: 36px;line-height: 36px;font-size: 12px;color: #484848 ;text-align: center; /* background: darkcyan; */margin:auto;border: 1px solid #d2d2d2; border-radius: 5px;
}/* 4.案例case */
.case{width: 1450px;height: 626px;background: #ebebeb;margin:0 auto;
}
.case-title{width: 1000px;height: 72px;margin: 0 auto;
}
.case-title span:first-child{display: block-inline;height: 72px;line-height: 72px;font-weight: 900;font-size: 24px;color: #a2a2a2;margin-right: 10px;
}
.case-title span:last-child{display: block-inline;height: 72px;line-height: 72px;font-size: 14px;font-weight: 600;color: #0f0f0f;margin-right: 10px;
}
.case-content{width: 1000px;height:525px;background: white;margin: 0 auto;
}
.case-left{width: 406px;height: 100%;padding-top: 1px;
}
/* 视频推荐 */
.case-left h1{font-size: 15px;color: #a0a0a0;margin: 34px auto 31px 20px;
}
/* 与星共舞 */
.case-left h2{display: block;width: 100%;/* height: 40px; */height: 16px;/* 此处要处理margin-top连同父盒子会下拉的bug问题 */margin-top: 24px;margin-left: 20px;font-size: 16px;color: #353535;
}
/* 2015-08-21 */
.case-left h3{width: 100%;height: 38px;line-height: 38px;font-size: 10px;color: #b2b2b2;border-bottom: 2px solid #f4f4f4;margin-left: 20px;
}
/* 与星共舞是指... */
.case-left h4{color:#858585;font-size: 12px;padding: 20px;line-height: 20px;
}
.case-right{width: 594px;height: 100%;background: #ebebeb;
}
.case-list{height: 250px;width: 288px;background: #fff;margin:0px -5px 20px 14px;
}
.case-list h5{height: 14px;margin: 13px auto 11px 16px;font-size: 14px;color: #3a3a3a;
}
.case-list h6{color: #bbbbbb;font-size: 9px;margin-bottom:18px;margin-left: 16px;
}/* 5.关于我们about */
.about{width: 1000px;/* height: 360px; */height: 320px;margin: 10px auto;
}
.about-top{width: 1000px;height: 224px;border: 2px solid #d2d2d2;
}
.about-left{width: 620px;/* height: 160px; */height: 110px;
}
.about-left tr{float: left;display: block;width: 150px;padding: 30px 0;text-align: center;
}
.about-left td{border-right:2px dotted #ebebeb;
}
td:nth-child(1){margin-top: 32px;margin-bottom: 20px;color: #363636;font-size: 14px;/* background: chocolate; */
}
td:not(td:nth-child(1)){font-size: 12px;line-height: 24px;color: #7a7a7a;
}
.about-left td{display: block;font-size: 12px;
}
.about-right{/* width: 378px; */width: 318px;/* height: 224px; *//* height: 158px; */height: 48px;padding-left: 60px;padding-top: 66px;padding-bottom: 110px;
}
.about-right span:nth-child(2){color: #ae3131;
}
.about-right span:nth-child(4){color: #ae3131;
}
/* 友情链接 */
.about-bottom{width: 1000px;height: 94px;/* background: lightseagreen; */margin-top: -9px;float: left;border: 2px solid #d2d2d2;border-top: none;
}
.about-bottom p{/* height: 60px; */height: 43px;padding-top: 17px;padding-left: 18px;
}
.about-bottom span{margin-right: 10px;
}
.about-bottom span:nth-child(1){font-size: 14px;color: #000;
}
.about-bottom span:nth-child(2){font-size: 9px;color: #b2b2b2;
}
.about-bottom span:nth-child(3){font-size: 9px;color: #b2b2b2;
}
.about-bottom li{ float: left;padding-left: 30px ;color: #ababab;font-size: 12px;
}/* 7.底部footer */
.footer{width: 1450px;height: 82px;background: #232323;margin: 0 auto;text-align: center;
}
.footer p{/* height: 82px; */height: 32px;padding-top: 50px;
}
.footer span{font-size: 12px;color: #7c7c7c;
}
拓展内容:window对象
0.window对象是所有对象的父对象,默认一直存在
1.window对象的属性与方法
属性:(实际上就是获取当前可视窗的宽高)
主流:window.innerWIdth/兼容IE浏览器:document.document.documentElement.ClientWidth
方法:
alert弹窗/prompt/comfirm确认/open和close
2.window有两个常用的内置子对象history和location
history:
属性:length返回当前窗口的历史记录的数量
方法:forword前进/back后退/go(num)去往num个历史记录
location:
属性:href返回url/search返回?后内容/hash返回#后内容
方法:reload刷新页面
3.window的三个事件
onload等待刷新/onscroll滚动条/onresize窗口大小改变
相关文章：
网页HTML编写练习:华语榜中榜
网页效果 HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice…...
C++ 编程基础：深入理解 `pair`（键值对） 和 `unordered_map`（无序映射）
C 编程基础：深入理解 pair（键值对） 和 unordered_map（无序映射） 在 C 标准库中，pair（键值对）和 unordered_map（无序映射）是两种常用的数据结构，它…...
高德动态地图
1.搭建页面结构 <div class"dataAllBorder02" style"position: relative; overflow: hidden;"><div class"map_title_box" style"height: 6%"><div class"map_title_innerbox"><div class"map_t…...
springboot集成camunda学习与使用
springboot集成camunda学习与使用.md 0、前言一、Spring Boot 集成camunda流程引擎1.新建全新的springboot工程2.添加pom.xml依赖3.启动Spring Boot工程4.切换成mysql数据库5.设计并部署一个BPMN流程6.camunda流程引擎测试6.1 通过camunda web控制台测试6.2 通过camunda rest接…...
微服务架构学习笔记
#1024程序员节|征文# 微服务架构作为现代软件开发中的热门技术架构，因其灵活性和可扩展性，逐渐成为许多企业系统设计的首选。以下是关于微服务的一些学习笔记，涵盖微服务的核心概念、优缺点、设计原则以及常用工具等方面。 1. 微服务是什么&…...
代码优化之简化if臃肿的判断条件
简化if判断条件 方法1： #include <iostream> #include <vector> #include <functional>// 封装参数的结构体 struct ConditionParams {int facenum;double zoomRatio;int iso;double facelv;int face_w;double qualityScore;int xx;int yy; };//…...
【OpenAI】第六节（语音生成与语音识别技术）从 ChatGPT 到 Whisper 的全方位指南
前言 在人工智能的浪潮中，语音识别技术正逐渐成为我们日常生活中不可或缺的一部分。随着 OpenAI 的 Whisper 模型的推出，语音转文本的过程变得前所未有的简单和高效。无论是从 YouTube 视频中提取信息，还是将播客内容转化为文本，…...
Docker 下备份恢复oracle
1.docker导出容器镜像 ##docker save -o 导出后的镜像名称.tar 容器名称|镜像id docker save -o oracle_11g.tar 3fa112fd3642 2.下载镜像上传镜像略 3.加载镜像 ##docker load -i <archive_file> docker load -i oracle11g11201.tar 4.添加版本号…...
oneplus3t-android_framework
0.确认oneplus6 root正常 oneplus6 root材料 oneplus6手机恢复出厂设置 ， 或者 线刷 enchilada_22_K.52_210716_repack--HOS-10.0.11.zip ： https://gitee.com/OnePlus6-brick-enchilada_22_K_52_210716_repack-HOS-10_0_11-zip OnePlus6Hydrogen_22…...
偷懒总结篇|贪心算法|动态规划|单调栈|图论
由于这周来不及了，先过一遍后面的思路，具体实现等下周再开始详细写。 贪心算法 这个图非常好 122.买卖股票的最佳时机 II(妙，拆分利润) 把利润分解为每天为单位的维度，需要收集每天的正利润就可以，收集正利润的区间…...
C语言初阶七：C语言操作符详解(1)
#1024程序员节|征文# 这篇文章是对之前文章中操作符的补充，可以看之前的文章：C语言初阶：六.算数操作_如何用编程表示除法-CSDN博客 C语言操作符是用于执行各种运算和操作的符号。包括算术操作符（如、-、*、/、%）&#…...
GO excelize 读取excel进行时间类型转换（自动转换）
GO excelize 读取excel进行时间类型转换（自动转换） 需求分析 需求：如何自动识别excel中的时间类型数据并转化成对应的 "Y-m-d H:i:s"类型数据。 分析：excelize在读取excel时，GetRows() 返回的都是字符串类…...
【算法与数据结构】二分查找思想
#1024程序员节｜征文# 正文： 二分查找（binary search）是一种基于分治策略的高效搜索算法。它利用数据的有序性，每轮缩小一半搜索范围，直至找到目标元素或搜索区间为空为止，其实有时候数据没有序…...
PHP PDO：安全、灵活的数据持久层解决方案
PHP PDO：安全、灵活的数据持久层解决方案 PHP PDO（PHP Data Objects）是一个轻量级的、具有兼容接口的数据持久层抽象层。它提供了一个统一的API来访问多种数据库系统，如MySQL、PostgreSQL、SQLite、Oracle等。PDO扩展在PHP 5.1.0…...
九、Linux实战案例：项目部署全流程深度解析
Linux实战案例：项目部署全流程深度解析 在当今信息技术领域，Linux服务器凭借其卓越的稳定性、安全性以及强大的性能表现，被广泛应用于各类项目部署场景之中。本文将全面深入地介绍如何将一个项目成功部署至Linux服务器的完整流程，…...
GIS常见前端开发框架
#1024程序员节｜征文# 伴随GIS的发展，陆续出现了众多开源地图框架，这些地图框架与众多行业应用融合，极大地拓展了GIS的生命力，这里介绍几个常见的GIS前端开发框架，排名不分先后。 1.Leaflet https://leafl…...
Java | Leetcode Java题解之第506题相对名次
题目： 题解： class Solution {public String[] findRelativeRanks(int[] score) {int n score.length;String[] desc {"Gold Medal", "Silver Medal", "Bronze Medal"};int[][] arr new int[n][2];for (int i 0; i &…...
数据结构 - 堆
今天我们将学习新的数据结构-堆。 01定义 堆是一种特殊的二叉树，并且满足以下两个特性： （1）堆是一棵完全二叉树； （2）堆中任意一个节点元素值都小于等于（或大于等于）左…...
html----图片按钮，商品展示
源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图标</title><style>.box{width:…...
YOLOv11改进策略【卷积层】| ECCV-2024 小波卷积WTConv 增大感受野，降低参数量计算量，独家创新助力涨点
一、本文介绍 本文记录的是利用小波卷积WTConv模块优化YOLOv11的目标检测网络模型。WTConv的目的是在不出现过参数化的情况下有效地增加卷积的感受野，从而解决了CNN在感受野扩展中的参数膨胀问题。本文将其加入到深度可分离卷积中，有效降低模型参数量和计算量，并二次创新C3…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...