前端入门小笔记

boy 火巨

常用
width宽度        red红色   blue蓝色   yellow黄色   green绿色
height高度       white白色   black黑色   gray灰色   silver银色
background背景     pink粉色  khaki卡其色   greenyellow黄绿色
var urls=window.location.search
var urls=window.location.href

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;

阅读更多
个人分类: 通用
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭