背景样式
<div style="width:1000px; height:1000px">控制样式长宽</div><!--控制样式长宽，px代表像素数-->
<div style="background-color:#0F0">X</div><!--控制样式背景颜色-->
<div style="background-image:X"></div><!--控制样式背景图片-->
<div style="background-repeat:no-repeat"></div><!--控制样式背景图片是否平铺，no-repeat为不平铺-->
<div style="background-position:bottom 100px"></div><!--调整样式图片边距-->
<div style="background-size:Xpx Xpx"></div><!--调整样式图片大小-->
字体样式
<div style="font-family:宋体">控制字体样式</div><!--控制字体样式-->
<div style="font-size:14px">控制字体大小</div><!--控制字体大小，一般用12 14 16像素-->
<div style="font-weight:bold">控制字体加粗</div><!--blod是加粗，normal是不加粗-->
<div style="font-style:italic">控制字体倾斜</div><!--normal是不倾斜-->
<div style="color:#03F">控制字体颜色</div><!--颜色控制是直接加color，不用font-->
<div style="text-decoration:">下划线 上划线 删除线 去掉下划线</div>
对齐方式
<div style="text-align:center">居中对齐</div><!--水平对齐，当前是居中，left是靠左，right是靠右-->
<div style="vertical-align:middle">居中对齐</div><!--垂直对齐，top是顶部 bottom是底部，一般设置行高之后使用--><div style="line-height:">行高</div><!--配合垂直对齐使用-->
<div style="text-indent:">首行缩进量</div><!--通常用在段落上面-->
*{ margin:0px auto; padding:0px}/*每个页面都要写，清除所有边距和间距，单独设置过的除外*/
<div id="b2"></div>
<style>
*{ margin:0px auto; padding:0px}/*每个页面都要写，清除所有边距和间距*/
#a1{ width:100px; height:30; color:#F00; background-color:#000; text-decoration:none}
#b1{ width:300px; height:300px; background-color:#3F0; color:#000; text-align:center; vertical-align:middle; line-height:300px}
#an{ width:104px; height:40px; background-color:#38F; color:#FFF; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;}
#wai{ width:300px; height:300px; background-color:#F00}
#nei{ width:100px; height:100px; background-color:#00F; margin:20px 30px 20px 30px; padding:40px 20px 20px 10px;}
#li{ width:50px; height:50px; background-color:#CF0}
#b2{ width:200px; height:200px; background-color:#0F0; position:absolute; top:100px; right:50px}
</style>
<body>
<!--控制背景样式 背景图片 背景颜色 背景图片平铺与否 距离哪个方向多少距离调整位置 调整图片大小-->
<div style="width:1000px; height:1000px; background:#0F0; background-image:url(file:///D|/%E5%A3%81%E7%BA%B8/per-haagensen-tdkr-catwoman01-perh.jpg); background-repeat:no-repeats; background-position:left 100px bottom 100px; background-size:1000px 1000px">测试文字</div>
控制字体样式 字体大小（网页常用14px）字体粗细 字体倾斜 字体颜色（直接color） 修饰（更改文字下划线等）
<div style="font-family:‘楷体‘; font-size:36px; font-weight:bold; font-style:italic; color:#F00; text-decoration: line-through">控制字体</div>
<a id="a1" href="http://www.4399.com">超链接</a><!--span和id标签无法调整大小-->
<!--对齐方式 text-align水平对齐方式 （vertical-align垂直对齐方式 line-height行高配合使用）-->
<div id="b1">对齐方式测试</div>
<a href="http://www.baidu.com"><div id="an">百度一下</div></a><br />
<p style="text-indent:40px">将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑将拉开距离咯率就擦垃圾vs交流空间看啦时间考虑</p><!--缩进-->
<!--边界边框(内边距只要加了之后就会变大）-->
<div id="wai">
<div id="nei">
<div id="li"></div>
</div>
<style>
*{ margin:0px auto; padding:0px}
#a1{ width:0px; height:0px; background-color:#00F; border-bottom:200px solid #00FFFF; border-top:200px solid #FF0000; border-right:200px solid #FFF; border-left:200px solid #66FF00; margin:auto}
.dm{ list-style-image:url(file:///C|/Users/Administrator/Desktop/192.JPG); list-style-position:inside}
#a3{ width:300px; height:300px; background-color:#0FF; margin:10px; left:30px; bottom:20px}
#a4{ width:200px; height:200px; background-color:#0FF; position:fixed; top:0px; left:0px}
#a5{ float:left}
#menu{ width:900px; height:50px}
.list{ float:left; width:100px; height:50px; text-align:center; vertical-align:auto; line-height:50px}
</style>
<body>
<div id="a1">边界和边框测试</div>
<div id="a2">
<ul>
<li class="dm">死神</li>
<li class="dm">火影忍者</li>
<li class="dm">海贼王</li>
<li class="dm">野良神</li>
<li class="dm">银魂</li>
</ul>
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
列表测试</div>
格式与布局
<div id="a3">锁定位置，比如某些网站的右下角弹窗</div>
<div id="a4">某些网站的广告</div>
流
<div id="a5">
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
<img src="file:///D|/壁纸/2016-03-20/118.JPG" />
</div>
<div id="menu">
<div class="list">首页</div>
<div class="list">单机</div>
<div class="list">网游</div>
<div class="list">动作</div>
<div class="list">冒险</div>
</div>
时间： 2024-11-05 06:26:21