329 experience
截止到现在，给我最大的冲击就是HTML没有像JAVA那样严格
可以随意搭配，换句话说 HTML要的就是效果 没有一个固定的方法 即便是代码有错误 也可以实现效果
今天的东西挺好吃 能吃的消 哈哈 开森
AM:
边框样式 3个方面
1 边框宽度 border -width
2 边框外观（四周）:border-style:solid（实）dashed,(虚)，dotted（点），double（双实）
3边框颜色 border-color
简单写法：border：1px dotted red；
注意格式顺序：边框 像素 样式 颜色
局部边框样式：
border-bottom：1px double red
背景样式：
background-color 背景颜色 image 图像路径 repeat：纵向横向平铺
attachment： 是否随内容而滚动 background-postition:-30 -30;背景图起始位置
PM：
超链接样式：4个伪类：
未访问的样式：#a1:link{text-decoration:none;color:red;}
访问后： #a1:visited {color:yellow;}
鼠标经过时：#a1:hover{color:#666666}
点击时： #a1:active {color:blue;}
这4个伪类，必须按照 llink、visited、hover、active 顺序进行 不然无法读取
列表样式 list-style-type: 属性值;
decimal：1、2、3
lower-alpha：小写a、b
upper-alpha：大写
lower-roman：小写罗马
upper-roman：大写罗马
ul li{
list-style-type: circle;
list-style-image: url(img/sp.png);}
ol li{
list-style-type: lower-alpha;}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style > 7 .p1{ 8 /* 边框10像素 */ 9 border-width: 10px; 10 /* 边框实线 */ 11 border-style: solid;实线,虚线dashed;点线dotted}双实线double; 12 text-align: center; 13 /*边框颜色*/ 14 /*border-color: red;*/ 15 /*简单写法*/ 16 border: 1px dotted orange; 17 /* 格式顺序:边框 像素 样式 颜色 18 /* 局部边框样式:*/ 19 /*边框底线 */ 20 border-bottom:1px dotted #000000; 21 border-left: 2px double #AD0002; 22 border-right: 2px double #295CC3; 23 /* 背景样式 ：1.背景颜色 2。背景图像*/ 24 背景颜色 background-color: #FF0000; 25 背景位置 background-image: url(img/1.jpg); 26 背景图起始位置 background-position:-30 -500; 27 } 28 body{ 29 background-image: url(img/2.png); 30 /* 显示方式:纵向,横向,平铺 */ 31 background-repeat: repeat-y; 32 /* 是否随内容滚动 */ 33 background-attachment: fixed;} 34 /* PM 35 /*超链接样式：未访问的样式*/ 36 #a1:link{ text-decoration: none; color: red;} 37 /*访问后的样式*/ 38 #a1:visited{ color: yellow;} 39 /*鼠标悬浮时的样式*/ 40 #a1:hover{ color:#666666;} 41 /*点击时的样式*/ 42 #a1:active{color:blue;} 43 /*hover任意鼠标经过的样式*/ 44 #p1:hover{color: pink;} 45 #p1:hover{color: salmon;} 46 ul li{ 47 list-style-type: circle; 48 list-style-image: url(img/sp.png);} 49 ol li{ 50 list-style-type: lower-alpha;} 51 </style> 52 </head> 53 <body> 54 <p class="p1">你好我打啊十大离开家付了款 </p> 55 <span id="a1">的轻举妄动拉开距离贷款纠纷额空间 </span> 56 <!-- "style=text-decoration:none;" 去下划线超链接样式 --> 57 <a href="#" style="text-decoration: none;">百度一下你就知道</a> 58 <p id="p1">你好，Hello</p> 59 <!-- 无序列表 --> 60 <ul> 61 <li>a.</li> 62 <li>b.</li> 63 <li>c.</li> 64 </ul> 65 <!-- 有序列表 --> 66 <ol> 67 <li>a.</li> 68 <li>b.</li> 69 <li>c.</li> 70 </ol> 71 </body> 72 </html>
