<div style="400px; height:400px; background-image:url(../../%E8%AF%BE%E7%A8%8B%E8%80%81%E5%B8%88%E5%AE%9E%E4%BE%8B/10.10%E6%A0%B7%E5%BC%8F%E8%A1%A8/QQ%E5%9B%BE%E7%89%8720161030131800.png);"></div>
上面代码:设置背景图,背景图这种情况是默认平铺的。在后面再加入
background-repeat:no-repeat;
显示,这是不平铺,平铺:repeat、不平铺no-repeat、横向平铺repeat-x、纵向平铺repeat-y。
<div style="100px; height:100px; background-color:#3C9;"></div>
上面代码:背景色,显示,但是背景图高于背景色。
<div style="100px; height:100px; background-color:#0C0; background-position:center;background-image:url(../../%E8%AF%BE%E7%A8%8B%E8%80%81%E5%B8%88%E5%AE%9E%E4%BE%8B/10.10%E6%A0%B7%E5%BC%8F%E8%A1%A8/QQ%E5%9B%BE%E7%89%8720161030131800.png); background-repeat:no-repeat;"></div>
上面代码:背景图中插入图片是居中的,但repeat必须是no-repeat,显示,放到上下左右,只需在 background-position后面输入right、top、botton、left就可。
E%E7%89%8720161030131800.png); background-repeat:repeat-y;"></div> <div style="100px; height:100px; background-color:#0C0; background-position:;background-image:url(../%E5%9B%BE%E7%89%87/150358666450342800_a580xH.jpg); background-repeat:no-repeat; background-size:80px 80px;"></div>
这个是可以改变插入的图片的大小,。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>样式表</title> <style type="text/css"> #d2{ text-decoration:overline;} </style> </head> <body> <p id="d2">小孩坏坏</p> </body>
这个是给文字加入了一条上划线,用的是text-decoration:overline;、如果加下划线,就在text-decoration后面加underline,删除线就在后面加line-through、而去掉下划线就加none。
#d1{ font-size:16px; color:#C00; font-family:宋体; font-weight:bold; font-style:italic;} </style> </head> <body> <div id="d1">你好</div>
上面代码:在样式中改变文字的大小、颜色、字体。显示:。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>样式表</title> <style type="text/css"> a{ 200px; height:200px; background-color:#C30; text-decoration:none;} </style> </head> <body> <a href="QQ图片20161030131800.png">超链接</a>
上面代码表示给超链接取消了下划线,加了背景色。显示。
<p style="text-indent:32px;">
这个是写一段话前面的首行缩进前两个字的代码。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>样式表</title> <style type="text/css"> *{ margin:0 auto; padding:0;} </style> </head>
这个代码代表所有的内容居中,边距和间距都为0,margin是边距,padding是间距。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>样式表</title> <style type="text/css"> *{ margin:0 auto; padding:0;} </style> </head> <body> <div style="600px; height:500px; background-color:#000; padding-top:100px"> <div style="400px; height:300px; background-color:#F00; padding-top:100px"> <div style="200px; height:100px; background-color:#FFF; padding-top:100px"></div> </div> </div>
代码显示:。