css背景与列表

最新推荐文章于 2015-01-19 15:59:44 发布
最新推荐文章于 2015-01-19 15:59:44 发布
阅读量202 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42708385
版权 
<!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">
<html>
	<head>
		<title>CSS背景与列表</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
	body
	{
		background:red url("4.jpg") no-repeat center center;
	}
	p
	{
		color:white;
		font-weight:bold;
	}
		
	
	</style>
	<body>
	  <!-- background-color  十六进制    background-color:#ff0000;         -->
	  <!-- background-color  英文名称    background-color:red;             -->
	  <!-- background-color  三原色      background-color:rgb(255,0,0);    -->
	  <!-- background-color  transparent background-color:transparent; 透明-->
	  
	  <!-- background-image  URL    background-image:url("bg.jpg")背景图片 -->
	  <!-- background-image  none   不设置背景图片                         -->
	  
	  <!-- background-attachment sroll    设置背景图像会随视窗滚动条的移动而移动   -->
	  <!-- background-attachment fixed    设置背景图像不会随视窗滚动条的移动而移动 -->
	  
	  <!-- background-repeat  repeat    将背景图案填满整个背景。  -->
	  <!-- background-repeat  repeat-x  将背景图案在水平方向添满  -->
	  <!-- background-repeat  repeat-y  将背景图案在垂直方向添满  -->
	  <!-- background-repeat  no-repeat 图案只出现一次            -->
	  
	  <!-- background-position  top left      设置背景图案出现在上左方   -->
	  <!-- background-position  top center    设置背景图案出现在上方中间 -->
	  <!-- background-position  top right     设置背景图案出现在上右方   -->
	  <!-- background-position  center left   设置背景图案出现在中间左方 -->
	  <!-- background-position  center center 设置背景图案出现在IE中间   -->
	  <!-- background-position  center right  设置背景图案出现在中间右方 -->
	  <!-- background-position  bottom left   设置背景图案出现在下左方   -->
	  <!-- background-position  bottom        设置背景图案出现在正下方   -->
	  <!-- background-position  bottom right  设置背景图案出现在下右方   -->
	  <!-- 简化形式 background:red url("4.jpg") no-repeat center center; -->
	  
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  <p>PHP100.COM中文网</p>
	  
	</body>
</html>


 

<!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">
<html>
	<head>
		<title>CSS背景与列表</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		ul
		{
			list-style-type:upper-alpha;
			list-style-position:outside;
			
			list-style:none
		}
		
	
	</style>
	<body>
		<!-- list-style-type  none        无符号      -->
		<!-- list-style-type  disc        实心的小圆点-->
		<!-- list-style-type  circle      空心的小圆点-->
		<!-- list-style-type  square      实心的小方块-->
		<!-- list-style-type  decimal     1,2,3...    -->
		<!-- list-style-type  lower-roman i,ii,iii... -->
		<!-- list-style-type  upper-roman I,II,III... -->
		<!-- list-style-type  lower-alpha a,b,c,d,e.. -->
		<!-- list-style-type  upper-alpha A,B,C,D,E.. -->
		
		<!-- list-style-position  inside  清单项目较往右移 -->
		<!-- list-style-position  outside 清单项目正常显示 -->
		
		<!-- list-style-position  URL     list-style-image:url(lmk.gif) 显示图像 -->
		<!-- list-style-position  none    不会显示任何图像 -->
		
		<!-- 简化格式 list-style:none  -->
		
		
		<ul>
			<li>PHP100.com中文网</li>
			<li>PHP100.com中文网</li>
			<li>PHP100.com中文网</li>
			<li>PHP100.com中文网</li>
			<li>PHP100.com中文网</li>
			<li>PHP100.com中文网</li>
		</ul>
	</body>
</html>


 

 

「已注销」
关注
专栏目录
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制...网页中id为content的元素被我们设置了使用images文件夹下的bg.GIF作为背景，与传统表格式布局中的设置并无差别，在默认状态下，背景同样以平铺的方式
css 背景样式属性说明
09-25
CSS 背景样式属性是控制网页背景样式的基本属性，它包括背景颜色、背景图片、背景重复、背景固定、背景定位等多个方面。下面对这些属性进行详细的解释： 1. 背景颜色（background-color） 背景颜色是网页背景的...
HTML+CSS实现漂亮的背景实例
09-25
在这个实例中，我们将探讨如何使用这两种技术来实现一个美观的背景效果，使得网页背景与大海的图像完美融合，创造出一种独特的艺术感觉。 首先，我们来看一下CSS中的`background-color`属性。在这个例子中，`...
css背景颜色透明背景图片切换效果
12-07
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
CSS背景设置详解与应用场景
最新发布
10-09
内容概要：本文介绍了CSS中关于背景设置的多个属性及其用法，详细讲解了 background-image、background-repeat、background-size、background-position 和 background-attachment 这些属性的作用以及它们是如何帮助...
css中margin、padding属性用法
12-23 538
样式单边距margin使你能够在网页上的元素的矩形区域外部添加空隙。需要记住的 是,margin属性处理的是元素外面的间距。 以下是设置边距的样式属性 margin-top:设置上边距 margin-right:设置右边距 margin-bottom:设置下边距 margin-left:设置左边距 margin:在一个属性中设置上、右、下、左边距。 希望每个周围边距为15个像素，可
css构造超链接
01-16 311
css构造超链接 a { /*IE6 IE7不显示下划虚线*/ text-decoration:none; color:red; border-bottom:1px dashed #333; display:block; width:140px; line-height:150%;
css区块、浮动、定位、溢出、滚动条
01-14 267
CSS div { background:red; width:200px; height:100px; overflow:auto; scrollbar-face-color :pink; }
css边框与边界
01-14 246
CSS边框与边界 img { border:dashed 1px green; } <!-- 可依序设置上、右、下、左线颜色 border-color:red 四边均为红色 border-color:red green 上下为红色、左右为绿色 border-col
css定义选择器
01-15 237
定义选择器 #title { color:red; } PHP100.COM中文网 定义选择器 /*只适合title的h2标题*/ p#title { color:blue; } h2#ti
css构造表格
01-16 227
css构造表格 table { /* border-collapse:separate|collapse 设置或检索表格的行和单元格的边是否合并在一起 还是按照标准的HTML样式分开。 separate : 默认值。边框独立(标准HTML) collapse : 相邻边被合并
css构造颜色、背景与图像
01-15 226
css构造颜色、背景与图像 body { background:#fff; } div span { color:#f60; } <!--#333333 #333 PHP100.
css布局(二)
01-19 207
CSS布局 * { margin:0; padding:0; } body { margin:10px; } #header { border:1px solid black; padding:10px; background:#ccc;
css构造列表与导航
01-16 198
css构造列表与导航 body { margin:50px; } ul { list-style-type:none; margin:0; padding:0; list-style-image:url(tb.gif); line-height:150%; }
css链接、光标、DHTML、缩放
01-14 197
CSS div { width:500px; height:500px; background:green; text-align:center; zoom:0.5; } strong { hehavior:url("font.htc"); }
css布局(一)
01-19 191
CSS布局 * { margin:0; padding:0; } body { margin:10px; background:#fff; } #header { border:1px solid black; height:60
css滤镜
01-15 186
CSS滤镜 div { filter:shadow(color = red,direction = 135,strength = 5); width:200px; height:150px; padding:5px; } img { }
css构造表单
01-16 182
css构造表单 label { display:block; } 用户名： 性别:男 女   css构造表单 body { } input,text
CSS背景深入解析：必备与高级技巧
本文将深入探讨CSS背景的各个方面，从CSS2到CSS3，为您提供全面的指南。 CSS2中的背景管理主要通过五个关键属性进行设置： 1. `background-color`: 这个属性用于设置元素的填充背景色，支持多种颜色表示方法，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值