• 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

    活在现实,做在梦里。
  • 相关阅读:
    Socket 传送文件
    spring
    Hibernate学习笔记
    servlet之过滤器(转载)
    java 网络编程
    java 文件操作
    java 图形界面 邮件系统
    简易俄罗斯方块
    二叉树习题之重建二叉树
    将博客搬至CSDN
  • 原文地址:https://www.cnblogs.com/do-it-best/p/5519599.html
Copyright © 2020-2023  润新知