web前端实训

最新推荐文章于 2024-06-19 22:03:35 发布

DeepVoice

最新推荐文章于 2024-06-19 22:03:35 发布

阅读量5.5k

点赞数

分类专栏： Web前端实训文章标签： web前端 web

本文链接：https://blog.csdn.net/weixin_37543460/article/details/81175945

版权

Web前端实训专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 学习总结
编写网页的时候先初始化各个块状元素

“
body,div,ul,li,h1,h2,h3,h4,h5,h6,p,dl,dt,dd{
margin: 0;
padding: 0;
}


display：inline-block  [用法与区别](https://www.cnblogs.com/Ry-yuan/p/6848197.html)

div{
width:100%;
margin:0 atuo
}
div居中

div{
text-align:center;
}
内容居中

float的用法[float](http://www.w3school.com.cn/css/css_positioning_floating.asp)

text-indent:2em;   //文字缩进2个字符
p.normal {font-weight:normal;} //不加粗
p.thick {font-weight:bold;}//加粗
p.thicker {font-weight:900;}//变细

![font-style](https://img-blog.csdn.net/20180724114535140?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

text-decoration:undline//下划线
border-style:dashed;dotted;double
                    //长虚线，点虚线，重复；
![border](https://img-blog.csdn.net/20180724145547633?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
相对定位和绝对定位的理解和实例

![实例](https://img-blog.csdn.net/20180724202037363?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

今天学习做照片墙，用到的东西有transform：salce（大小，离用户的远近）,rotate（倾斜），transtition(过渡效果)
salce(1.5,1.5)，z-index://z轴的层数
rotate（30deg）//deg代表度数
transition(all 2s)//2s代表过渡的时间
rotateX,Y,Z:30deg//绕三个轴旋转
translateX,Y,Z：50px//沿着三个轴移动
伪类 ：img:nth-of-type(1)｛｝//nth-of-type的对象是标签
rgba设置的是背景颜色的不透明度进而改变了背景颜色的值
rgba（0，0，0，0-1）//最后一个是透明度
浏览器内核及私有前缀

-webkit-transform:rotate(-3deg); /为Chrome/Safari/
-moz-transform:rotate(-3deg); /为Firefox/
-ms-transform:rotate(-3deg); /为IE/
-o-transform:rotate(-3deg); /为Opera/
transform:rotate(-3deg); /为nothing/


声明动画：@keyframes+名字｛  动画内容｝
![动画](https://img-blog.csdn.net/20180726144227121?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

![audio的播放和暂停](https://img-blog.csdn.net/20180726173745934?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
audio的播放和暂停的jq函数
get（0）表示找完所有audio的集合中的第一个。

div {
perspective: 1000px;
}

ul {
width: 300px;
height: 300px;
line-height: 300px;
margin: 150PX auto;
position: relative;
transform-style: preserve-3d;/将视图转变为3d模式/
transform: rotateX(30deg) rotateY(30deg);/设定初始位置/
/animation:rotate 2s infinite;/
/text-align: center;/
}

ul:hover {
animation: rotate 6s infinite;/* 函数名执行时间执行完后执行的动作*/
}

ul li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 15px;
text-align: center;
border: 1px solid #00BFFF;
box-sizing: border-box;
}

@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);/从0到360旋转的函数/
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

li:nth-of-type(1) {/只对普通标签使用/
background-color: #00BFFF;
transform: translateZ(150px);
}

li:nth-of-type(2) {
background-color: antiquewhite;
transform: translateZ(-150px) rotateY(180deg);/向后移动150px,绕Y轴旋转180度/
}


面向屏幕Y轴，然后根据图片翻转，图片正面是Y轴

下面是解决display：inline-block的两个元素之间的间隔的方法[方法](https://www.w3cplus.com/css/inline-blocks.html)
在父元素加 display: inline-table;
在父元素加font-size：0，在子元素加font-size：10
下面是解决float带来的负面影响[float的负面影响 ](https://blog.csdn.net/tugangkai/article/details/54578248)
若是想让下一个元素放在浮动元素的下方，就在想放的元素里写clear:both；

<form>
    <input type="radio" name="5" value="" />5
    <input type="radio" name="5" value="" />6
</form>

实现单选按钮的一组按钮的name要相同才可以互斥

重置

type=reset要在form的包裹下才可以清楚所有的输入

![datalist](https://img-blog.csdn.net/20180801141840389?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
list的后面要写上datalist的id

html5实战

章节

Deep

Healer

Deep

Healer

Deep

Healer

Deep

Healer

![detail](https://img-blog.csdn.net/2018080114363510?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

所有CSS伪类/元素[伪类元素的选择器](http://www.runoob.com/css/css-pseudo-classes.html)

![属性选择器](https://img-blog.csdn.net/20180803111018281?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

[border-image的用法](http://www.wqcms.com/html/c31/2012-06/3381.html) 

![可变形的正方形](https://img-blog.csdn.net/20180803171549658?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
[可变形的正方形](https://blog.csdn.net/ztj771299799/article/details/79806769)

![flex](https://img-blog.csdn.net/20180806195550138?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
![这里写图片描述](https://img-blog.csdn.net/20180806195617331?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU0MzQ2MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

function sum4(arg1, arg2) {
var pact = arguments.length; //表示形式参数的个数
var real = sum4.length;//表示实际参数的个数
if(pact < real) {
var e = new Error();
e.number = 100001;
e.message = ‘实际参数不合法’
throw e;
}
}

web前端面试必中的题目：什么是闭包、.。

js向数组追加元素，通过push（）的方法。

js转换ASCII码 的方法
大写字母A 到Z 的值是从65 到90

小写a到z 是从91 到 122

字符转ascii码：用charCodeAt();
ascii码砖字符：用fromCharCode();

var strVariable;
for(var i=0;i<25;i++)
{
console.log(String.fromCharCode((65+i)));
}

strVariable.toUpperCase( ); //转大写
strVariable.toLowerCase( ); //转小写
//字符转ascii码：用charCodeAt();
//ascii码砖字符：用fromCharCode();
//大写字母A 到Z 的值是从65 到90;
//小写a到z 是从91 到 122;
//如：

　　str=”A”;
　　code = str.charCodeAt();//65
　　str2 = String.fromCharCode(code);//A
　　str3 = String.fromCharCode(0x60+26);//Z


DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流

本节向大家描述一下DIV中display和visibility的差别，visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征，虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

DIV中display和visibility属性差别

visibility属性：

确定元素显示还是隐藏；
visibility="visible|hidden"，visible显示，hidden隐藏。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。


[树形菜单 JS](https://blog.csdn.net/dengfei00100/article/details/50427340)
[树形菜单的算法1](http://www.51xuediannao.com/javascript/digui_diedai.html)
[树形菜单的算法2](http://www.51xuediannao.com/javascript/digui_shu.html)
我们经常会给某一个DOM元素绑定事件，常规的方式:

$(“target”).click(function(){…})

这种方式对已经存在的元素是没问题的，但是如果我们此时需要为动态添加的DOM元素，即该元素可能在绑定时还未出现在DOM中，那么利用常规的方式是无法成功绑定的，
我们需要利用Jquery提供的以下方式进行绑定：

$(document).on(‘click’,’selector’,function(){
…
});

“`
此时事件冒泡到document对象上，当检测事件的target，如果与传入的选择符（这里是selector）匹配，就触发事件，否则不触发

DeepVoice

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
web前端实训

HTML 学习总结 display：inline-block 用法与区别div{width:100%;margin:0 atuo}div居中div{text-align:center;}内容居中float的用法float
复制链接

扫一扫

专栏目录