任务01-03

最新推荐文章于 2024-08-08 11:48:45 发布
最新推荐文章于 2024-08-08 11:48:45 发布
阅读量80 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56515746/article/details/119032170
版权

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="css/index.css" type="text/css" rel="stylesheet"/>
		<title></title>
	</head>
	<body>
		<div class="main">
			<!-- 导航条 -->
			<div class="nav">
				<img src="img/a.png" />
				<a href="###" class="nav_frist">首页</a>
				<a href="###">招投标</a>
				<a href="###">机械加盟</a>
				<a href="###">行业资讯</a>
				<a href="###">关于我们</a>
			</div>
			<!-- 图片 -->
			<img src="img/k.png" />
			<!-- 招标信息 -->
			<p class="wenzi"><b>最新招标</b></p>
			<div class="content">
				<!-- 第一个模块 -->
				<div class="one">
					<img src="img/j.png" />
					<p class="one_font">科技出手，功力双收</p>
					<p>将军闭目弹整德，只因眼前无敌手。
					笔落才气冲星斗，龙翔凤霹势难收。
					满堂花醉三千客，一剑寒霜十四州。
					鼓角揭天嘉气冷，风涛地动海山秋。
					将军闭目弹箩筷，只因眼前无敌手。
					笔落才气冲星斗，龙翔凤嘉势难收。
					满堂花醉三千客，一剑寒霜十四州。
					鼓角揭天嘉气冷，风涛地动海山秋。</p>
					<div class="detail">
						了解详情>
					</div>
					<!-- 第二个模块 -->
					<div class="two">
					<img src="img/g.png" />
					<p class="one_font">科技出手，功力双收</p>
					<p>将军闭目弹整德，只因眼前无敌手。
					笔落才气冲星斗，龙翔凤霹势难收。
					满堂花醉三千客，一剑寒霜十四州。
					鼓角揭天嘉气冷，风涛地动海山秋。
					将军闭目弹箩筷，只因眼前无敌手。
					笔落才气冲星斗，龙翔凤嘉势难收。
					满堂花醉三千客，一剑寒霜十四州。
					鼓角揭天嘉气冷，风涛地动海山秋。</p>
					<div class="detail">
						了解详情>
					</div>
					</div>
					<!-- 第三个模块 -->
					<div class="one">
					<img src="img/f.png" />
					<p class="one_font">科技出手，功力双收</p>
					<p>将军闭目弹整德，只因眼前无敌手。
					笔落才气冲星斗，龙翔凤霹势难收。
					满堂花醉三千客，一剑寒霜十四州。
					鼓角揭天嘉气冷，风涛地动海山秋。
					将军闭目弹箩筷，只因眼前无敌手。
					笔落才气冲星斗，龙翔凤嘉势难收。
					满堂花醉三千客，一剑寒霜十四州。
					鼓角揭天嘉气冷，风涛地动海山秋。</p>
					<div class="detail">
						了解详情>
					</div>
					</div>
					<p class="wenzi"><b>招标信息</b></p>
					<!-- 第二个大板块 -->
					<div class="content_two">
						<div class="two_one">
						<img src="img/i.png" />
						<p class="one_font">科技出手，功力双收</p>
						<p>将军闭目弹整德，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤霹势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。
						将军闭目弹箩筷，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤嘉势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。</p>
					</div>
					<div class="two_two">
						<img src="img/h.png"/>
						<p class="one_font">科技出手，功力双收</p>
						<p>将军闭目弹整德，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤霹势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。
						将军闭目弹箩筷，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤嘉势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。</p>
					</div>
					<div class="two_three">
						<img src="img/d.png"/>
						<p class="one_font">科技出手，功力双收</p>
						<p>将军闭目弹整德，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤霹势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。
						将军闭目弹箩筷，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤嘉势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。</p>
					</div>
					<div class="two_four">
						<img src="img/c.png"/>
						<p class="one_font">科技出手，功力双收</p>
						<p>将军闭目弹整德，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤霹势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。
						将军闭目弹箩筷，只因眼前无敌手。
						笔落才气冲星斗，龙翔凤嘉势难收。
						满堂花醉三千客，一剑寒霜十四州。
						鼓角揭天嘉气冷，风涛地动海山秋。</p>
					</div>
					</div>
				</div>
				</div>
			</div>
			<p class="wenzi"><b>中标告示</b></p>
			<div class="content_three">
				<div class="three_one">
					<p style="font-size: 30px;">09</p>
					<p >2018年03月</p><br />
					<hr width="50px" color="black" class="jianju"/><br />
					<p>笔落才气冲星斗，龙翔凤嘉势难收。
					满堂花醉三千客，一剑寒霜十四州。</p>
					<div class="detail_two">详细></div>
				</div>
				<div class="three_two">
					<p style="font-size: 30px;">09</p>
					<p >2018年03月</p><br />
					<hr width="50px" color="black" class="jianju"/><br />
					<p>笔落才气冲星斗，龙翔凤嘉势难收。
					满堂花醉三千客，一剑寒霜十四州。</p>
					<div class="detail_two">详细></div>
				</div>
				<div class="three_three">
					<p style="font-size: 30px;">09</p>
					<p >2018年03月</p><br />
					<hr width="50px" color="black" class="jianju"/><br />
					<p>笔落才气冲星斗，龙翔凤嘉势难收。
					满堂花醉三千客，一剑寒霜十四州。</p>
					<div class="detail_two">详细></div>
				</div>
				<div class="sanjiaoxing"></div>
				<div class="erweima" align="center">
					<img src="img/b.png" /><br />
					<span>二维码</span>
				</div>
				<div class="last">
					<img src="img/a.png" style="margin-top: 100px; margin-left: 100px;"/><br />
					<span class="top">工作客户端</span>
					<span class="top">机械客户端</span><br />
					<div class="hezi">AppStore下载</div>
					<div class="hezi1">AppStore下载</div><br />
					<div class="hezi">AppStore下载</div>
					<div class="hezi1">AppStore下载</div>
				</div>
				<div class="banquan">
					<p>Copyright c 2015-2018轰隆隆honglonglong.All Rights Reserved.</p>
					<p class="banquan_one">京ICP备15045098号</p>
				</div>
			</div>
		</div>
	</body>
</html>

css:

.main{
	overflow: hidden;
}
.main .nav{
	height: 55px;
	background-color: rgb(50,72,128);
}
.nav img{
	margin-left: 200px;
	float: left;
}
.nav a{
	/* 去掉a标签下面的下划线 */
	text-decoration: none;
	margin-left: 100px;
	text-align: center;
	line-height: 55px;
	color: rgb(240,240,242);
}
.nav .nav_frist{
	margin-left: 200px;
}
.wenzi{
	text-align: center;
	font-size: 18px;
}
.content{
	margin-left: 320px;
}
.content .one{
	height: 295px;
	width: 1000px;
	border: 3px solid rgb(137,134,134);
	background-color: rgb(234,234,234);
}
.content .two{
	height: 295px;
	width: 1000px;
	border: 3px solid rgb(137,134,134);
	background-color: rgb(234,234,234);
	margin-top: 150px;
	margin-bottom: 10px;
}
.one img{
	float: left;
	margin-right: 25px;
}
.two img{
	float: right;
	margin: 0;
	margin-left: 20px;
}
.two p{
	margin-left: 20px;
}
.one_font{
	font-size: 20px;
	font-weight: bold;
}
.one .detail{
	width: 130px;
	height: 50px;
	border: 2px solid rgb(128,130,131);
	float: right;
	text-align: center;
	line-height: 50px;
	margin-right: 50px;
	margin-top: 30px;
	font-size: 20px;
}
.two .detail{
	width: 130px;
	height: 50px;
	border: 2px solid rgb(128,130,131);
	float: left;
	text-align: center;
	line-height: 50px;
	margin-left: 10px;
	margin-top: 30px;
	font-size: 20px;
}
.content_two .two_one{
	width: 500px;
	height: 250px;
	border: 1px solid white;
	float: left;
}
.content_two .two_three{
	width: 500px;
	height: 250px;
	float: left;
}
.content_three .three_one{
	width: 250px;
	height: 300px;
	background-color: rgb(244,247,251);
	margin-left: 320px;
}
.content_three .three_two{
	width: 250px;
	height: 300px;
	background-color: rgb(244,247,251);
	margin-left: 670px;
	margin-top: -330px;
}
.content_three .three_three{
	width: 250px;
	height: 300px;
	background-color: rgb(244,247,251);
	margin-left: 990px;
	margin-top: -330px;
}
.content_three .three_one p{
	margin-left: 10px;
}
.content_three .three_two p{
	margin-left: 10px;
}
.content_three .three_three p{
	margin-left: 10px;
}
.content_three .three_one .jianju{
	margin-left: 10px;
}
.content_three .three_two .jianju{
	margin-left: 10px;
}
.content_three .three_three .jianju{
	margin-left: 10px;
}
.content_three .three_one hr{
	float: left;
}
.content_three .three_two hr{
	float: left;
	margin-top: -110px;
}
.content_three .three_three hr{
	float: left;
	margin-top: -110px;
}
.content_three .three_one .detail_two{
	float: left;
	margin-left: 20px;
}
.content_three .three_two .detail_two{
	float: left;
	margin-left: 20px;
}
.content_three .three_three .detail_two{
	float: left;
	margin-left: 20px;
}
.last{
	height: 300px;
	background-color: rgb(50,72,128);
	margin-top: 200px;

}
.last img{
	float: left;
}
.last .top{
	margin-left: 100px;
	color: #FFFFFF;
}
.last .hezi{
	width: 110px;
	height: 30px;
	border:  1px solid #FFFFFF;
	margin-left: 100px;
	color: #FFFFFF;
	margin-bottom: 20px;
	display: inline-block;
	margin-top: 10px;
}
.last .hezi1{
	width: 110px;
	height: 30px;
	border:  1px solid #FFFFFF;
	margin-left: 50px;
	color: #FFFFFF;
	margin-bottom: 20px;
	display: inline-block;
	margin-top: 10px;
}
.banquan{
	height: 50px;
	background-color: black;
}
.banquan p{
	color: #FFFFFF;
	margin-left: 350px;
	text-align: center;
	display: inline-block;
}
.banquan .banquan_one{
	margin-left: 100px;
}
.erweima{
	width: 200px;
	height: 200px;
	float: right;
	background-color: #000000;
	margin-top:150px;
	margin-right: 150px;
	position: relative;
}
.erweima img{
	margin-top: 35px;
}
.erweima span{
	color: #FFFFFF;
	text-align: center;
}
.sanjiaoxing{
	width: 0px;
	border-bottom: 25px solid black;
	border-right: 25px solid black;
	border-left: 25px solid transparent;
	border-top: 25px solid transparent;
	margin-top: 150px;
	position: absolute;
	margin-left: 1480px;

}

 案例展示：

 

恬淡清风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-03-01
qq_40394645的博客
03-01 5063
运行gpedit.msc显示：找不到gpedit.msc请确定文件名是否正确在试一次 参考资料： 链接: 找不到gpedit.msc请确定文件名是否正确在试一次. 链接: 错误: 740 需要提升权限才能运行 DISM. 解决方案： 第一步：在电脑桌面上，点击电脑图标，打开电脑 第二步：点击查看，再打勾文件扩展名 第三步：右键电脑桌面的空白界面，新建文本文档.txt 第四步：将此段代码粘贴到文本文档中，并保存 @echo off pushd “%~dp0” dir /b C:\Windows\servi
【PB03F 超详细-环境搭建】蓝牙5.2安信可PB-03F-Kit开发板二次开发环境搭建
qq_44078824的博客
06-01 8553
PB-03是由深圳市安信可科技有限公司开发的蓝牙模块。本博文介绍安信可PB-03F-Kit开发板的基本情况、开发环境搭建，以及以点亮LED为例介绍程序编写和固件烧录的操作流程。 安信可PB-03F-Kit开发板使用的PHY6252这样一款高集成度的低功耗蓝牙系统级芯片(SoC)，专为物联网(IoT)、移动设备、可穿戴电子设备、智能家居等各种应用而设计。......
Java定时任务之--schedule与scheduleAtFixedRate异同
u011368399的专栏
01-16 3115
schedule 执行任务超时，第N个任务会在 N-1个任务执行完成后，不做period等待，立即启动执行；N任务执行未超时，N+1个任务会在N任务执行完成后，等待period，再执行。
分布式定时任务之XXL-JOB的配置使用
积跬步，至千里。
07-07 4118
XXL-JOB是一个分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。
TI-RTOS多任务编程
KingOfMyHeart的博客
03-21 2911
最近在做一些关于一些驱动向TI板子的移植集成的事情，在这里简单的记录一下。本文主要叙述如何进行多任务的编程，以及我在编程中遇到的一些不解。 Task组成部分：任务函数，任务参数（属性），任务堆栈. 实际上Task是sys/bios提供的一种并发编程手段，和我们常见到的线程是一个道理。 Task类型：硬中断HWI，软中断SWI，任务Task，空闲任务IDLE. 优先级排列：硬中断HWI&gt...
C1任务01-植物大战僵尸修改游戏存档(小白也能看懂)
rencheng11的博客
04-12 2122
C1任务-修改游戏存档 任务说明 1、修改《植物大战僵尸》的存档文件，能跳到指定关卡5-1 2、修改《植物大战僵尸》的存档⽂件，让你的游戏账户有1W⾦币 准备工作 1、工具软件Hex Editor Neo，Hex Editor Neo Ultimate是一款多功能的16进程编辑查看器，同时还支持二进制的文件查看，支持ASCII，十六进制，十进制，float，double和二进制数据等数据进行编辑和建立，通过Hex Editor Neo可以制作文件补丁或者批量对代码进行替换和代码查找等 2、植物大战僵尸游戏
Spring Boot定时任务spring-boot-starter-quartz通过@DisallowConcurrentExecution禁止任务并发执行
野猿新一
08-05 3007
在Spring Boot定时任务spring-boot-starter-quartz配置运行及测试这篇文章中我们简单介绍了Spring Boot中如何实现定时任务，但是有个问题，当任务的执行时长超过定时任务触发的间隔时，就会导致两个或多个任务并发在执行，如果我们不希望定时任务并发执行可以通过@DisallowConcurrentExecution注解来禁止并发。 下面通过简单的代码来演示定时任务并发和串行的情况，关于定时任务的配置先看这篇文章Spring Boot定时任务spring-boot-start
Python定时任务-APScheduler
热门推荐
wuyongpeng的专栏
03-29 2万+
目录 一，简介 1，安装APSchedule3.6.0 2，APScheduler四个组件 二，选择调度器、作业存储、执行器和触发器 1，schedulers调度器选择 2，jobstores作业存储选择 3，executors执行器选择 4，triggers触发器选择 三，调度器scheduler启动关闭和配置 1，启动调度器 2，关闭调度器 3，配置调度器 四，j...
Quartz任务调度简介---03（浅谈JobExecutionContext)
菜鸟在进步
08-04 8955
定义JobExecutionContext: 当Schedule调用一个Job时，就会将JobExecutionContext传递给Job的exceute()方法。 Job能够通过JobExecutionContext对象访问到Quartz运行时候的环境以及Job本身的数据明细。 JobDataMap： 定义： 在进行任务调度时，JobDa...
分布式任务调度系统-定时任务的解决方案
一个天秤座的架构师
05-28 2万+
导语：在前面我们讲过了阿里云分布式任务调度平台，今天我们从架构和技术实现上来为大家讲解腾讯云分布式任务调度系统TCT(Tencent CloudTask)如何实现任务调度的精准实时、稳定高效，以及任务的切分和编排。 01 背景介绍 缘起缘灭，自有因果 首先, 我们来思考一些几个业务场景： XX信用卡中心，每月28日凌晨1:00到3:00需要完成全网用户当月的费用清单的生成。 XX服饰，需要每天上午9:00开始向会员推送送生日祝福短信。 XX游戏平台，新用户...
最新电大《计算机应用技术基础》形考作业任务01-03网考试题及答案.docx
06-28
最新电大《计算机应用技术基础》形考作业任务01-03网考试题及答案.docx
最新电大《合同法》形考作业任务01-03网考试题及答案.docx
10-10
《合同法》是中国法律体系中一部重要的民事法律法规，主要调整平等主体之间的财产关系，特别是动态的财产流转关系。它涉及到合同的订立、效力、履行、变更、转让、解除、违约责任等一系列环节。...
最新电大《医护心理学》形考作业任务01-03网考试题及答案
08-19
形考作业任务是学习过程中的一个重要环节，通过这些任务，学生能够检验自己的理解和应用能力。 1. 迁移的概念是指已获得的知识、技能和方法对解决新问题的影响。例如，医生在学习了基础医学知识后，能更好地理解和...
最新电大《计算机应用技术基础》形考作业任务01-03网考试题及答案.pdf
10-15
最新电大《计算机应用技术基础》形考作业涵盖了计算机基础知识，包括计算机分类、计算机组成、BIOS、网络设备、互联网接入、网络安全、病毒防治等多个方面。以下是这些知识点的详细说明： 1. 计算机分类：微机分为...
RF-SJ-LC-01-F03 设计任务书－初步设计（模板）.zip
02-01
《RF-SJ-LC-01-F03 设计任务书－初步设计（模板）》是一个重要的资料文件，主要用于指导项目开发过程中的初步设计阶段。这个压缩包包含了一个名为“RF-SJ-LC-01-F03 设计任务书－初步设计（模板）.doc”的文档，该...
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 126
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
CSS 多按钮根据半圆弧度排列
最新发布
前端技术
08-08 327
多个按钮根据弧度，延边均匀排列。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 198
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
JS+CSS案例：用CSS+JS做漂亮的拟真时钟
uu0216的博客
08-06 354
今天给大家分享一个挺酷的CSS+js模拟的时钟。
funListT07: [ { id: 1, name: "零部件01", start: "2022-01-01", end: "2022-01-05", }, { id: 2, name: "零部件02", start: "2022-01-03", end: "2022-01-08", }, { id: 3, name: "零部件03", start: "2022-01-06", end: "2022-01-10", }, { id: 4, name: "零部件04", start: "2022-01-02", end: "2022-01-09", }, { id: 5, name: "零部件05", start: "2022-01-05", end: "2022-01-10", }, { id: 6, name: "零部件06", start: "2022-01-06", end: "2022-01-12", }, { id: 7, name: "零部件07", start: "2022-01-03", end: "2022-01-10", }, ],如何实现甘特图，echarts
05-31
要实现甘特图，需要使用Echarts的Gantt模块。首先，需要引入Echarts和Gantt模块的JS文件，在HTML中建立一个容器用于渲染图表。然后，需要定义一个包含任务信息的JSON数据，例如funListT07。最后，使用Echarts的API绘制甘特图，可以参考以下代码： ``` // 引入Echarts和Gantt模块 <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/gantt.min.js"></script> // 在HTML中建立容器 <div id="container" style="height:600px;"></div> // 定义任务信息的JSON数据 var data = [ { id: 1, name: "零部件01", start: "2022-01-01", end: "2022-01-05", }, { id: 2, name: "零部件02", start: "2022-01-03", end: "2022-01-08", }, { id: 3, name: "零部件03", start: "2022-01-06", end: "2022-01-10", }, { id: 4, name: "零部件04", start: "2022-01-02", end: "2022-01-09", }, { id: 5, name: "零部件05", start: "2022-01-05", end: "2022-01-10", }, { id: 6, name: "零部件06", start: "2022-01-06", end: "2022-01-12", }, { id: 7, name: "零部件07", start: "2022-01-03", end: "2022-01-10", }, ]; // 绘制甘特图 var chart = echarts.init(document.getElementById('container')); var option = { tooltip: {}, legend: { data: ['任务'], textStyle: { fontSize: 14, }, }, grid: { top: '10%', bottom: '10%', }, xAxis: { type: 'time', splitLine: { show: false, }, }, yAxis: { type: 'category', data: data.map(function (item) { return item.name; }), splitLine: { show: false, }, }, series: [ { name: '任务', type: 'gantt', data: data.map(function (item) { return { name: item.name, value: [ item.start, item.end, item.id, ], }; }), label: { position: 'inside', formatter: function (params) { return params.name; }, }, }, ], }; chart.setOption(option); ``` 以上代码就可以绘制出funListT07的甘特图了。需要注意的是，数据中的日期格式必须为"yyyy-MM-dd"，并且时间轴的类型必须为"time"。同时，还可以根据需要进行其他的样式和配置调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值