前端入门小笔记

boy 火巨

常用

width宽度        red红色   blue蓝色   yellow黄色   green绿色   height高度       white白色   black黑色   gray灰色   silver银色

background背景     pink粉色  khaki卡其色   greenyellow黄绿色

从网址上传递参数,和获取参数

window.location.href="tbwnv.html?search="+num   传
var aa=window.location.search.substr(12,5);           获取

 

html:5   TAB键 或 !TAB键

<title>Document</title>   Document网页名字

回车下面写style   TAB键

<body>

下面写  div.h1  TAB键  

        width: 宽  《外丝》 

        height  高度 《海特》

        background:red  颜色  《百克如昂的》

插入图片   background:url 图片位置/路径

 no-repeat right center;上下居中连接图片为背景不平铺,向右显示

      background-size:cover; 背景填充

 

 

           repeat-x 横向平铺  repeat-y纵向平铺

嵌套    div class=“h1”  起名字 不能用特殊符号,数字,汉字 

 

浮动    float:left;  [none 无 left左对齐  right右对齐] 

          没有上下只有左右浮动

定义外边距 margin-top:20px;定义元素的外边距一个方向 

            [top上 left左 bottom下  right右]

          margin:0px;     定义上下左右

          margin:0px 10px;上下为0,左右为10px;  

          margin:0px 0px 0px 0px;上右下左

          margin:0px auto;上下为0左右居中;

 

针对下级包含的元素统一排列     .dh div{ }        后加div

表单 <input type="text">               文本框       《泰克斯特》

     <input type="password" value="">  定义密码框   《怕死沃尔德》

     <input type="checkbox">           定义复选框

     <input type="radio">              定义单选框

     <input type="button" value="搜索"> 定义按钮

     <textarea></textarea>              定义文本输入区

     <select class="select">

   <option>请选择</option>

   <option>河南一区</option>

   <option>北京二区</option>

   </select>                   定义下拉菜单

定义内填充 padding-left: 20px;  占宽高,设置完要减去相应的尺寸

       内填充后不用减去对应的尺寸

       box-sizing:border-box;

 

                   方向   像素

行间距离 line-height: 36px;  设置行间的行高

定义边框 border-top: 2px  solid #FFFFFF;

       top 方向   solid 实线  dotted点状   dashed虚线  double双线

段落    <p>   </p> 段落标签,网页中的大段落文字用到

标题    <h1></h>....<h6>   标题标签  <h1>最大只用一次 <h6>最小

图片    <img src"=图片位置/路径/>链接图片标签,没有结束标签

字体样式:

字体大小   font-size: 15px;

字体样式   font-family:"黑体"   字体加引号如宋体

加粗       font-weight:bold;

去掉加粗   font-weight:normal;

斜体       font-style:italic;

字体对齐: text-align:left  左对齐  right右对齐    center居中     

文本颜色   color: #FFFFFF;

下划线     text-decoration:underline

文字间距   text-indent:20px     首行缩进

             letter-spacing:8px;  两字间距

             line-height:20px;    两行间距

<span></span>针对行元素的标签

<dl>

    <dt>计算机</dt>     <dt></dt>里面包含图片

    <dd>计算机</dd>     <dd></dd>里面放p标签文字

</dl>....定义列表 标签一般用于图文混排

 

 

超级连接标签

    <a href="" target="_blank"></a>   用于一个网页跳转到另一个网页重要的是href  它指示连接目标  targ="_blank"跳转到另一个页面打开新窗口

 

<span></span> 提示注释标签用于改变特殊字体颜色

 

<strong></strong>和<p></p>强调文本常用加粗字体

 

<s></s>和<del></del>定义加删除线文本

 

<i></i>和<cite></cite>  显示斜体字文本

 

<hr/>在HTML中创建一条水平线

 

<br/>插入一个简单的换行符  强制换行

 

表单标签

 

文本框      <input type="text" value=""/>

密码框      <input type="password" value=""/>

复选框      <input type="checkbox/>

单选框      <input type="radio"/>

按钮        <input type="button" value="按钮"/>

文本输入区  <textarea></textarea>

 

<select>

      <option>北京一区</option>

      <option>河南一区</option>

      <option selected="selected">广州<option>...

</select> 

定义下拉菜单   selected="selected"

    这个代码加给哪个option 哪个就默认在下拉框中显示

 

网页引入CSS样式的几种方法

1.内联(行内样式)直接写在现有的标记中比如:

<p style="font-size:24px;>"www.baidu.com></p>

2.嵌入式样式表(内嵌式)使用<style></style>

标签嵌入到HTML文件头部<head>标记中 如:

<style.sype="text/css>

·p{

font-size:18px;

color:#093;

}

</style>

3.外链式(外部样式表)使用<link>标签调用CSS文件(开发中用这种方式)

CSS在网页中应用的方式后缀名为XXX.css  如:

 <link rel="stylesheet" type="text/css" href="style/style.css"/>

 

划过样式改变 .box12 li:hover 样式元素后加:hover{

 

 

行内元素标签:<a href=""></a> <span></span>、<img src=""/>

       <input type="text"> <b></b> <select><option></option></select>

 

块元素<div></div> <h1></h1> <p></p> <ul><li></li></ul> <ol><li></li></ol> 

      <dl><dd></dd><dt></dt></dl>

特点:行内元素并列在一行内 块元素自己独占一行

      行元素转换成块元素用    display:block

      块元素并列同一行加 float:left

 

加载样式

       <link rel="stylesheet" type="text/css" href="css/reset.css">

 

 

.box6 li:hover{                    -----------划过

color: red;                -----------字体颜色

border:1px solid #F2F2F3;  -----------边框

}

.box6 img{                         -----------给插入图片加属性

width: 217px;          ---------------图片宽

height: 100%;          ---------------图片按比例高放大或缩小

}

.box6 .cai{

width: 217px;          ---------------

height:252px;          ---------------

position: relative;    ---------------相对定位目标体依据这个盒子的位置给需要动的盒子做参考

}

.box6 .cai .fg{

width: 217px;

height: 46px;

background: rgba(0,0,0,0.4);----------RGB颜色 最后一位透明度,只作用元素颜色背景最大1完全显示,最小0不显示

 opacity:0.5;     ---------------------总透明度作用元素和元素里面所有的元素最大1完全显示,最小0不显示

font-family: "微软雅黑";    ----------更改字体样式如“仿宋”“黑体”加引号

line-height: 46px;          ----------字体行高

text-align: center;         ----------字体居中

position: absolute;         ----------绝对定位定位中需要动的盒子参照上面的目标进行移动

top: 30px;        --------------------绝对定位上30像素

left:19px;        --------------------绝对定位左19像素

        z-index:999;  ------------------------定位后控制层次,1最下面数越大越往上显示 

        position: fixed;--------------------固定定位相对于浏览器窗口,窗口滚动依旧浏览器固定位置显示特点类似绝对定位

        top: 30px;

        left:19px;

}

border-radius:50%//定义圆角  

border-radius:20px左上   40px右上   60px右下   80px左下;

 

 

div{box-shadow:0 0 1px #000 inset;} 盒子阴影  有inset 代表框内阴影 ,不带inset 代表框外阴影。

 

加小手

cursor:pointer;

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭