【JavaWeb】CSS

xiaoxiao2021-02-28  13

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.素材/高圆圆.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>

效果:

转载请注明原文地址: https://www.6miu.com/read-1600194.html

最新回复(0)