提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

【前端作业系列】HTML基础点 ， 训练＜有序列表＞＜无序列表＞（2022年6月15日作业）

训练列表基础HTML前端 系列 2022 15
2023-09-11 14:19:17 时间

一、效果1展示

 HTML代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1{
				color: blue;
			}
			small{
				color: aquamarine;
			}
			
			.tp{
				text-align: center;
			}
			.sj{
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<h1>明年起 电动车禁止上电梯 电梯停用不公示原因最高罚2万</h1>
		<small>发布时间：2016-11-22 06：58：22&emsp;来源：郑州晚报</small>
		<hr>
		<div class="tp"><img src="img/pic.jpg" alt="" ></div>
		<div class="sj">
		<p>报社讯 电梯里要安装监控设备，电动车不能上电梯。近日，《郑州市电梯使用安全管理办法》通过并对外公布，电梯需要安装监控设备并保护有效运行，违者最高可被罚3万元。同时明确乘坐电梯的7种禁止行为，包括电动车禁止上电梯等。该《办法》字2017年1月1日起施行。郑报融媒记者  董艳竹 李雪
	</p>
		<p>这种行为《办法》</p>
		<p>命令禁止</p>
		
		<p>1.乘坐明示处于非正常状态的电梯；</p>
		<p>2.在超过额定载重量时乘坐电梯；</p>
		<p>3.携带自行车（含电动自行车，已折叠的自行车除外）乘坐电梯；</p>
		<p>4.违反电梯安全警示标志操作电梯；</p>
		<p>5.采用扒撬等非正常手段开启电梯层门、轿门；</p>
		<p>6.拆除、破坏电梯的安全注意事项、使用标志、应急救援电话、电梯安全责任投保信息、报警装置、安全部件及其他附属设施；
	</p>
		<p>7.其他危机电梯安全运行和他人乘坐安全的行为。</p>
		<!--  
		<ol>
			<li>乘坐明示处于非正常状态的电梯；</li>
			<li>在超过额定载重量时乘坐电梯；</li>
			<li>携带自行车（含电动自行车，已折叠的自行车除外）乘坐电梯；</li>
			<li>违反电梯安全警示标志操作电梯；</li>
			<li>采用扒撬等非正常手段开启电梯层门、轿门；</li>
			<li>拆除、破坏电梯的安全注意事项、使用标志、应急救援电话、电梯安全责任投保信息、报警装置、安全部件及其他附属设施；
	</li>
			<li>其他危机电梯安全运行和他人乘坐安全的行为。</li>
			
		</ol>
		-->
		<p><strong>使用：电梯需安装监控并有效运行</strong></p>
        <p>《办法》所称的电梯，包括载人（货）电梯、自动扶梯和自动人行道等。</p>
		<p>对于电梯要不要安装监控一事，《办法》明确，不仅要安装还要保持有效运行。电梯使用单位应当安装电梯安全运行监控设备，并与市特种设备安全监督管理部门的质量安全监管平台链接，保持起有效运行。
	</p>
		<p>住宅小区电梯需要改造、修理、更新的，电梯使用单位和业主委员会应当及时组织落实，业主应当履行资金筹集义务。
	</p>
	<p>其中，已建立住宅专项维修资金的，按照规定在住宅专项维修资金中列支。未建立住宅专项维修资金或者住宅专项维修资金余额不足的，业主对费用承担有约定的，按照约定承担；没有约定或者约定不明确的，乡镇人民政府、街道办事处应当协助组织业主筹集落实资金。</p>
	</div>
	</body>
</html>

二、效果2展示

 

HTML代码展示


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.yy{
				width: 500px;
				height: 400px;
				background-color: fff;
				box-shadow:1px 1px 5px 1px  #888 ;
				line-height: 30px;
	
			}
			
			p{
				font-size: 32px;
				color: blue;
			}
			
			.jy{
				float: right;
				font-size: 12px;
				color: gray;
			}
		</style>
	</head>
	<body>
		<div class="yy">
		<p>最新新闻</p>
		<hr color="gray">
		<ul>
			<li>能防弹、要上火星的特斯拉电动皮卡，会在中国“大卖”<span class="jy">10:28</span></li>
			<li>官方爆料:realme首款5G设备，快了<span class="jy">17:47</span></li>
			<li>抵水御尘雷柏V530防水背光游戏机械键盘上市<span class="jy">17:44</span></li>
			<li>小米副总裁自曝:Redmi k30将支持5G网络，<span class="jy">17:35</span></li>
			<li>雷军:买5G手机不要急，2020年上半年小米至少出<span class="jy">17:19</span></li>
			<li>是用户也是“小白鼠”:苹果再推健康研究APP，呵护.. 	<span class="jy">17:07</span></li>
			<li>开启保鲜生活的密码，海信食神450十字对开冰箱有一.. <span class="jy">16:46</span></li>
			<li>「拥抱产业互联网」一年后，腾讯首次完整披露20年技.. <span class="jy">16:20</span></li>
			<li>十亿节点大规模图计算降至分钟级，腾讯开源图计算框架.. <span class="jy">16:13</span></li>
			<li>双十一手机热战现“变局” <span class="jy">15:58</span></li>
		</ul>
		</div>
	</body>
</html>

三、效果3展示

HTML代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				font-size: 20px;
				text-indent: 1em;
				background-color: ghostwhite;
				font-weight: 500px;
				margin: auto;
			}
			.qj{
				width: 400px;
				height: 350px;
				box-shadow:1px 1px 5px 1px  #888 ;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="qj">
		<p>头条推荐</p>
		<ol>
			<li>盘点关于全球旅游胜地的15大误传</li>
			<li>世界四大文明古都，中国的最迷人!</li>
			<li>川师大杀人案嫌犯讲作案动机行凶前喝4瓶酒</li>
			<li>银行金库遭劫:现场留百捆现金值守人员死亡</li>
			<li>关于地铁房的5大误区!买房的必看</li>
			<li>郑漂福利郑州将分配533套公租房!</li>
			<li>思域在哪些城市不加价?</li>
			<li>三厢版宝马1系会有市场吗?</li>
			<li>撞发?没关系!有一种流行叫杨幂偏分侧头杀</li>
		</ol>
		</div>
	</body>
</html>

四、效果4展示

HTML代码展示


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.qj{
				width: 400px;
				height: 450px;
				background-color: white;
				line-height: 15px;
				box-shadow:1px 1px 5px 1px  #888 ;
			}
			.yi{
				width: 400px;
				height: 100px;
				background-color: ghostwhite;
				
			}
			div.oy{
				width: 30px;
				height: 30px;
				font-style: italic;
				color: white;
	background-color: orange;
	text-align: center;
		
			}
			span{
				font-style: italic;
				font-size: 18px;
			}
			span.er{
				color: red;
			}
			span.san{
				color: #888;
			}
			hr{
				width: 400px;
				align-items: left;
				border: 1px dashed darkgray;
				
			}
		</style>
	</head>
	<body>
		<div class="qj">
			<div class="yi"><p><div class="oy">01</div>&emsp;&emsp;比尔·盖茨人民日报撰文∶中国经</p></div>
			<p><span class="er">02</span>&emsp;日媒调查显示逾8成日本自民党国会议员总裁选举</p><hr>
			<p><span class="er">03</span>&emsp;俄一架失踪的米-8直升机在伊尔库茨克州被找到</p><hr>
			 <p><span class="san">04</span>&emsp;菲律宾—网吧爆炸致1死多伤环球国际</p><hr>
			 <p><span class="san">05</span>&emsp;加州议会呼吁加强美中经济合作手机人民网</p><hr>
			 <p><span class="san">06</span>&emsp;为什么有中国辣妈选择在俄生宝宝?俄媒:学习</p><hr>
			 <p><span class="san">07</span>&emsp;麦凯恩葬礼举行:长眠母校基园与昔日同窗相伴</p><hr>
			 <p><span class="san">08</span>&emsp;德国研究:父母受教育程度高孩子更健康中国新</p><hr>
			
			<!-- 
		<ol>
			<li>比尔·盖茨人民日报撰文∶中国经</li>
			<li>日媒调查显示逾8成日本自民党国会议员总裁选举</li><hr>
			<li>俄一架失踪的米-8直升机在伊尔库茨克州被找到</li><hr>
			<li>菲律宾—网吧爆炸致1死多伤环球国际</li><hr>
			<li>加州议会呼吁加强美中经济合作手机人民网</li><hr>
			<li>为什么有中国辣妈选择在俄生宝宝?俄媒:学习<hr></li>
			<li>麦凯恩葬礼举行:长眠母校基园与昔日同窗相伴</li><hr>
			<li>德国研究:父母受教育程度高孩子更健康中国新</li><hr>
		</ol>
		 -->
		</div>
	</body>
</html>

相关文章