css -------- 样式

最新推荐文章于 2022-08-09 14:06:48 发布

qq_42412646

最新推荐文章于 2022-08-09 14:06:48 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/102633423

版权

集中界面设计的样式

<html>
	<head>
		<title>css标签样式</title>
		<meta charset="UTF-8"/>
		
		<style type="text/css">
			table{
				/*border: solid 1px;
				width: 300px;
				height: 300px;*/
			}
			body{
				background-image: url(../img/1.jpg);
				/*background:no-repeat;*/
				background-size: cover;
			}
			td{
				width: 100px;
				border: solid 1px red;
				border-radius: 10px;
				background: yellow;
				text-align: center;
				color: blue;
				font-weight: bold;
				letter-spacing: 10px;
			}
			tr{
				height: 40px;
			}
			li{
				list-style-type: none;
				/*display: inline;*/
				float: left;
				height: 50px;
				background:pink;
			}
			li a{
				color:black;
				font-weight: bold;
				font-size: 20px;
				margin-left: 20px;
				text-decoration: none;
				position: relative;
				top:10px;
			}
		</style>
	</head>
	<body>
		<h3>css样式</h3>
		<hr />
		<table>
			<tr>
				<td>姓名</td>
				<td>果实能力</td>
				<td>战斗力</td>
				<td>奖金</td>
			</tr>
			<tr>
				<td>路飞</td>
				<td>橡胶果实</td>
				<td>原点</td>
				<td>15亿</td>
			</tr>
			<tr>
				<td>香克斯</td>
				<td>无</td>
				<td>远高于路飞</td>
				<td>30亿</td>
			</tr>
		</table>
		<hr />
		<ul>
			<li><a href="">古河 渚</a></li>
			<li><a href="">一之濑 琴美</a></li>
			<li><a href="">伊吹 风子</a></li>
			<li><a href="">藤林 杏</a></li>
			<li><a href="">藤林 椋</a></li>
			<li><a href="">坂上 智代</a></li>
		</ul>
	</body>
</html>

css的基本使用过程：

1：声明css代码域；

2：选择合适的选择器来确定整个网页的基础样式；

3：书写样式的确定：

边框设置，字体设置，字体颜色设置，背景图片颜色设置，背景图片设置，宽和高的设置，浮动设置，行高设置；

注：在使用浮动进行显示时，其格式是没有范围的，所以即使设置了背景颜色，也不会显示，我们要在li中加入height属性，在进行背景设置。

如果直接在li的子标签a中设置top（离顶点的距离时），其也不会显示，我们在其中加入position属性进行显示。

qq_42412646

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css -------- 样式

集中界面设计的样式<html> <head> <title>css标签样式</title> <meta charset="UTF-8"/> <style type="text/css"> table{ /*border: solid 1px; width: 300px; ...
复制链接

扫一扫