页面布局解决方案

页面布局解决方案

居中布局

水平居中

子元素相对于父元素居中且子元素宽度可变。

除了另外声明，HTML结构为以下内容：

    
Demo

inline-block + text-align

.parent {
    text-align: center;
}

.child {
    display: inline-block;
    width: 300px; /*宽度可变*/
    background: #ffff00;
}

优点

• 兼容性好（甚至可以兼容 IE6 和 IE7）

table + margin

    
Demo


.parent {
    text-align: center;
}

.child {
    display: table;
    margin: 0 auto;
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

NOTE: display: table 在表现上类似 block 元素，但是宽度为内容宽度。

优点

• 不需要设置父元素样式 （支持 IE8 及其以上版本）

NOTE：兼容 IE8 以下版本需要调整为

的结果。

absolute + transform

.parent {
    position: relative;
    text-align: center;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

优点

• 绝对定位脱离文档流，不会对后续元素的布局造成影响。
• 子元素设置绝对定位 position: absolute;，父元素设置相对定位 position: relative; 是典型的定位方法，多用于为子元素设置定位的参考点。

缺点

• transform 为 CSS3 属性，有兼容性问题。

NOTE：transform属性的translateX和translateY对元素进行旋转、缩放、移动或倾斜，其中移动功能可以用于定位。

flex + justify-content

.parent {
    display: flex;
    justify-content: center;
    text-align: center;
}

.child {
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

/* 下面的方法，可以达到一样的效果 */
.parent {
    display: flex;
    text-align: center;
}

.child {
    margin: 0 auto;
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

优点

• 只需设置父元素属性，无需设置子元素。

优点

• flex有兼容性问题。

垂直居中

子元素相对于父元素居中且子元素高度可变。

table-cell + vertical-align

.parent {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    background: #ffff00;
}

优点

• 兼容性好（支持 IE8，以下版本需要调整页面结构至 table）

absolute + transform

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ffff00;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

优点

• 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

缺点

• transform 为 CSS3 属性，有兼容性问题。

flex + align-items

.parent {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    width: 200px;
    height: 200px;
    background: #ffff00;
}

优点

• 只需设置父节点属性，无需设置子元素

缺点

• 有兼容性问题

水平与垂直居中

水平与垂直居中的一般性布局在另一篇文章中有过总结，可以作为参考学习。

子元素相对于父元素水平垂直居中且其（子元素与父元素）高度宽度均可变。

inline-block + text-align + table-cell + vertical-align

.parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 300px; /*宽度和高度均可变*/
    height: 300px;
    background: #ffff00;
}

.child {
    display: inline-block;
}

优点

• 兼容性好

absolute + transform

.parent {
    position: relative;
    width: 300px; /*宽度和高度均可变*/
    height: 300px;
    background: #ffff00;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

优点

• 绝对定位脱离文档流，不会对后续元素的布局造成影响。

缺点

• transform 为 CSS3 属性，有兼容性问题。

flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px; /*宽度和高度均可变*/
    height: 300px;
    background: #ffff00;
}

优点

• 只需设置父节点属性，无需设置子元素

多列布局

多列布局在网页中很常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应，还有等分布局等。

一列定宽，一列自适应

除了另外声明，HTML结构为以下内容：

    

        
left
    
    

        
right
        
right
    

float + margin

p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    margin-left: 100px;
    background: #c7254e;
}

float + margin + (fix) 改造版

    

        
left
    
    

        

            
right
            
right
        
    


p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
    position: relative;
}

.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
}

.right {
    margin-left: 100px;
    background: #c7254e;
}

NOTE：此方法不会存在 IE6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。

float + overflow

p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    background: #c7254e;
}

设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式化文本。 BFC 中的内容与外界的元素是隔离的。

overflow: hidden; 除了隐藏溢出内容外，还具有清除浮动的功能，具体实现是触发 BFC 或者 IFC，而这也是很常用的方法。overflow: hidden;对与父元素显示区域重叠部分进行切割，只在 BFC 区域显示，从而实现浮动的清除。

clear: both; 是经典的清除浮动方法，但它与 overflow: hidden;有很大的区别。clear: both;是清除父元素同一侧的浮动元素，即同一侧不允许存在其他浮动内容，子元素需换行显示。如果布局目标是同侧有其他浮动元素，可以选择 overflow: hidden;。这个特性称为浮动元素闭合。如果有对这个特性感兴趣或者研究透彻的朋友请多多指教，这个在解决高度坍塌、触发BFC等方面应用广泛，且非常实用。

table

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left {
    display: table-cell;
    width: 100px;
    background: #ffff00;
}

.right {
    display: table-cell;
    /*宽度为剩余宽度*/
    background: #c7254e;
}

table 的显示特性为每列的单元格宽度和一定等于表格宽度。 table-layout: fixed; 可加速渲染，也是设定布局优先。

NOTE：table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。

flex

.parent {
    display: flex;
}

.left {
    width: 100px;
    background: #ffff00;
}

.right {
    flex: 1;
    background: #c7254e;
}

NOTE：flex-item 默认为内容宽度。

缺点

• 低版本浏览器兼容问题。
• 性能问题，只适合小范围布局。

两列定宽，一列自适应

除了另外声明，HTML结构为以下内容：

    

        
left
    
    

        
center
    
    

        
right
        
right
    

p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left, .center {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    /*等价于*/
    /*flex: 1 1 0;*/
    background: #c7254e;
}

多列定宽的实现可以根据单列定宽的例子进行修改与实现。

一列不定宽 + 一列自适应

不定宽的宽度为内容决定，下面为可以实现此效果的方法：

• float + overflow，此方法在 IE6 中有兼容性问题
• table，此方法在 IE6 中有兼容性问题
• flex，此方法在 IE9及其以下版本中有兼容性问题

多列不定宽 + 一列自适应

其解决方案同一列不定宽加一列自适应相仿。

多列等分布局

除了另外声明，HTML结构为以下内容：

    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    

float

.parent {
    /*margin-left: -20px;*/
}

.column {
    float: left;
    width: 25%;
    box-sizing: border-box;
    /*padding-left: 20px;*/
    background: #c7254e;
}

NOTE：此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法结构和样式具有耦合性。

table

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
    


.parent-fix {
    /*margin-left: -20px;*/
}

.parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
}

.column {
    display: table-cell;
    /*padding-left: 20px;*/
    background: #c7254e;
}

NOTE：缺点是多了文本结果

flex

.parent {
    display: flex;
}

.column {
    flex: 1;
    background: #c7254e;
}

NOTE：flex 的特性为分配剩余空间。 NOTE+：兼容性有问题。

两列等高布局

除了另外声明，HTML结构为以下内容：

    

        
left
    
    

        
right
        
right
    

table

table 的特性为每列等宽，每行等高可以用于解决此需求。

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left {
    display: table-cell;
    background: #ffff00;
}

.right {
    display: table-cell;
    background: #c7254e;
}

flex

两列布局，一列定宽，一列自适应

.parent {
    display: flex;
}

.left {
    width: 100px;
    background: #ffff00;
}

.right {
    flex: 1;
    background: #c7254e;
}

float

.parent {
    overflow: hidden;
}

.left, .right {
    padding-bottom: 99px; 
    /*此处设置 9999px 很大的值，实际满足一定大小即可*/
    margin-bottom: -99px;
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    background: #c7254e;
}

NOTE：此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 NOTE+：此方法兼容性较好。

全屏布局

除了另外声明，HTML结构为以下内容：

定宽需求

实现方案

• position 常规方案
• flex CSS3 新实现

position

    

    

    

    



html, body, .parent {
    height: 100%;
    /*用于隐藏滚动条*/
    overflow: hidden;
}

.top {
    /*相对于 body 定位*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #ffff00;
}

.left {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 50px;
    width: 200px;
    background: #c7254e;
}

.right {
    position: absolute;
    left: 200px;
    top: 100px;
    right: 0;
    bottom: 50px;
    overflow: auto;
    background: #5cb85c;
}

.bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: #2a6496;
}

Flex

html, body, .parent {
    height: 100%;
    /*用于隐藏滚动条*/
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.parent {
    display: flex;
    flex-direction: column;
}

.top {
    height: 100px;
    background: #ffff00;
}

.bottom {
    height: 50px;
    background: #2a6496;
}

.middle {
    /*居中自适应*/
    display: flex;
    flex: 1;
    /*flex-direction: row 为默认值*/
}

.left {
    width: 200px;
    background: #c7254e;
}

.right {
    flex: 1;
    overflow: auto;
    background: #5cb85c;
}

百分比宽度需求

只需把定宽高（px 为单位的值）的实现改成百分比（%）既可。

内容自适应

只有右侧栏占据剩余位置，其余空间均需根据内容改变。 所以 postion 的定位方法不适合实现此方案。下面列出了两种布局方案：

• flex
• grid，W3C 草案并不稳定，浏览器支持也并不理想。

flex

只有不给宽和高进行限制，即可对其中的内容做出自适应的布局。把定宽实现方案中设置了宽度和高度的部分去掉。

你可能感兴趣的:(css,布局,css3,兼容)

• DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
  ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
• 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
  ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
• HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
  Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
• webpack图片等资源的处理 dmengmeng
  需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
• 【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1） 算法大师 华为od面试python算法前端
  华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
• ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
  ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
• TDengine 签约前晨汽车，解锁智能出行的无限潜力 涛思数据（TDengine） tdengine汽车大数据
  在全球汽车产业转型升级的背景下，智能网联和新能源技术正迅速成为商用车行业的重要发展方向。随着市场对环保和智能化需求的日益增强，企业必须在技术创新和数据管理上不断突破，以满足客户对高效、安全和智能出行的期待。在这一背景下，前晨汽车凭借其在新能源智能商用车领域的前瞻性布局和技术实力，成为行业中的佼佼者。前晨汽车采用整车数据采集和全车数据打通策略，能够实时将数据推送至APP端客户。然而，这导致整体写入和
• 华为云分布式缓存服务DCS 8月新特性发布 华为云PaaS服务小智 华为云分布式缓存
  分布式缓存服务（DistributedCacheService，简称DCS）是华为云提供的一款兼容Redis的高速内存数据处理引擎，为您提供即开即用、安全可靠、弹性扩容、便捷管理的在线分布式缓存能力，满足用户高并发及数据快速访问的业务诉求。此次为大家带来DCS8月的特性更新内容，一起来看看吧！
• Android实现监听事件的方法 Amy木婉清
  1.通过内部类实现2.通过匿名内部类实现3.通过事件源所在类实现4.通过外部类实现5.布局文件中onclick属性(针对点击事件)1.通过内部类实现代码:privateButtonmBtnEvent;//oncreate中mBtnEvent.setOnClickListener(newOnClick());//内部类实现监听classOnClickimplementsView.OnClickLis
• 使用datepicker和uploadify的冲突解决（IE双击才能打开附件上传对话框） zhanglb12
  在开发的过程当中，IE的兼容无疑是我们的一块绊脚石，在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候，两者就产生冲突，只要点击过时间的插件，uploadify上传框要双才能打开ie浏览器提示错误Missinginstancedataforthisdatepicker解决方案//if(.browser.msie&&'9.0'===.browser.version
• 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
  一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
• html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
  html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
• 高仿一个echarts饼图 街角小林2
  开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
• css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
  1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
• 360前端星计划-动画可以这么玩 马小蜗
  动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
• macOs mojave 添加hp laserjet 1020 打印机方法。 Coder_Zh
  1.设置--》打印机与扫描仪。2.点击“+”选择IP3.输入地址：（写网络IP），协议选择：hpjetdirect-socket4.使用选项：选择hplaserjet10221.6（没有1020的驱动，但是1022的驱动兼容1020可以使用。）测试OK，可以使用。
• Rust是否会取代C/C++？Rust与C/C++的较量 AI与编程之窗 源码编译与开发rustc语言c++内存安全并发编程代码安全性能优化
  目录引言第一部分：Rust语言的优势内存安全性并发性性能社区和生态系统的成长第二部分：C/C++语言的优势和地位历史积淀和成熟度广泛的库和工具支持性能优化和硬件控制丰富的行业应用社区和行业支持第三部分：挑战和阻碍学习曲线现有代码库的迁移成本生态系统和工具链的完善度社区和人才培养行业应用和推广法规和标准化第四部分：未来趋势和可能性行业趋势教育和人才培养兼容和共存行业标准化企业支持和应用开源社区和生态
• css2中的透明 琪33
  .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
• Nginx从入门到实践(三) 听你讲故事啊
  动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
• Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
  Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
• python之pyecharts制作可视化数据大屏 cesske 大数据
  文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
• Windows安装ciphey编码工具，附一道ciscn编码题例 im-Miclelson CTF工具网络安全
  TA是什么一款智能化的编码分析解码工具，对于CTF中复杂性编码类题目可以快速攻破。编码自动分析解码的神器。如何安装Windows环境Python3.864位（最新的版本不兼容，32位的也不行）PIP直接安装pipinstallciphey-ihttps://pypi.mirrors.ustc.edu.cn/simple/安装后若是出现报错请根据错误代码行数找到对应文件，r修改成rb即可。使用标准语
• Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
  Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
• 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
  边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
• 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
  爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
• svg图片兼容性和用法优缺点 独行侠_ef93
  svg图片的使用方法第一次来认认真真的研究了下svg图片，之前只是在网上见过，但都是一晃而过也没当回事，最近网站改版看到同事有用到svg格式的图片，想想自己干了几年的重构也没用过，这些细节的知识是应该好好研究研究了。暂时还没研究得完全透切，先记下目前为止所看到的吧不然又给忘了。svg可缩放矢量图形（ScalableVectorGraphics），顾名思义就是任意改变其大小也不会变形，是基于可扩展标
• 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
  前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
• MacOS Catalina 从源码构建Qt6.2开发库之01: 编译Qt6.2源代码 捕鲸叉 QTmacosc++QT
  安装xcode，cmake，ninjabrewinstallnodemac下安装OpenGL库并使之对各项目可见在macOS上安装OpenGL通常涉及到安装一些依赖库，如MGL、GLUT或者是GLEW等，同时确保LLVM的OpenGL框架和相关工具链的兼容性。以下是一个基本的安装步骤，你可以在终端中执行：安装Homebrew（如果还没有安装的话）：/bin/bash-c"$(curl-fsSLht
• 【Python】已解决：TypeError: unsupported operand 屿小夏 pythonjavaandroid
  文章目录一、分析问题背景出现问题的场景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：TypeError:unsupportedoperand一、分析问题背景TypeError:unsupportedoperand是Python中常见的一类错误，通常在尝试对不兼容的数据类型进行操作时发生。比如，当你尝试对字符串和整数进行加法操作时，Python会抛出这一错误。这样的错误通常发
• HTML中"bgcolor"与"background-color"的区别 Sardar_ html
  bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
• windows下源码安装golang 616050468 golang安装golang环境windows
           系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
• redis批量删除带空格的key bylijinnan redis
  redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
• oracle正则表达式的用法 0624chenhong oracle正则表达式
    方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
• 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
  2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
• jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
  只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
• 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
  全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
• java笔记1 a-john java
  1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
• C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
          找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
• 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
        编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
• Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
  android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
• Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
  Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
• Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
  JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
• 【Hadoop二】Hadoop常用命令 bit1129 hadoop
  以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
• java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
  从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
• 记录整理-工作问题 braveCS 工作
  1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
• org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
  刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
• 读书笔记-4 chengxuyuancsdn 读书笔记
  1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
• [物理与电子]半导体教材的一个小问题 comsci 问题
        各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
• Flashback Database --闪回数据库 daizj oracle闪回数据库
  Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
• 简单排序:插入排序 dieslrae 插入排序
  public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
• C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
  # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
• centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
  方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
• 线程池(Executors) shuizhaosi888 线程池
  在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
• openstack 快速安装笔记 haoningabc openstack
  前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
• 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
  1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
• 如何让那个一个div可以拖动 lingfeng520240 html
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
• 第10章 高级事件（中） onestopweb 事件
  index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
• 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
  要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
• 最具争议的10个Java话题 tomcat_oracle java
  1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
• zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
  题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.