![](https://img-blog.csdnimg.cn/01e83c1631584932aa0e969862554f75.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
✨前端CSS经典布局✨
文章平均质量分 77
前端经典的布局。
张清悠
学会不为过程的缓慢而焦虑,即使暂时未能如你所愿,但只要你在努力,你就在不断成长!
展开
-
前端用CSS就可以实现移动端的横向滚动导航条
一、 应用场景:1.如我们伟大的CSDN平台2.或者我们常见的今日头条二、直接代码HTML部分:<div class="nav"> <a href="#">关注</a> <a href="#">推荐</a> <a href="#">程序人生</a> <a href="#">Python</a> <a href="#">Java</原创 2021-07-03 14:13:38 · 1906 阅读 · 0 评论 -
初始CSS选择器
选择器要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。CSS基础选择器1、通配符(全局)选择器通配符选择器用“ * ”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。*{margin:0,padding:0}2、标签原创 2021-11-25 20:30:00 · 329 阅读 · 0 评论 -
CSS样式表的引入方式
CSS初识CSS(Cascading Style Sheets)美化样式CSS通常称为 CSS样式表 或 层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等CSS的优点1.内容与表现分离。2.网页的表现统一,容易修改。3.丰富的样式,使得页面布局更加灵活4.减少网页的代码量,增加网页的浏览速度。5.运用独立于页面原创 2021-11-24 21:30:00 · 3306 阅读 · 0 评论 -
CSS基础浮动和清除浮动的分享
一、浮动(float)标准文档流(normal flow)CSS的定位机制有3种: 标准文档流、浮动和定位。标准文档流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列。浮动(float) 浮动是个很有意思的事情:就是让任何盒子可以一行排列。1.浮动(float)浮动是个很有意思的事情:就是让任何盒子可以一行排列。什么是浮动?元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,具有float属性元素在父标签中是不占空间原创 2021-11-23 21:30:00 · 169 阅读 · 0 评论 -
前端布局和兼容
前言:版心和布局流程阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰、易读。同样,在制作网页时,要想使页面结构清晰、有条理,也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。一、布局流程为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:1、确定页面的版心(可视区)。2、分析页面结构。3、制作HTML结构 。4、CSS初原创 2021-10-07 21:00:58 · 200 阅读 · 0 评论 -
前端经典圣杯布局和双飞翼布局
介绍圣杯布局和双飞翼布局解决的问题是一样的就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。区别不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relati原创 2020-09-22 21:28:54 · 1577 阅读 · 1 评论