css 样式收集

素颜马尾好姑娘i 2021-07-24 21:44 445阅读 0赞

缩放:
    	zoom:normal|浮点数来进行控制|百分数
    
    网页标题引入图片
    	要先把图片变成.ico格式
    		<link href="路径" rel="shortcut icon"/>
    			
    鼠标样式:
    	cursor:pointer;   变成小手

**代码示例:**

<html>
    	<head>
    		<title>css 样式的使用</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> body{ 
    				background-image:url(img/1.jfif);  /*设置网页背景图*/
    				background-repeat:no-repeat;  /*设置图片不重复*/
    				background-size:cover;		/*设置图片平铺整个网页*/
    				
    			}
    			table{ 
    				border:solid 1px;
    				border-radius:10px;
    				background-image:url(img/1.jfif);
    				background-size:cover;
    			}
    			tr{ 
    				height:40px;
    			}
    			td{ 
    				width:100px;
    				border:solid 1px yellow; /*边框实线大小和颜色*/
    				border-radius:10px;    /*边框角度*/
    				background-color:orange; /*背景颜色*/
    				text-align:center;		/*内容位置*/
    				color:aqua;    /*字体内容颜色*/
    				font-weight:bold;   /*字体权重*/
    				letter-spacing:10px;   /*字符间距*/
    				
    			}
    			/*菜单的设置*/
    			li{ 
    				list-style-type:none;
    				/*display:inline;*/
    				float:left;
    			}
    			/*子标签设置*/
    			li a{ 
    				color:wheat;
    				text-decoration:none;    /*去除下划线*/
    				font-weight:bold;
    				font-size:30px;
    				margin-left:20px;	/*盒子模型，词语间距*/
    				position:relative;
    				top:5px;
    			}
    			/*ul设置*/
    			ul{ 
    				background-color:gray;
    				height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<h3 align="center">css 样式的使用</h3>
    		<hr size="30" color="aquamarine"/>
    		<table>
    			<tr >
    				<td width="100px">姓名</td>
    				<td >性别</td>
    				<td>爱好</td>
    			</tr>
    			<tr>
    				<td>张三</td>
    				<td>男</td>
    				<td>唱歌</td>
    			</tr>
    			<tr>
    				<td>李四</td>
    				<td>男</td>
    				<td>跳舞</td>
    			</tr>		
    		</table>
    	<hr size="30" color="aquamarine"/>
    	
    	<ul>
    		<li><a href="">首页:</a></li>
    		<li><a href="">钢铁侠</a></li>
    		<li><a href="">美国队长</a></li>
    		<li><a href="">蜘蛛侠</a></li>
    	</ul>
    	
    	</body>
    </html>