四个现实中的商品样例,帮助你理解如何使用css【前端CSS入门样例】

实现商品列表

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品列表图片</title>
		<style>
			.row > img {
				width: 15%;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<img src="image/00001.jpg" alt="">
			<img src="image/00002.jpg" alt="">
			<img src="image/00003.jpg" alt="">
			<img src="image/00004.jpg" alt="">
			<img src="image/00005.jpg" alt="">
			<img src="image/00006.jpg" alt="">
		</div>
		<div class="row">
			<img src="image/00007.jpg" alt="">
			<img src="image/00008.jpg" alt="">
			<img src="image/00009.jpg" alt="">
			<img src="image/00010.jpg" alt="">
			<img src="image/00011.jpg" alt="">
			<img src="image/00012.jpg" alt="">
		</div>
	</body>
</html>
 
 
实现排行榜效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排行榜</title>
		<style>
			#rank-list td {
				font-size: 1.1em;
				padding-top: 3px;
				padding-bottom: 3px;
			}
			
			a {
				text-decoration: none;
				color: blue;
			}
			
			.num > span{
				color: darkgray;
			}
			
			.boil {
				background-color: red;
				color: white;
				border-radius: 5px;
				font-size: 0.85em;
				padding: 1px 2px 1px 2px;
			}
			
			.hot {
				background-color: coral;
				color: white;
				border-radius: 5px;
				font-size: 0.85em;
				padding: 1px 2px 1px 2px;
			}
			
			.new {
				background-color: orange;
				color: white;
				border-radius: 5px;
				font-size: 0.85em;
				padding: 1px 2px 1px 2px;
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="container">
			<table id="rank-list">
				<tr>
					<td><span><img src="image/top-one.png" alt="" width="20px"></span></td>
					<td><a href="#">中国空间站第三棒全力开跑</a></td>
				</tr>
				<tr>
					<td class="num"><span style="color: red;">1</span></td>
					<td><a href="#">#2022高考作文来了# <span class="boil"></span></a></td>
				</tr>
				<tr>
					<td class="num"><span style="color: coral;">2</span></td>
					<td><a href="#">深圳回应“50辆宾利堵车位”纠纷 <span class="hot"></span></a></td>
				</tr>
				<tr>
					<td class="num"><span style="color: orange;">3</span></td>
					<td><a href="#">回头看高考青春永不老 <span class="hot"></span></a></td>
				</tr>
				<tr>
					<td class="num"><span>4</span></td>
					<td><a href="#">不出意外今年高考又出现了这些意外</a></td>
				</tr>
				<tr>
					<td class="num"><span>5</span></td>
					<td><a href="#">考生忘带准考证家长又送错考场  <span class="new"></span></a></td>
				</tr>
				<tr>
					<td class="num"><span>6</span></td>
					<td><a href="#">苹果用3分钟正式宣战新行业</a></td>
				</tr>
				<tr>
					<td class="num"><span>7</span></td>
					<td><a href="#">5名考生“组团”跑错考点交警转送  <span class="new"></span></a></td>
				</tr>
				<tr>
					<td class="num"><span>8</span></td>
					<td><a href="#">俄罗斯卢布如何做到“惊天逆转”  <span class="new"></span></a></td>
				</tr>
				<tr>
					<td class="num"><span>9</span></td>
					<td><a href="#">美国最大水库因干涸发现多具藏尸</td>
				</tr>
				<tr>
					<td class="num"><span>10</span></td>
					<td><a href="#">60秒看各地家长花式送考</td>
				</tr>

			</table>
		</div>
	</body>
</html>

实现棋盘效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2591实现棋盘效果</title>
		<style>
			.container {
				width: 600px;
				height: 600px;				
				border: 5px solid black;
				margin: auto;
				display: flex;
			}
			
			.black {
				background-color: black;
				width: 200px;
				height: 200px;
			}
			.white {
				background-color: white;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div>
				<div class="black"></div>
				<div class="white"></div>
				<div class="black"></div>
			</div>
			<div>
				<div class="white"></div>
				<div class="black"></div>
				<div class="white"></div>
			</div>
			<div>
				<div class="black"></div>
				<div class="white"></div>
				<div class="black"></div>
			</div>
		</div>
	</body>
</html>
电话按键

在这里插入图片描述

    <table width="400px" border="1px" cellspacing=0>
        <tr class="one">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr class="two">
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr class="three">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>


    <style>
        table, td {
            text-align: center;
        }


        .one {
            color:red;
            text-decoration: underline;
        }


        .two {
            color: green;
            text-decoration: line-through;
        }


        .three {
            color: blue;
            font-weight: 900;
        }
      </style>
 
 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C/C++ 程序 IDE 开发工具 CLion

下载地址&#xff1a; https://www.jetbrains.com/clion/ https://www.jetbrains.com/clion/ 下载地址&#xff1a; https://www.jetbrains.com/clion/download/ https://www.jetbrains.com/clion/download/ 历史版本&#xff08;老版本&#xff09;下载地址&#xff1a; h…

计算机科学cs/电子信息ei面试准备——python复习|理解题|简答题

目录 1 请简要概述python技术的主要应用场景? 2 python的基本数据类型是那几种? 3 python数组和列表有什么区别? 4 Python中的函数是什么&#xff1f; 5 请写出删除列表中的元素有几种方式? 6 描述python函数中递归的理解? 7 请介绍join()和split()的区别? 8 介绍…

每天五分钟机器学习:多项式非线性回归模型

本文重点 在前面的课程中,我们学习了线性回归模型和非线性回归模型的区别和联系。多项式非线性回归模型是一种用于拟合非线性数据的回归模型。与线性回归模型不同,多项式非线性回归模型可以通过增加多项式的次数来适应更复杂的数据模式。在本文中,我们将介绍多项式非线性回…

dpdpdp

这里写目录标题 139. 单词拆分322. 零钱兑换300. 最长递增子序列120. 三角形最小路径和64. 最小路径和63. 不同路径 II5. 最长回文子串&#xff08;回文dp&#xff09;⭐97. 交错字符串⭐&#xff08;抽象成路径问题&#xff09;221. 最大正方形⭐ 139. 单词拆分 class Soluti…

文心千帆为你而来

1. 前言 3月16号百度率先发布了国内第一个人工智能大语言模型—文心一言。文心一言的发布在业界引起了不小的震动。而文心一言的企业服务则由文心千帆大模型平台提供。文心千帆大模型平台是百度智能云打造出来的一站式大模型开发与应用平台&#xff0c;提供包括文心一言在内的…

Observability:Synthetic monitoring - 动手实践

在我之前的如下文章里&#xff1a; Observability&#xff1a;Synthetic monitoring - 合成监测入门&#xff08;一&#xff09;&#xff08;二&#xff09; Observability&#xff1a;Synthetic monitoring - 创建浏览器监测&#xff0c;配置单独的浏览器监测器及项目 我详…

408-2009

一、选择题&#xff08;2 分/题&#xff09; 1.为解决计算机主机与打印机之间速度不匹配问题&#xff0c;通常设置一个打印数据缓冲区&#xff0c;主机将要输出的数据一次写入该缓冲取&#xff0c;而打印机则依次从该缓冲区中取出数据。该缓冲区的逻辑结构应该是______。 A.栈 …

【JavaEE】Servlet常用的API

目录 前言 一、HttpServlet类 1、Servlet的生命周期 ✨tomcat的两个端口 ✨设置告诉浏览器使用那种字符集解析响应 ✨Java中Unicode和utf8字符集的使用 二、HttpServletRequest类 1、获取请求的信息 2、 前端给后端传递数据的三种方式 2.1、通过query string传递 2.2…

【云原生】Prometheus 监控系统的初步了解与系统搭建

前言 promethues是一个开源的系统监控和报警系统&#xff0c;现在已经加入到CNCF基金会&#xff0c;成为继k8s之后第二个在CNCF托管的项目&#xff0c;在kubernetes容器管理系统中&#xff0c;通常会搭配prometheus进行监控&#xff0c;同时也支持多种exporter采集数据&#x…

S32K144 GPIO外设分析

1. S32K144 GPIO外设特性 下面的内容来自于S32K用户手册的翻译&#xff0c;或者网上关于S32K系列的一些pdf文件介绍。有些内容可能会出现理解不到位或者翻译错误方面&#xff0c;如果大家有疑问最好可以查阅用户手册。 GPIO和PORT的数量 从用户手册&#xff0c;对于PCR&#x…

【广州华锐互动】列车人员疏散VR虚拟演练系统

随着科技的不断发展&#xff0c;虚拟现实(VR)技术已经逐渐应用于各个领域。在火车站安全方面&#xff0c;为了提高旅客的安全意识和应对突发事件的能力&#xff0c;列车人员疏散VR虚拟演练系统应运而生。 列车人员疏散VR虚拟演练系统是一种基于虚拟现实技术的教育培训系统&…

15 QMessageBox消息对话框

错误提示对话框 信息提示对话框 循环对话框 默认是Yes和No&#xff0c;可以修改属性。第5个参数关联回车键 QMessageBox::Save | QMessageBox::Cancel 可以通过捕获按键获取点击结果 警告提示 代码&#xff1a; //QMessageBox 消息对话框//错误提示QMessageBox::critical(th…

老年公寓人员定位管理系统:提升安全与关怀的智能解决方案

老年公寓作为提供安全居住环境和关怀服务的重要场所&#xff0c;面临着人员管理和安全控制的挑战。为了解决这些问题&#xff0c;老年公寓人员定位管理系统应运而生。基于为提供全面的安全管理和个性化关怀服务&#xff0c;华安联大便通过老年公寓人员定位管理系统的技术原理、…

[数据结构 -- C语言] 二叉树(BinaryTree)

目录 1、树的概念及结构 1.1 树的概念 1.2 树的相关概念&#xff08;很重要&#xff09; 1.3 树的表示 2、二叉树的概念及结构 2.1 概念 2.2 特殊二叉树 2.3 二叉树的性质&#xff08;很重要&#xff09; 2.4 练习题 2.5 二叉树的存储结构 2.5.1 顺序存储 2.5.2 链…

微服务保护——Sentinel【快速入门】

一、雪崩问题&#x1f349; (一) 什么是雪崩&#x1f95d; 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。服务D故障引起服务A故障&#xff0c;服务A引起其他服务故障&#xff0c;渐渐导致所有微服务都不可用。有人…

基础算法(三)

目录 一、双指针算法 二、位运算 三、区间合并 一、双指针算法 双指针算法模板: for(int i 0,j 0;i < n;i) {while(j < i && check(i,j)) j;//每道题的具体逻辑 } 1.1两个指针指向两个队列1.2两个指针指向一个队列 案例习题: 分割字符串 #include<…

4-2 3D images: Volumetric data Representing tabular data

本文所用到的资料下载地址 By stacking individual 2D slices into a 3D tensor, we can build volumetric data representing the 3D anatomy of a subject. We just have an extra dimension, depth, after the channel dimension, leading to a 5D tensor of shape N C D…

[MySQL]MySQL事务特性

[MySQL]MySQL事务 文章目录 [MySQL]MySQL事务1. 事务的概念2. 为什么会出现事务3. 事务的版本支持4. 事务的提交方式5. 事务常见操作方式6. 事务隔离级别事务隔离级别概念查看事务的隔离级别设置事务的隔离级别读未提交&#xff08;Read Uncommitted&#xff09;读提交&#xf…

【力扣算法20】之 8. 找出字符串中第一个匹配项的下标 (python方向)

文章目录 问题描述示例1示例2提示 思路分析代码分析完整代码详细分析运行效果截图调用示例运行结果 完结 问题描述 给你两个字符串 haystack 和 needle &#xff0c;请你在haystack字符串中找出needle字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 n…

htmlCSS-----浮动

目录 前言&#xff1a; 浮动 1.浮动的效果 2.浮动的特点 3.浮动的写法 4.浮动的原理 5.浮动的作用 6.案例 7.浮动的缺陷与解决方式 浮动问题 解决方式 8.补充说明 前言&#xff1a; 浮动是html里面重要的一部分&#xff0c;前面我们学习了三种元素的类型&#xff08;…
最新文章