当前位置： 首页 > news >正文

htmlCSS-----案例展示

news 2026/5/18 9:09:11

目录

前言

作品效果

html代码

CSS代码 

图片资源 

前言

        在学习html过程中我们要试着去写写一些案例，通过这些案例让我们更加熟悉代码以及丰富我们的经验，下面是我个人写的一个案例，代码和图片也给出了大家，你们可以参考参考。 

作品效果

1691670295000

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>Document</title><link rel="stylesheet" href="./work.css">
</head>
<body><div class="box"><!-- 1部分 中心部分图案--><div class="box_content"><div class="first"><div class="second"><img src="../image/OIP-C.jpg" alt="" width="820px" height="340px"></div><div class="boy"><ul><li>波奇酱</li><li>虹夏</li><li>凉</li><li>喜多</li></ul></div></div><div class="third"><div class="new_bo"><ul><li>波奇酱</li><li>喜多</li><li>虹夏</li><li>凉</li></ul></div><div class="new_titel"><h2>new!波奇酱加入了纽带乐队并且进行了首场演出</h2></div><div class="new_content"><ul><li><span>第一天</span><span>波奇酱在家里练习吉他</span><span>8.12</span></li><li><span>第二天</span><span>虹夏介绍波奇酱加入纽带乐队，波奇酱成为了吉他手</span><span>8.13</span></li><li><span>第三天</span><span>喜多同学回归纽带乐队</span><span>8.14</span></li><li><span>第四天</span><span>凉学姐吃饭没钱，向波奇酱借钱</span><span>8.15</span></li><li><span>第五天</span><span>波奇酱报名参加学校的文艺表演((⁄ ⁄•⁄ω⁄•⁄ ⁄))</span><span>8.16</span></li><li><span>第六天</span><span>纽带乐队成员为演出做准备</span><span>8.17</span></li></ul></div><a href="https://www.bilibili.com/bangumi/play/ss43164?spm_id_from=333.337.0.0" style="font-size: 12px;text-decoration: none;" target="_blank"><div class="new_more"><span>查看更多</span></div></a></div></div><!-- 2部分 侧边图案--><div class="page"><ul><li><i></i><div>虹夏</div></li><li><i></i><div>凉</div></li><li><i></i><div>喜多</div></li><li><i></i><div>波奇酱</div></li></ul></div></div>
</body>
</html>

CSS代码 

*{margin: 0px;padding: 0px;list-style: none;
}.box_content{width: 1358px;margin: 0 auto;margin-top: 100px;background-color: white;
}
.first{width: 820px;height: 380px;float: left;
}
.box_content::after{clear: both;display: block;content: "";
}
.second{width: 820px;height: 340px;background-color: burlywood;}
.boy{width: 820px;height: 40px;background-color: rgb(233, 12, 145);
}
.third{width: 520px;height: 380px;/* background-color: red; */float: right;/* background-image: url(../image/20230714234449.gif); */background-size: 520px 380px;
}
ul::after{content: '';display: block;clear: both;
}
.boy ul{background-color: #eee;
}
.boy ul li{text-align: center;list-style: none;width:25%;height: 40px;color:palevioletred;float: left;box-sizing: border-box;line-height: 40px;
}
.boy ul>li:hover{color:blue;background-color: #fff;border-bottom:2px solid #AB8E66;font-weight: 600;
}.new_bo{width: 100%;height: 35px;border-bottom: 2px solid #dbdada;
}
.new_bo ul li{list-style: none;float: left;height: 35px;font-size: 18px;margin-right: 125px;font-weight: 300;
}.new_bo li:nth-of-type(4){margin: 0;
}.new_bo ul li:hover{color: #1da6ba;font-weight: 700;border-bottom: 2px solid red;
}
.new_titel{width: 100%;height: 60px;
}
.new_titel h2{color: #1da6ba;height: 60px;box-sizing: border-box;line-height: 60px;border-bottom: 2px solid #dbdada;text-align: center;padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.new_content{height: 245px;width: 100%;box-sizing: border-box;
}
.new_content ul li{height: 40px;border-bottom: 1px solid #dbdada;line-height: 40px;list-style: none;font-size: 14px;font-weight: 300;
}
.new_content ul li span:nth-of-type(1){border: 1px solid red;padding: 1px 2px;margin-right: 10px;
}
.new_content ul li span:nth-of-type(2){padding: 1px 2px;margin-right: 10px;width: 80%;/* 文字超出处理 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.new_content ul li span:nth-of-type(2):hover{color: #e9852d;font-weight: 600;
}
.new_content ul li span:nth-of-type(3){float: right;}
.new_more{height: 40px;line-height: 40px;font-size: 12px;background-color: #e3e2e2;text-align: center;
}
.new_more:hover{color: blueviolet;font-weight: 600;background-color: gainsboro;font-size: 16px;
}
.page ul{list-style: none;width: 66px;height: px;background-color:#e3e2e2;/* 描述圆角边框 */border-top-left-radius:5px;border-bottom-left-radius: 5px;position: absolute;right: 0;top: 50%;/* border: 2px solid red; */box-sizing: border-box;
}
.page ul li{height: 57px;padding-top: 10px;width: 66px;/* border: 2px solid red; */
}
.page ul li:nth-of-type(1) i{display: block;width: 23px;height: 30px;background-image: url(../image/虹夏.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;/* 过渡准备 */position: relative;top: 0;transition: all 0.2s;
}
.page ul li div{text-align: center;margin: 0 auto;font-size: 12px;width: 66px;font-weight: 400;color: #1da6ba;/* border: 2px solid red; */
}
.page ul li:nth-of-type(2) i{display: block;width: 23px;height: 30px;background-image: url(../image/凉.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;position: relative;top: 0;transition: all 0.2s;
}
.page ul li:nth-of-type(3) i{display: block;width: 23px;height: 30px;background-image: url(../image/c9fcc3cec3fdfc03924559cff0699094a4c27d1e8834.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;position: relative;top: 0;transition: all 0.2s;
}
.page ul li:nth-of-type(4) i{display: block;width: 23px;height: 23px;background-image: url(../image/波奇.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;position: relative;top: 0;transition: all 0.2s;
}
.page ul li:hover div{font-weight: 500;font-size: 16px;
}
.page ul li:hover i{top: -6px;
}

图片资源 

 

 好了，以上就是本期的全部内容了，我们下一期再见，再分享一张壁纸给大家~

 

相关文章：

htmlCSS-----案例展示

目录 前言 作品效果 html代码 CSS代码 图片资源 前言 在学习html过程中我们要试着去写写一些案例&#xff0c;通过这些案例让我们更加熟悉代码以及丰富我们的经验&#xff0c;下面是我个人写的一个案例&#xff0c;代码和图片也给出了大家&#xff0c;你们可以参考参考。…...

编程日记 2023/8/17 22:40:25

Android进阶之路 - 去除EditText内边距

正如题名&#xff0c;在Android中的EditText是自带内边距的&#xff0c;常规而言设置背景为null即可&#xff0c;但是因为使用了并不熟悉的声明式框架&#xff0c;本是几分钟解决的事儿&#xff0c;却花费了小半天~ 其实这只是一个很简单的小需求&#xff0c;不想却遇到了一些小…...

编程日记 2023/8/17 22:39:24

ModStartCMS v7.0.0 多语言开发优化，多个常用组件升级

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议&#xff0c;免费且不限制商业使用。 功能特性 丰富的模块市…...

编程日记 2023/8/17 22:38:23

一百五十八、Kettle——Kettle各版本及其相关安装包分享（网盘链接，不需积分、不需验证码） 持续更新、持续分享

一、目的 最近因为kettle9.3的shim问题看了好多博客&#xff0c;都没有网盘分享。后来有一位博主分享了kettle9.2的shim安装包&#xff0c;已经很感谢他&#xff0c;但是是博客分享&#xff0c;下载还需要搞验证码下载码之类的。 kettle9.2的shim安装包下载好后&#xff0c;一…...

编程日记 2023/8/17 22:37:21

【通俗易懂】如何使用GitHub上传文件，如何用git在github上传文件

目录 创建 GitHub 仓库 使用 Git 进行操作 步骤 1&#xff1a;初始化本地仓库 步骤 2&#xff1a;切换默认分支 步骤 3&#xff1a;连接到远程仓库 步骤 4&#xff1a;获取远程更改 步骤 5&#xff1a;添加文件到暂存区 步骤 6&#xff1a;提交更改 步骤 7&#xff1a…...

编程日记 2023/8/17 22:36:17

计算机视觉之三维重建(二)(摄像机标定)

标定示意图 标定目标 P ′ M P w K [ R T ] P w P^{}MP_wK[R \space T]P_w P′MPw​K[R T]Pw​ 其中 K K K为内参数&#xff0c; [ R T ] [R \space T] [R T]为外参数。该式子需要使用至少六对内外点对进行求解内外参数&#xff08;11个未知参数&#xff09;。 其中 R 3 3 …...

编程日记 2023/8/17 22:35:16

PHP面向对象面试题

1、简述面对对象六大设计原则 &#xff1f; 面向对象六大设计原则是一组指导软件设计的原则&#xff0c;它们有助于提高代码的可维护性、可扩展性和可重用性。这些原则是&#xff1a; 单一职责原则&#xff08;Single Responsibility Principle&#xff0c;SRP&#xff09;&a…...

编程日记 2023/8/17 22:34:15

6G 特点及表现

6G R&D Vision: Requirements and Candidate Technologies 5G已经提出来了大移动带宽&#xff0c;低时延和大规模机器互联&#xff0c;在这个基础上&#xff0c;6G加上了高可靠性&#xff0c;高定位精度和高智能化。 6G的主要候选技术&#xff0c;包括(子) THz 通信&#x…...

编程日记 2023/8/17 22:33:13

【Git】（一）基本操作

读完本文后&#xff0c;您会了解&#xff1a; 1、如何在本地配置GIT环境&#xff1f; 2、环境配置成功后&#xff0c;如何从远端下载一个已有仓库到本地? 1. 配置全局用户名、邮箱 git config --global user.name "username" git config --global user.email &q…...

编程日记 2023/8/17 22:32:11

Github下载任意版本的VsCode

下载历史版本VsCode(zip) 下载链接由三部分组成&#xff1a; 固定部分commit idVSCode-win32-x64-版本号.zip 固定部分&#xff1a; https://vscode.cdn.azure.cn/stable/ Commit id&#xff1a; 打开 vscode的GitHub&#xff1a;[https://github.com/microsoft/vscode/r…...

编程日记 2023/8/17 22:31:09

ThreadLocal（超详细介绍！！）

关于ThreadLocal&#xff0c;可能很多同学在学习Java的并发编程部分时&#xff0c;都有所耳闻&#xff0c;但是如果要仔细问ThreadLocal是个啥&#xff0c;我们可能也说不清楚&#xff0c;所以这篇博客旨在帮助大家了解ThreadLocal到底是个啥&#xff1f; 1.ThreadLocal是什么&…...

编程日记 2023/8/17 22:30:08

stable diffusion安装包和超火使用文档，数字人制作网址

一&#xff1a;文生图、图生图 1&#xff1a;stable diffusion&#xff1a;对喜欢二次元、美女小姐姐、大眼萌妹的人及其友好哈哈(o^^o) 1&#xff09;&#xff1a;秋叶大神安装包和模型包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/11_kguofh76gwhTBPUipepw 提…...

编程日记 2023/8/17 22:29:07

JVM——HotSpot的算法细节实现

一、根节点枚举 固定可作为GC Roots的节点主要在全局性的引用&#xff08;如常量或类静态属性&#xff09;与执行上下文&#xff08;如栈帧中的本地变量表&#xff09;中&#xff0c;尽管目标明确&#xff0c;但查找要做到高效很难。现在java应用越来越庞大&#xff0c;光方法区…...

编程日记 2023/8/17 22:28:06

高等数学教材重难点题型总结（三）微分中值定理和导数的应用

第三章&#xff0c;微分中值定理的证明题等&#xff0c;非常重要&#xff0c;需要牢牢掌握 1.证明中值定理对某函数在给定区间上的正确性 2.与中值定理有关的证明题 3.微分中值定理应用于求证不等式 4.洛必达法则求极限 5.洛必达的经典错误反例 6.按某项实现多项式幂展开 7.求带…...

编程日记 2023/8/17 22:27:05

神经网络基础-神经网络补充概念-39-梯度消失与梯度爆炸

简介 梯度消失和梯度爆炸是在深度神经网络中训练过程中可能出现的问题&#xff0c;导致模型难以训练或无法收敛。这些问题与反向传播算法中的梯度计算有关。 概念 梯度消失&#xff08;Gradient Vanishing&#xff09;&#xff1a;在深层神经网络中&#xff0c;特别是具有很…...

编程日记 2023/8/17 22:25:01

P12-Retentive NetWork-RetNet挑战Transformer

论文地址:https://arxiv.org/abs/2307.08621 目录 Abstract 一.Introduction 二.Retentive Networks 2.1Retention 2.2Gated Multi-Scale Retention 2.3Overall Architecture of Retention Networks 2.4Relation to and Differences from Previous Methods 三.Experime…...

编程日记 2023/8/17 22:23:58

数据库基础

什么是数据库&#xff1f; 数据库本质上也是一个文件&#xff0c;它是按照特定结构组织在一起的数据的集合&#xff01;是存储数据、管理数据、组织数据的一套解决方案&#xff01; 可是存储数据用文件就够了&#xff0c;为什么还要弄个数据库&#xff1f; 主要是因为&#xff…...

编程日记 2023/8/17 22:22:57

【RocketMQ】安装

文章目录 下载RocketMQ配置环境变量 下载RocketMQ 下载RocketMQ安装包 下载DashBoard 这里版本推荐选择4.9.x&#xff0c;因为比较稳定。 下载完毕之后&#xff0c;将安装包拖入到Linux环境。 之后使用unzip命令解压缩RocketMQ的安装包。 unzip ./rocketmq-all-4.9.2-bin-rel…...

编程日记 2023/8/17 22:21:54

二十二、策略模式

目录 1、项目需求2、传统方案解决鸭子问题的分析和代码实现3、传统方式实现存在的问题分析和解决方案4、策略模式基本介绍5、使用策略模式解决鸭子问题6、策略模式的注意事项和细节7、策略模式的使用场景 以具体项目来演示为什么需要策略模式&#xff0c;策略模式的优点&#x…...

编程日记 2023/8/17 22:20:53

[K8s]问题描述：k8s拉起来的容器少了cuda的so文件

问题解决&#xff1a;需要设置Runtimes&#xff1a;nvidia的同时设置Default Runtimenvidia...

编程日记 2023/8/17 22:19:51

网盘下载新革命：九大平台一键直链，告别客户端束缚

网盘下载新革命&#xff1a;九大平台一键直链&#xff0c;告别客户端束缚 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘…...

编程新知 2026/5/17 10:28:28

Linuxbonding链路稳定性治理方法

Linuxbonding链路稳定性治理方法这是一篇面向中级 Linux 使用者的技术文章&#xff0c;主题聚焦在bonding链路&#xff0c;重点讨论链路聚合、冗余切换和接口状态。在真实生产环境中&#xff0c;bonding链路相关问题往往不会以单一错误形式出现&#xff0c;而是混杂在日志、权限…...

编程新知 2026/5/17 8:39:23

Arm Cortex-X2/X3架构解析与性能优化实践

1. Arm Cortex-X2/X3集群架构概述在Armv9架构的高性能计算领域&#xff0c;Cortex-X2和X3代表了当前最先进的CPU设计理念。作为DynamIQ共享单元(DSU)的核心组件&#xff0c;它们通过可配置的缓存层次结构和智能一致性协议&#xff0c;为现代异构计算提供了灵活的解决方案。1.1 …...

编程新知 2026/5/17 8:28:10

ncmdumpGUI：3步解决网易云音乐ncm格式播放限制的终极方案

ncmdumpGUI&#xff1a;3步解决网易云音乐ncm格式播放限制的终极方案 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经在网易云音乐下载了心爱的歌曲…...

编程新知 2026/5/17 8:06:47

基于AutoHotkey的Windows桌面自动化工具开发实战

1. 项目概述与核心价值最近在整理个人项目库时&#xff0c;翻到了一个挺有意思的“老伙计”——cua_desktop_operator_skill。这个项目名听起来有点拗口&#xff0c;直译过来是“CUA桌面操作员技能”。乍一看&#xff0c;可能会让人联想到某种工业控制台的专用软件。但实际上&a…...

编程新知 2026/5/17 7:29:45

AI驱动全栈开发：Cursor集成模板与高效协作实践

1. 项目概述&#xff1a;当AI代码助手遇上全栈开发最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Cursor-FullStack-AI-App”。光看名字&#xff0c;你大概能猜到它和Cursor这个AI编程工具&#xff0c;以及全栈应用开发有关。作为一个在前后端都摸爬滚打过多年的开发者…...

编程新知 2026/5/17 6:31:51

火灾动力学模拟实战：如何用FDS构建精准的火灾预测系统

火灾动力学模拟实战&#xff1a;如何用FDS构建精准的火灾预测系统 【免费下载链接】fds Fire Dynamics Simulator 项目地址: https://gitcode.com/gh_mirrors/fd/fds 你是否曾面临这样的困境&#xff1a;当设计一栋大型商业建筑时&#xff0c;如何科学评估火灾时的人员疏…...

编程新知 2026/5/18 7:57:45

Arm Neoverse CMN-700多芯片架构与一致性哈希解析

1. Arm Neoverse CMN-700多芯片架构解析在现代高性能计算领域&#xff0c;多芯片系统架构已成为突破单芯片性能瓶颈的关键技术路径。Arm Neoverse CMN-700作为第二代一致性网状网络控制器&#xff0c;其设计哲学体现在三个维度&#xff1a;首先是通过模块化设计实现计算单元的可…...

编程新知 2026/5/17 4:58:16

基于BLE与UriBeacon标准，打造低成本物理网页信标实践指南

1. 项目概述&#xff1a;从蓝牙信标到物理网页的进化 几年前&#xff0c;当我第一次接触iBeacon时&#xff0c;就被这种“静默广播、主动感知”的物联网交互模式吸引了。一个小小的硬件&#xff0c;不用配对&#xff0c;就能让周围的手机知道它的存在&#xff0c;并触发相应的…...

编程新知 2026/5/18 7:36:11

Midjourney针孔摄影风格实战手册（含--s 120+--stylize微调对照表）：实测137组prompt，仅3组达成真实暗角衰减与中心锐度坍缩

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney针孔摄影风格的本质解构 针孔摄影&#xff08;Pinhole Photography&#xff09;并非一种后期滤镜&#xff0c;而是一种基于光学物理原理的成像范式——无镜头、小孔成像、无限景深、软焦边缘…...

编程新知 2026/5/18 5:35:31