web:结构+表现+行为
W3c标准,学习html,css,javascript
学习路线
HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门(或PHP入门)→Ajax→ASP.NET进阶(或PHP进阶)
记录好玩好用的代码:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title>哈哈哈</title> 6 <style type="text/css"> 7 body{ 8 background-image:url('http://ww3.sinaimg.cn/mw690/a03b11abgw1eopcfely0mj20ue0xch41.jpg');} 9 a,span,em{ 10 background:none; 11 display:inline-block; 12 padding:10px; 13 box-shadow:1px 1px 8px; 14 border-radius:20px; 15 transition:background 1s; 16 } 17 a:hover{ 18 background-color:#78CBDD; 19 border-color:pink; 20 animation:anime 0.8s; 21 } 22 @keyframes anime 23 { 24 0% {opacity:0;width:12%;} 25 50% {opacity:0.8;width:20%;} 100% {opacity:0.8;width:12%;} 26 } 27 </style> 28 </head> 29 <body> 30 <a href="http://www.baidu.com">百度</a> 31 <a href="http://www.imooc.com">幕课网</a> 32 <span>233333</span> 33 <span>6666666</span> 34 </body> 35 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title>哈哈哈</title> 6 <style type="text/css"> 7 body{ 8 background-image:url('http://ww3.sinaimg.cn/mw690/a03b11abgw1eopcfely0mj20ue0xch41.jpg');} 9 a,span,em{ 10 background:none; 11 display:inline-block; 12 padding:10px; 13 box-shadow:1px 1px 8px; 14 border-radius:20px; 15 transition:background 1s; 16 } 17 a:hover{ 18 background-color:#78CBDD; 19 border-color:pink; 20 animation:anime 0.8s; 21 } 22 @keyframes anime 23 { 24 0% {opacity:0;width:12%;} 25 50% {opacity:0.8;width:20%;} 100% {opacity:0.8;width:12%;} 26 } 27 li{ 28 border-bottom:1px dotted #ccc; 29 width:200px; 30 padding:20px; 31 } 32 </style> 33 </head> 34 <body> 35 <a href="http://www.baidu.com">百度</a> 36 <a href="http://www.imooc.com">幕课网</a> 37 <ol> 38 <li>别让不会说话害了你</li> 39 <li>二十七八岁就应该有的见识</li> 40 <li>别让不好意思害了你</li> 41 </ol> 42 </body> 43 </html>
网页布局:一列,两列,三列,混合。一般就是这四种。而网页样式指尖的关系就是块与块之间的关系,块连着块,块嵌套着块,块压着块。
在css里面进行浮动修改。
两列:浮动
三列:浮动。三列特殊案例:position