【JavaWeb】CSS_css背景&css列表&css表格属性

最新推荐文章于 2024-04-25 14:49:41 发布

Enjoy96

最新推荐文章于 2024-04-25 14:49:41 发布

阅读量1k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79049043

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS背景

1.背景当中常用的属性：

（1）background-color 设置背景颜色

（2）background-image 自定义图片设置为背景

（3）background-repeat 设置图像是否重复以及如何重复

其中的属性：

①no-repeat：不重复(默认图片的起始位置 top left)
②repeat-x x轴重复
③repeat-y y轴重复
④repeat 重复

（4）background-position 设置背景图像的起始位置

其中的属性：top，center，right（分别指定图片的位置和浏览器的位置）

2.背景属性的简写格式：

background:背景颜色背景图片背景图片是否重复以及如何重复背景图像的起始位置

3.背景图片的起始位置图解：

css背景练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景</title>

<style type="text/css">
	body{
		/*background-color 设置背景颜色。 */
		/*
			background-color:#0FF;
		*/
	
		/*background-image 将某个图像设置为背景 */	
		/*
			background-image:url(../05.%E7%B4%A0%E6%9D%90/%E9%AB%98%E5%9C%86%E5%9C%86.jpg);
		*/
		/*background-repeat:设置图像是否重复以及如何重复
			几个值:
			no-repeat:不重复(默认图片的起始位置 top left)
			repeat-x:x轴重复
			repeat-y:y轴重复
			repeat:重复
		*/
		/*
		background-repeat:no-repeat;
		*/
		/*
			background-position 设置背景图像的起始位置 
		
		*/
		/*
		background-position:top right;
		*/
	
		/*background的简写属性:
			background:背景颜色 背景图片 背景图片是否重复以及如何重复  背景图像的起始位置
		*/
		background:#0F0 url(../images/Reus.jpg) no-repeat top center ;
		}
	
</style>
</head>

<body>
</body>
</html>

效果：

CSS列表属性

1.在列表当中自定义列表项的类型符号：

list-style-type:none ; 将列表选项符号去掉

list-style-image:url(图片地址); 将新图片自定义为列表选项符号

例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css列表属性</title>
<style type="text/css">

	ul{
		/*设置列表项的类型*/
		list-style-type:none ;
		/*自定义一个列表项的类型符号*/
		list-style-image:url(../images/Star.jpg);
	}
</style>

</head>

<body>
课程管理:
<ul type="disc">
	<li>学生管理</li>
    <li>教学管理</li>
    <li>选课管理</li>
</ul>
</body>
</html>

效果：

CSS表格属性

合并表格边框 border-collapse:collapse ;

例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS表格属性</title>
<style type="text/css">
	/*css表格属性:合并表格边框*/
	table{
		border-collapse:collapse ;
	}
</style>
</head>

<body>
<table border="1px" align="center" width="400px" height="200px">
	<caption>2017年XXX学校学生成绩表</caption>
    
	<tr>
    	<th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    
    
    <tr>
    	<td>张三</td>
        <td>软工1班</td>
        <td>78</td>
    </tr>
    <tr>
    	<td>李四</td>
        <td>软工2班</td>
        <td>85</td>
    </tr>
    <tr>
    	<td>王五</td>
        <td>软工3班</td>
        <td>90</td>
    </tr>
    
</table>
</body>
</html>

效果：

Enjoy96

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】CSS_css背景&css列表&css表格属性

CSS背景1.背景当中常用的属性：（1）background-color设置背景颜色（2）background-image自定义图片设置为背景（3）background-repeat设置图像是否重复以及如何重复其中的属性：①no-repeat：不重复(默认图片的起始位置 top left)②repeat-x x轴重复③repeat-y y轴重复
复制链接

扫一扫