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)  编辑  收藏  举报