php 做的应用网站做qq链接的网站

php 做的应用网站,做qq链接的网站,人人设计网网址,网站分类页标题加长最近跟着学校出去实践#xff0c;了解也学了一些前端#xff0c;随便写点总结#xff0c;当做笔记也是整理思路的过程。本篇博客更像是我作为一个刚接触前端的人的自言自语#xff0c;有些东西#xff0c;我只是记录#xff0c;并不会深入分析#xff0c;因为我还没学多…最近跟着学校出去实践了解也学了一些前端随便写点总结当做笔记也是整理思路的过程。本篇博客更像是我作为一个刚接触前端的人的自言自语有些东西我只是记录并不会深入分析因为我还没学多少可以当个乐子看当然你如果愿意为我指出哪里的理解有误那就太好了1.HTML是超文本⽂本⾮⽂本⾳频、视频、图⽚.......标记标签语⾔也就是真正在⽹⻚显示的内容写网页是在后缀为.html 的文件中。2.VScode中!加回车就能自动生成一大串内容如下图body内是可以直接写文字的如下【到后面的时候不要以为内容必须写在div里】3.body中的内容要遵循文档流原则即从上到下、从左到右。4.a标签是跳转标签a回车 就能生成5.div结构标签很重要一定要理解为啥要用div标签div像一个容器可以将一些内容聚拢在一块。特征①div默认由内容撑大设置字体的大小div的宽也会被撑大或者改变也默认占据父元素的一整行如果不设置高或者内容就不会占据网页中的位置也就是不显示。【同样也是为什么div中子元素浮走后需要为父元素(容器)设置一个高让其漂浮在上面以免挤占下面行的内容】设置了背景颜色但没给内容或者高就不会在网页中占空间所以也就不会显示紫色的背景这也和后续不设置内容或者高就显示不了背景图片很像。不妨看看设置之后会产生什么效果②div和并行的div之间不是文档流原则它们默认占据一整行会一行一行往下走而单独的div里的内容是文档流原则也是从上到下、从左到右。③注意设置div的宽是设置的可视内容的宽并不会影响div还是父元素一整行的事实譬如有人会认为给两个并行的div设置成50%的宽它俩就能跑到同一行中其实是不行的。④想实现想下面这样的情况实现不占据一整行的换行以前想着写两个并行的div但不好正确应该是手动设置可视内容的宽度当文本内容写满一整行后就会自动换行的。6.浮动float一开始使用浮动是处理一行中左右都有内容的情况因为div是默认占据父元素一整行的所以写两个并行的div的话肯定是上下关系而不是左右关系使用浮动就能让div里的内容脱离文档流即不会再按照从左往右、从上往下的原则而是飘在网页上端同时飘着的内容不会重叠而是会挤占其他内容。正确的代码实现float:left; 让内容浮动在网页左侧可以使用多个float:left会按照写float:left的顺序一个个按照当前的左侧。7.盒子模型操场上有一个箱子箱子里放了一个篮球Content箱子里面的内容篮球由宽高组成Padding内容与盒子的间距篮球和箱子之间的空隙①会默认跟背景颜色一致②设置宽度如果只写padding会造成视觉上撑大盒子的效果单独再写一行box-sizingborder-box就可以避免撑大盒子的效果即从内容里扣走间距的内容统一设置/单独设置1.单独padding-right、left、top、bottom xxpxpadding 4个px 顺序是从上开始的顺时针方向2.统一Padding1个px 代表四个方向统一设置Padding 2个px 第一个代表相同的上下第二个代表相同的左右纵横Border盒子的厚度箱子的厚度——可以设置color、width、style注意不写border-stylesolid(实线)、dashed(虚线)就不会展示出border的宽度和颜色②设置宽度如果只写border会造成盒子被撑大的效果。单独再写一行box-sizingborder-box就可以避免即从内容里扣走间距的内容这么一看感觉padding和border似乎很像只是说padding可以设置颜色、宽高和类型。③颜色宽度和样式都是可以设置的1.四个方向上三个属性一起设置border:颜色、宽度、样式三个的顺序可以颠倒2.某一方向上三个属性一起设置3.四个方向上单独属性设置border-color/width/style:4.具体到某个方向的某个属性border-left-color拓展圆角 border-radiusMargin有多个箱子时箱子与箱子之间的距离①设置宽度统一/单独设置②margin:auto; 使容器div里的可视范围居于文档流宽度一整行的左右中央与上下无关8.辨析text-align和margin:autotext-align写在容器的属性里使得容器里的内容处于容器可视范围的左右居中位置margin:auto写在容器的属性里使得容器的可视范围处于文档流宽度的左右居中位置9.标签选择器用标签的名字控制标签注意是标签的名字比如body、div、img等等10.通配符11.background-image①不设置高是看不见背景图的背景图不是内容②精灵图技术将许多张小图片放在一起组成大图片12.img 与 background-imageimg是写在body里的但background-img是写在style里的13.定位 positionrelative相对定位①无论写不写偏移量都不会脱离文档流②偏移点是文档流的左上角。absolute绝对定位①只要在容器属性position中一写absolute就会脱离文档流无论写不写偏移量②由于脱离文档流所以它会先找一个离他最近的带有定位属性relative对祖先元素本身没有影响的祖先元素层级关系再以该祖先元素的左上角为偏移点进行偏移如果一直找找不到就会以网页的左上角进行偏移此时会随着网页的滚动而滚动【子绝父相】fixed定死不会随着页面的滚动而滚动14.一张图片放在div容器中给容器设置宽高图片的宽高如果不适配就会溢出这是可以给img加属性手动设置宽高即可。15.div里的内容单行的情况下想要上下居中要设置行高line-height等于div的高度16.隐藏元素17.父子伪类通过父亲控制儿子鼠标移进造成属性的变化