zoukankan      html  css  js  c++  java
  • 前端开发入门学习笔记(一)

    HTML:超文本标记语言。

    html:是一个基础结构。

    CSS:就是跟网页做装修的,修饰HTML的基础内容:样式。

    JavaScript:一个网页的行为,动作,动态的东西。

    html标准文件格式:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8"/>
    <title>标题</title>
    </head>
    <!--我是头部 周围包括的符号为注释-->
    <body>
    这里为网页的主题写作区域
    </body>
    </html>

    CSS:

    div行间样式表:<div style="100px; height:100px; background:red; font-size:30px;">aaa</div>
    写到了DIV的每行,单独定义.每次只能应用到一行,有局限性,很少用到.

    div内部样式表:<div id="XX1"></div>id名称最好用英文开头,以#号赋值。
    <div id="XX2"></div>可以用#号赋值另外一个div.
    <style>
    #XX1{
    100px;
    height:100px;
    background:red;
    }

    #XX2{
    200px;
    height:200px;
    background:blue;
    }
    </style>

    如此用#号单独赋值ID号以后可单独调用.样式表依然在HTML文件内部。

    1.css(文件内的内容)
    #div1{
    100px;
    height:100px;
    background:red;
    }

    在主HTML程序中
    <head>
    <link rel="stylesheet" href="1.css">
    </head>
    <body>
    <div id="div1">aaa</div>
    </body>

    等于链接到了外部的1.css中的#div的赋值调用,这就是外部样式表.

    颜色值.
    background-color:(颜色英文red,yellow.)、#16进制颜色模式#ffffff、rgb模式(100,200,300);,红、黄、蓝。

    background-color:red;
    background-color:#ffffff;
    background-color:rgb(30,40,240);
    /*CSS的注释*/

    background-image:url(image/123.jpg)
    默认状态下引用图片背景是平铺的。
    background-repeat:no-repeat; 背景不重复。
    repeat-x 水平平铺。
    repeat-y 垂直平铺。

    background-position:10% 30px;(保证有两个值;只有单个值(默认X轴值),第二个值中间)
    /*
    背景定位: x水平 y垂直
    100px 30px(像素值)
    10% 20%(百分比)
    (单词表述)
    left| center | right(X轴属性) top | center | bottom(Y轴属性) */
    background-repeat:repeat-x;
    background-position:center 0px;
    使图片重复平铺居中

    100px;
    height:100px;
    background:url(1.jpg)
    background-position: -100px -20px;
    既可以设置正数也可以设置负数,根据自己的需要来设置。
    background-attachment:fixed;
    固定背景不动。
    属性名称:样式值。
    /*单一样式*/

    background:#ccc url(image/123.jpg) no-repeat -100px -20px fixed;
    /*复合样式 背景样式的合并 统一属性不要拆分*/

    边框:

    border:1px dashed black;
    不同浏览器 粗边框造成不同的效果。
    border-top:5px solid yellow;
    定义边框顶部
    border-left:5px solid blue;
    定义边框左边
    border-bottom:5px solid green;
    定义下边框
    border-right:5px solid red;
    定义又边框
    边框四角可单独定义。

    PS前端开发: 切图(抠图)、测量、图片简单处理
    得到一张图片:
    1)设计师给的PS图片(首页.PSD文件)
    2)截图屏幕
    3)浏览器插件。F12,查找下载图片、雪碧图等。

    关于边框:
    边框的宽度独立于总体宽度。
    例:
    <style>
    #box{
    300px;
    height:150px;
    border:1px solid #fffff;
    }
    </style>
    上述代码中此BOX真实宽度为300+1PX,高度150PX+1PX;即边框独立于赋值宽度存在,需要得到一个总宽度300PX 高度150PX;BOX的时候,应为
    299px;
    height:149px;
    border:1px solid #ffffff;

  • 相关阅读:
    jquery animate()方法 语法
    jquery unload方法 语法
    jquery undelegate()方法 语法
    jquery unbind()方法 语法
    jquery trigger() 方法 语法
    jquery toggle()方法 语法
    jquery change() 函数 语法
    jquery blur()函数 语法
    jquery bind()方法 语法
    jquery checked选择器 语法
  • 原文地址:https://www.cnblogs.com/nico6/p/7327291.html
Copyright © 2011-2022 走看看