CSS案例练习

最新推荐文章于 2023-02-08 20:07:46 发布

莎蛋蛋的盖世英雄啊

最新推荐文章于 2023-02-08 20:07:46 发布

阅读量164

点赞数

分类专栏： CSS 文章标签： html5 html css

本文链接：https://blog.csdn.net/srnmwj99/article/details/120694861

版权

这篇博客通过四个案例展示了CSS在网页设计中的应用，包括创建表格的斑马线效果、实现美人尖设计、绘制短线及打造下拉菜单的风格。每个案例都提供了相应的代码示例和实际效果展示。

摘要由CSDN通过智能技术生成

01-表格斑马线

代码:

<html >
 <head>
   
  <title>练习-表格斑马线</title>
  <style type = "text/css">
  td{
	text-align:center;
	width:25%;
  }
  .tr1{
	background:#e8e8e8;
  }
  table{
	border-collapse:collapse;
  }
  tr{
	border-bottom:1px solid #c0c0c0;
  }
  </style>
 </head>
 <body>
   <table width="100%">
	   <tr class="tr0">
			<td>id</td>
			<td>名称</td>
			<td>血量</td>
			<td>伤害</td>
	   </tr>
	   <tr class="tr1">
			<td>1</td>
			<td>gareen</td>
			<td>340</td>
			<td>58</td>
	   </tr class="tr0">
	   <tr>
			<td>2</td>
			<td>teemo</td>
			<td>320</td>
			<td>76</td>
	   </tr>
	   <tr class="tr1">
			<td>3</td>
			<td>annie</td>
			<

最低0.47元/天解锁文章

莎蛋蛋的盖世英雄啊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS案例练习

01-表格斑马线代码:<html > <head> <title>练习-表格斑马线</title> <style type = "text/css"> td{ text-align:center; width:25%; } .tr1{ background:#e8e8e8; } table{ border-collapse:collapse; } tr{ border-bottom:
复制链接

扫一扫

专栏目录