前端HTML、CSS之PC端布局
文章平均质量分 86
PC端布局
彩虹桥下的小淅猪
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端HTML、CSS--11(CSS-8)
这里的50%是走父盒子的50%,所以小盒子此时在大盒子偏右下角,然后再让小盒子走自身宽高的一半,即如果小盒子宽200高200,那么就margin-top:-100px;·transfrom:translate3d(100px,100px,100px):其中x,y,z分别指要移动的方向的距离,xyz是不能省略的,如果没有就写0。有了透视后,里面的值越大,物体就越变大,反之越变小。用伪元素,伪元素也是一个盒子嘛,给它宽高,然后例如给出一个左边框和下边框,然后再旋转45度即可得到一个指向下的三角箭头。原创 2023-04-19 09:56:31 · 260 阅读 · 0 评论 -
前端HTML、CSS--10(品优购练习)
2.下面这个整整齐齐排列我们想到用li,并且给li加浮动,而里面那些字是一个个链接,所以li里面是a,又因为字数不一样所以我们不给宽度,而是给它一个padding值让它自己撑开使得词组之间距离一样,那这里我们是给li它padding值还是a它padding值,我们给a,因为这样的话a范围就大了(因为a是行内元素,所以高宽是按这个字所占大小自定的),客户点击比如服装城附近的空白处就也可以进入链接,这样用户体验就好。5.下图这种实际中图片不是固定在那里的,很多时候图片是会滚动的,到后面学习JS时会学。原创 2023-04-13 11:43:17 · 300 阅读 · 0 评论 -
前端基础篇HTML、CSS--10(CSS-7)
比如上面这种我们之前是先一个大盒子,然后再左边一个盒子装手机字,右边一个盒子装箭头,然后都浮动,现在学了伪元素选择器就不用再弄一个盒子装箭头了,直接用伪元素before,after伪出一个盒子装这个箭头,这个伪的盒子在文档中是找不到的。然后执行的时候是首先看:nth-child(1) 即先找第一个孩子,那就是光头强,然后再回头去看前面的div,即这时候就会去看光头强这第一个孩子不是div,所以没有合意的,所以谁也没选。如果想要所有的属性都变化过渡,写一个all就可以。先去匹配E,然后再根据E找第n个孩子。原创 2023-04-06 19:37:21 · 363 阅读 · 0 评论 -
前端基础HTML、CSS--9(CSS-6)
如图,magin-left:-1px,浏览器渲染是这么渲染的,先看html找到第一个小li,先把相关样式执行一遍,第一个盒子左侧浮动再往左侧移动1px,然后再找第二个小li,第二个盒子也左侧浮动 ,因为浮动所以会紧贴着第一个盒子,这时候出现1+1的问题之间边框就变成了2px,然后此时因为magin-left:-1px,所以第二个盒子就会往左侧再移动1px,这时候中间2px的边框就会被压1px,最终中间只留下1px的边框。图片、表单都属于行内块元素,默认的vertical-align是基线对齐。原创 2023-04-05 17:35:26 · 528 阅读 · 0 评论 -
前端基础HTML、CSS--8(CSS-5)
但是如果有定位的盒子,请慎用overflow:hidden ,因为它会隐藏多余的部分,比如如下我们之前做的案例,如果用overflow:hidden就会隐藏掉hot右边超出盒子的部分。2.正常情况下,块级元素是默认占一行即高度为自身高度宽度和浏览器一样的,但是块级元素添加绝对或固定定位后,如果不给宽度或高度,默认大小是内容的大小,跟浮动一样。1.如果你往一个盒子里放图片,结果发现图片盒子小,可以在CSS中限定图片高宽和盒子一样大,就可以让图片盒子一样大小。1.让固定定位的盒子left 50%。原创 2023-04-03 19:28:09 · 381 阅读 · 0 评论 -
前端基础HTML、CSS--7(CSS-4)
这时候我们可以先准备一个标准流的父盒子,记住是标准流,给宽给高让它到页面最中央来,然后在父盒子里面再准备几个浮动的小盒子,这样的话我浮动的盒子就会以父盒子为准来进行浮动,就能约束浮动元素的位置。比如一个父盒子里面有两个子盒子,然后如果这两个子盒子浮起来,那么此时父盒子就不知道有孩子就高度变为0了,此时如果再来一个父盒子在下面准备装孩子,发现上面位置空空的就上去占了第一个父盒子的位置,这时候第二个父盒子的孩子就很懵了他爹都不要他了他要去哪找避风港嘛。·清除浮动之后,父级就会根据浮动的子盒子自动检测高度。原创 2023-04-02 16:09:39 · 404 阅读 · 1 评论 -
前端基础HTML、CSS--6(CSS-3)
虽然id选择器级别高过元素选择器并且还有important, 此时父亲权重已经无穷大,但是p继承过来权重只是0,而另一个p{}元素选择器权重为1,1>0,所以喜羊羊和灰太狼是选择粉红色而不是继承父亲的红色。当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下边距,下面的元素有上边距,则它们之间的垂直间距不是上边距+下边距之和,而是。不管父元素权重多高,子元素得到的权重都是0。如图,没有让里的字改变样式,可是出来的结果是和div改变的样式一样,即继承了父亲div的颜色,字体大小样式。原创 2023-03-30 15:55:29 · 353 阅读 · 0 评论 -
前端基础HTML、CSS--5(CSS-2)
常见的行内元素有等,其中标签是最典型的行内元素。6.如果生成的div类名是有顺序的,可以自增符号 $,比如div.demo$*5再tab键,它就会按顺序输出从demo1-demo5的类给你。再CSS中,可以工具选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。常见的块元素有-,,,,,,其中标签是典型的块元素。原创 2023-03-29 19:57:42 · 281 阅读 · 0 评论 -
前端基础HTML、CSS--4(CSS-1)
由于书写繁琐,并且并没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用。标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。比如表明这是一个大标题,表明这是一个段落,表明这有一个图片,表示此处有链接。·特殊情况下采使用,后面学习使用场景(以下是清除所有的元素标签的内外边距,后面学)通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。原创 2023-03-28 18:50:19 · 304 阅读 · 0 评论 -
前端基础HTML、CSS--3(HTML标签(下))
,直接在标签中输入其它标签或者文字的做法都是不允许的,比如在中间加标签、在中间放文字都是错的。中间只能嵌套 姓名 性别 年龄原创 2023-03-27 20:22:13 · 351 阅读 · 0 评论 -
前端基础HTML、CSS--2(HTML标签(上))
首页。如你要点“个人经历”后就跳到个人经历部分,那就把个人经历四个字夹到原创 2023-03-24 16:36:38 · 268 阅读 · 0 评论 -
前端基础班HTML、CSS --1概念
浏览器不同,我们写的页面又是通过浏览器展示出来的,那不同的浏览器展示出来可能页面或者排版就有些差异,比如我在HTML文件中写了些文字,在这个浏览器显示出来16大小,有的浏览器显示出来是24大小,要想大家在各浏览器看到的是一样的,就需要遵循web标准。网页是由网页元素组成的,这些元素是利用HTML标签描述出来,然后通过浏览器解析器来显示给用户的。其实我们的网页是通过HTML语言创建出来的,所以称为HTML文件,那到底什么是HTML呢?网页是网站中的一“页”,通常是HTML格式的文件,它通过浏览器来阅读。原创 2023-03-23 10:12:43 · 412 阅读 · 0 评论
分享