Web学习开始。

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>
View Code
 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>
View Code

 

网页布局:一列,两列,三列,混合。一般就是这四种。而网页样式指尖的关系就是块与块之间的关系,块连着块,块嵌套着块,块压着块。

在css里面进行浮动修改。

两列:浮动

三列:浮动。三列特殊案例:position

posted @ 2016-05-23 13:11  指尖泛出的繁华  阅读(158)  评论(0编辑  收藏  举报