前端学习以及问题记录

xiaoxiao2021-02-28  73

在上家公司的时候有段时间一直在写前段页面,对于我这种前段菜狗来说来说,写出好看又不失功能的页面,是在是一种挑战,想恶补一下前段的知识: wifth宽度        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; 修改js中form的submit方法实现自己的form表单校验 通过封装实现js中对象原本没有的方法:   使用FieldSet和legend实现输入框边缘的加入文本效果(之前是通过文字的边距这种笨办法实现的) 全局变量的使用要谨慎,页面嵌套的时候注意重命名;注意A包含B(一个Ifream)的时候相互获取和操作变量的方法;
转载请注明原文地址: https://www.6miu.com/read-2613357.html

最新回复(0)