本系列博客汇总在这里:JavaWeb_CSS 汇总
一、背景颜色和图片
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.weiyuxuan.com</title>
</head>
<style type="text/css">
body
{
margin: 5px;
background-color: olive;
font-size: 15px;
}
img
{
width: 200px;
margin: 5px;
float: left;
}
span
{
font-family: 隶书;
font-size: 60px;
float: left;
margin: 3px;
}
</style>
<body>
<img src="test.jpg"/>
<span>昆明斗南花卉市场 </span>
<p>
昆明斗南濒临滇池东岸,享有“金斗南”之称。斗南花卉市场,现已发展成为“中国乃至亚洲最大的鲜切花交易市场”,是著名的花都。
云南省80%以上的鲜切花和周边省份、周边国家的花卉入场交易。在全国80多个大中城市中占据70%的市场份额,出口46个国家和地
区,有全国10枝鲜切花7枝产自云南之说。多年来借助“斗南”花卉这一中国驰名商标的品牌效应和市场优势,斗南已成为中国花卉市
场的“风向标”和花卉价格的“晴雨表”。
<p/>
</body>
</html>
二、背景图片平铺
background-image: url(wyx.jpg);
:给 html 元素设置背景图片,一定要使用 url()。
background-repeat: repeat-x;
:横向重复。
background-repeat: repeat-y;
:纵向重复
background-repeat: no-repeat;
:不重复
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.weiyuxuan.com</title>
</head>
<style type="text/css">
body
{
background-image: url(wyx.jpg);/*给html元素设置背景图片,一定要使用url()*/
/*background-repeat: repeat-x;在横向重复*/
/*background-repeat: repeat-y;纵向重复*/
/*background-repeat: no-repeat;不重复*/
background-repeat: repeat;/*默认是重复的横向和纵向*/
}
</style>
<body>
</body>
</html>
如有错误,欢迎指正!