[目录]目录[目录]一、基础介绍二、经典的行布局三、经典的列布局四、混合布局五、圣杯布局六、双飞翼布局一、基础介绍认识布局:以最适合浏览器的方式将图片和文字排放在页面的不同位置布局模式有多种,不同的制作者会有不同的布局设计二、经典的行布局行布局自适应;行布局自适应限制最大宽;行布局垂直水平居中<!DOCTYPE html>
<html lang="en">
<head            
                
         
            
            
            
            CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。要想让CSS对网页内容有效果,必须将CSS代码引入网页,通常有四种方式,详见下文。          .1     &nbs            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-26 13:49:26
                            
                                75阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            CSS代码语法CSS参考手册网址:http://www.w3school.com.cn/cssref/index.asp·  css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:选择符:又称选择器,指明网页中要应用样式规则的元素,如网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。     &nbs            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-29 22:04:52
                            
                                431阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            (给前端大全加星标,提升前端技能)作者:寒水寺一禅1、-webkit-line-clamp可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..."这是正常的展示display:这是加了 line-clamp 后的展示https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp2、all将除却 un            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-08-22 13:52:49
                            
                                221阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong,             
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-03-07 09:34:00
                            
                                766阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1、高度和宽度 默认情况下,高度和宽度无法应用在行内标签上。 默认情况下,块级标签虽然设置的\            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-19 20:42:25
                            
                                986阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            文章目录CSS样式padding(内边距)CSS样式padding(内边距)padding: 1px 2px 3px 4px; /*参数顺时针:上右下左4个参数 上右下左3个参数 上(左右)下2个参数 (上下)(左右)1个参数 上下左右相同单位 cm,px,%,inherit默认值: 0px*/...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-08-19 10:04:01
                            
                                247阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            <!-- CSS样式 三种使用方法:link style 行内样式 选择器: 1.基础选择器:tag #id .class , * 2.层次选择器:空格 > + ~ 空格:所有子代 >:第一代 +:第一个兄弟节点 ~:后面的所有兄弟节点 3.表单选择器 :type属性————>jquery写法 in ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-22 17:27:00
                            
                                199阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            d(#),class(.)id指令:# ; class指令:div#testdiv.test子节点(>),兄弟节点(+),上级节点(^)子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^div>ul>li>pdiv+ul+pdiv>ul>li^div (这里的^是接在li后面所以在li的上一级, ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-28 23:30:00
                            
                                181阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1、什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变。。。) 盒子模型 浮动 定位 网页动画(特效效果) 1.1什么是CSS Cascading Style Sheet 层叠级联样式表 CSS:表现(美化网页) 字体 ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-09-25 09:46:00
                            
                                370阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            text-align:center 字体居中 background-image:url()设置背景 font-weight:去掉字体样式 属性:normal background-position:设置图像的起始位置 display: inline-block:可以是列表中每个li平铺到一行(li不 ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-26 20:46:00
                            
                                201阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            “text-decoration: none;”是css样式,表示的是文本没有下划线,一般用来去除a标签默认样式的下划线 1. vertical-align 属性 :设置元素的垂直对齐方式 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上 ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-27 18:34:00
                            
                                395阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1.字体颜色渐变 background-image:linear-gradient(to bottom, #5affa, #0076ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; 2.背景颜色渐变 bac ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-05 22:03:00
                            
                                334阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            文章目录CSS样式padding(内边距)CSS样式padding(内边距)padding: 1px 2px 3px 4px; /*参数顺时针:上右下左4个参数 上右下左3个参数 上(左右)下2个参数 (上下)(左右)1个参数 上下左右相同单位 cm,px,%,inherit默认值: 0px*/...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-01-20 15:17:21
                            
                                200阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            需求:鼠标移入删除按钮,无法编辑他人工时,编辑按钮应置灰展示 如下图: 1.使用两个方法 Item:get Css Value(获取css样式方法) Object 填写要获取的元素(“编辑”) input(按f12检查该条元素写的背景色)注意看自己要获取的是什么样的css方法 Output(取个变量            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-11-05 01:21:43
                            
                                687阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.HTML+CSS布局(DIV+CSS):主要通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型,盒子类型,CSS浮动,CSS定位,CSS背景图定位等知识来布局,主流布局2.CSS介绍:为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆开,CSS(CascadingStyleSheets)层叠样式表,HTML中大部分表现样式的标签就废弃不用了,HTML只负责文档的结构和内容            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2018-12-19 19:21:26
                            
                                876阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            一、css样式 字体样式: 1.font-famliy:字体类型 可以设多个类型用“,”隔开, 应用是先从第一个应用 ,如果该文字没有该字体,就应用第二个字 体依次类推。 2.font-size:字体大小 单位:px :根据屏幕分辨率计算单位 em :相对单位,相对于当前文字的大小计算 3.font            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-11-05 21:46:00
                            
                                470阅读
                            
                                                                                    
                                2评论