尚优选总结

尚优选

重点

点击放大镜+轮播图

轮播图(运动=起点+步长=目标值)

是ul在动,可以默认开始0px;距离限制
函数功能没问题,但是未实现功能,可能是绝对定位的问题-

css定位区别

\1. relative(相对定位):相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。
\2. absolute(绝对定位)绝对定位元素以父辈元素中最近的定位元素为参考坐标,如果绝对定位元素的父辈元素中没有采用定位的,那么此绝对定位元素的参考对象是html,元素会脱离文档流。就好像文档流中被删除了一样(如果绝对定位元素的父辈元素中没有采用定位的,那么根据根)
\3. fixed (固定定位)位移的参考坐标是可视窗口,使用fixed的元素脱离文档流。 4.static (静态定位)默认值,元素框正常生成的,top left bottom right这几个偏移属性不会影响其静态定位的正常显示

问题及解决

去导航栏最后一个边框去掉,但未去除其间距 与 行标签仍有间距一样(清除元素自带边距)

父元素font-size=0 消除所有元素间距 子元素 font-size显示

访问内置文本框中的某个属性如placeholder

&::-webkit-input-placeholder

image-20230106195528836

改变光标 cursor属性 cursor:pointer 是手

3.导航分类布局 &:firstchild出错

&引用父亲,注意嵌套在哪个盒子里 (正解:一行a之中的firstchild)

文字加粗 font-weight: bold;

text-align文本对齐方式

js中文件引入,要先引入需要加载的父,再引入使用父的子

子元素浮动导致父元素高度塌陷------css溢出隐藏h3

image-20230108202546798

HTMLDOM获取css(querySelector与querySelectorAll区别)

​ 1. querySelectorAll 是找出所有匹配的节点后,返回对应的元素节点数组.

​ 2. querySelector 是找到一个后立刻返回找到的第一个节点对象,如果没有则返回null.

​ 3. 返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果

HTML

nav标签

并不是所有的 HTML 文档都要使用到

input标签属性

input中默认文字,在用户输入时不消失,用value;消失,用 placeholder

img src alt

alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

或者用getElementById

创建元素后createElement 追加元素appendChild

span用于对文档中的行内元素进行组合。空格(“ ”)

innerHTML才能识别标签,innerText只能识别纯文本

CSS

:first-child 与 :first-of-type

:first-child 当出现 p:first-child 时,其所匹配的元素必须符合以下两点:1.必须为p标签;2.必须为某个父元素的第一个子元素
:first-of-type 当出现 p:first-of-type 时,其所匹配的元素为所有子元素中的第一个p标签(不论该p标签是否为第一个子元素)

margin与padding

尚优选 margin: 0 auto;上右下左0 auto由浏览器决定边距
里面auto 是为了居中
auto浏览器计算外边距。
length规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
%规定基于父元素的宽度的百分比的外边距。
inherit规定应该从父元素继承外边距。

image-20230106152146048

id与#,class与.

(1)id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

(2)class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

(3)标签可直接定义

float高度塌陷及解决

溢出隐藏 overflow hidden

当一个父元素里面的所有元素都是浮动元素时,此时父元素无法识别这些浮动子元素,会进一步导致父元素发生高度塌陷问题。

***方法1*:**一种通用的解决方案就是在父元素内部的尾部append一个非浮动的、尺寸为0的块级元素(简称fix元素),然后使用clear:both,让这个fix元素换行显示,进而让父元素能够识别前一行的高度。这种朴素的方案其实就是clearfix的基本原理,clearfix只是更加优雅地用 :after 来实现fix元素。(尚优选使用)

***方法2*:**给父容器添加overflow属性为auto,overflow属性指定如果内容溢出一个元素的框,会发生什么。

方法3:可以通过将父元素声明为BFC(块级格式化上下文)元素来实现。例如将container的position属性设置为absolute:

position

absolute和relative的区别

absoleute绝对定位的意思是说,它的定位不受父元素中其他元素的影响

relative相对定位,就是会受到父元素中其他元素影响

box-size

box-sizing 属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 “border-box”。这样就可以让浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

display

display :none 将元素设置为none时,被隐藏的元素不会占用自身固有宽度高度空间,也无法显示;display :block被隐藏的元素会变为块级元素;行内元素将会变为块级元素,如果不指定宽高,默认会继承父元素的宽度,并且独占一行,即使宽度有剩余也会独占一行,高度一般以子元素撑开的高度为准,当然也可以自己设置宽度和高度;
display :inline将元素设置为inline时,被隐藏的元素会变为行内元素并显示;块级元素将会变为行内元素,宽度、高度、text-align、margin-top、margin-bottom无效;
display :inline-block将元素设置为inline-block时,被隐藏的元素会变为行内块元素并显示; inline-block既具有block的宽高特性又具有inline的同行元素特性。 通过inline-block结合text-align: justify 还可以实现固定宽高的列表两端对齐布局;
display :inherit继承父元素 display 属性的值

white-space: nowrap; 规定段落中的文本不进行换行

找直接儿子元素 用>

image-20230110100005793

JS

详解a标签中href="javascript:"的几种用法

尚优选 a href=“javascript:;” 禁止超链接跳转

1、a href="javascript:js_method();"

​ 这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

​ 2、 a href="javascript:void(0);" onclick="js_method()"

​ 这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

​ 3、a href="javascript:;" onclick="js_method()"

​ 这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4、a href="#" onclick="js_method()"

​ 这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5、a href="#" onclick="js_method();return false;"

​ 这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

6、删除

这种方法在点击 a 标签时,执行一个 js 另外自定义函数 todoFun(void) 。并传参 void。

a中href=“#”

a中href="#"表示回到最顶部。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮,回到顶部,那么此时可以考虑用这种最简单的方式实现。

<span style="font-size:14px;"><a href="#">回到最顶端</a></span> 

href="URL"的作用

1、URL为绝对URL

此时指向另一个站点,比如href=“http://write.blog.csdn.NET”,那么点击时就会直接跳转到这个链接的页面。

2、URL为相对URL

此时指向站点内的某个文件,比如href=“/test.doc”,那么点击时就会直接下载文件。

3、锚 URL

​ 此时指向页面中的锚,比如href=“#top”,那么点击时就会到当前页面中id="top"的这个锚点,实现当前页面的所谓跳转。用的最多就是在可滚动页面中,添加菜单,可以直接回到页面中的某个部分的内容

鼠标移入移除效果(onmouseover\onmouseenter)

两者区别在于需不需要当移入时影响父元素,onmouseover有事件冒泡效果,onmouseenter无,

getBoundingClientRect() 获取元素位置;event.clientX相对浏览器X轴位置;offsetWidth为元素站位宽度

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。

getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。
该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;

重新设置css中left、top等:用style

Git

.gitignore提交时忽略某文件

.gitattributes不同开发者不同系统的换行等配置不同,由git处理或者忽略

git status 命令,查看当前工作区的状态

git add -A 完成了git add .与git add -u

git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件。

git add -u :他仅监控已经被add的文件(即tracked file),他会将被修改的文件提交到暂存区。add -u 不会提交新文件(untracked file)。(git add --update的缩写)

git add -A :是上面两个功能的合集(git add --all的缩写)

git提交相关

实例描述
git commit -m “message”提交到版本库,并指定提交信息。
git commit -a -m “message”-a 参数表示,可以将所有已跟踪文件中的执行修改或删除操作的文件都提交到本地仓库,即使它们没有经过 git add 添加到暂存区。
git commit --amend追加提交,它可以在不增加一个新的 commit-id 的情况下将新修改的代码追加到前一次的 commit-id 中。

git push -u origin master 提交远程连接仓库

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bwywb_3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值