CSS案例练习

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

莎蛋蛋的盖世英雄啊

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

阅读量156

点赞数

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

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

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>
			<td>380</td>
			<td>38</td>
	   </tr>
	   <tr class="tr0">
			<td>4</td>
			<td>deadbrother</td>
			<td>400</td>
			<td>90</td>
	   </tr>
   </table>
 </body>
 <script type="text/javascript">
	
   </script>

</html>

效果图:

02-美人尖

代码:

<html >
 <head>
   
  <title>美人尖</title>
  <style type = "text/css">
	div{
		width:0px;
		height:0px;
		border-left:75px solid blue;
		border-right:75px solid blue;
		border-top:75px solid red;
	}
  </style>
 </head>
 <body>
   <div></div>
 </body>
 <script type="text/javascript">
	
   </script>

</html>

效果图:

03- 短线下划线

代码:

<html >
 <head>
   
  <title>短线下划线</title>
  <style type = "text/css">
  td{
	text-align:center;
  }
  td{
  
	border-bottom:3px solid #33ccff;
  }
  table{
	border-collapse:separate;
  }
  </style>
 </head>
 <body>
   <table width="100%">
		<tr>
			<td>商品</td>
			<td>数量</td>
			<td>价格</td>
			<td>小计</td>
		</tr>
   </table>
 </body>
 <script type="text/javascript">
	
   </script>

</html>

效果:

04- 下拉菜单风格:

代码:

<html >
 <head>
   
  <title>下拉菜单风格</title>
  <style type = "text/css">
  a{
	text-decoration:none;
	color:cornflowerblue;
	cursor:pointer;
  }
  div{
  		width:70px;
		border:1px solid #c0c0c0;
		margin:10px 0px 0px 70px;
  }
  a.id{
	display:block;
	color:#888888;
	padding:10px 0px 10px 15px;
	
  }
  a.id:hover{background-color:#c0c0c0}
  </style>
 </head>
 <body>
   <a href="#">武器</a>
   <a href="#">护甲</a>
   <a href="#">英雄</a>
	<div>
		<a class="id">盖伦</a>
		<a class="id">提莫</a>
		<a class="id">安妮</a>
		<a class="id">死格</a>
	</div>
 </body>
 <script type="text/javascript">
	
   </script>

</html>

效果:

莎蛋蛋的盖世英雄啊

关注

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:
复制链接

扫一扫