CSS简单示例

最新推荐文章于 2021-07-28 17:39:32 发布

King·Forward

最新推荐文章于 2021-07-28 17:39:32 发布

阅读量574

点赞数

分类专栏： JavaWeb 文章标签： css stylesheet border input table class

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8026878

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>CSS_Examplel.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <style type="text/css">
  	ul{
  		list-style: none;/*把li前面的默认的项目符号去掉*/
  		/*list-style-type: lower-greek;可以设置其他的类型*/
  		list-style-image: url("../images/aa.JPG");/*也可以自己制作项目符号图片，然后通过这样的方式引用就行了*/
  	}
  	table{
  		border: 1px solid black; color: red; 
  		width: 900px; 
  		/*border-spacing: 0px;*/
  		border-collapse: collapse;
  	}
  	table td{
  		border:1px green solid;
  		/*padding: 10px;这样定义一个值，表示单元格内边距都为10px*/
  		/*padding: 10px 40px;这样定义两个值，表示单元格上下边距是10px，左右边距是20px*/ 
  		padding:10px 20px 30px 40px;/*分别代表的是上 右 下 左四个放下，是按顺时针排列的*/
  	}
  	.input{
  		/*border-color: blue;改变 输入框的颜色*/
  		border:none;/*设置输入框的边框为无，在不同的浏览器稍微有一点不同的显示方式，要注意一下*/
  		border-bottom: 1px solid;
  	}
  </style>
  <body>
  请输入答案：<input class="input" type="text" />
  
  <hr/>
  <table >
  	<tr>
  		<td>发的金卡是浪费</td>
  		<td>发的金卡是浪费</td>
  		<td>发的金卡是浪费</td>
  	</tr>
  	<tr>
  		<td>发的金卡是浪费</td>
  		<td>发的金卡是浪费</td>
  		<td>发的金卡是浪费</td>
  	</tr>
  	<tr>
  		<td>发的金卡是浪费</td>
  		<td>发的金卡是浪费</td>
  		<td>发的金卡是浪费</td>
  	</tr>
  </table>
  <br/>
    <ul class="input">
    	<li>这是一个CSS的实例</li>
    	<li>这是一个CSS的实例</li>
    	<li>这是一个CSS的实例</li>
    	<li>这是一个CSS的实例</li>
    	<li>这是一个CSS的实例</li>
    	<li>这是一个CSS的实例</li>
    	<li>这是一个CSS的实例</li>
    </ul>
  </body>
</html>

King·Forward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS简单示例

CSS_Examplel.html --> ul{ list-style: none;/*把li前面的默认的项目符号去掉*/ /*list-style-type: lower-greek;可以设置其他的类型*/ list-style-image: url("../images/aa.JPG");/*也可
复制链接

扫一扫