备案控制台
开发者社区 开发与运维 文章 正文

CSS实战笔记(十) 自适应双栏布局

2023-04-25 58
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS实战笔记(十) 自适应双栏布局

前言

1、通过 BFC 实现


<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>
.wrap {
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}
.left {
    background-color: lightskyblue;
    /* float + margin */
    float: left;
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}


2、通过 Flex 实现


<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>


.wrap {
    /* flex container */
    display: flex;
}
.left {
    background-color: lightskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* flex item */
    flex-grow: 1;
}


3、通过 Grid 实现


<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>
.wrap {
    /* grid container */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 20px;
}
.left {
    background-color: lightskyblue;
}
.right {
    background-color: deepskyblue;
}
文章标签：
前端开发
关键词：
CSS实战
CSS布局
CSS笔记
CSS自适应
CSS自适应布局
半虹
目录
相关文章
桃李春风一杯酒
|
11天前
|
前端开发 UED
【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上，注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动，以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
桃李春风一杯酒
28 5
桃李春风一杯酒
|
11天前
|
移动开发 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先，简述HTML5用于构建网页内容，CSS3用于描述样式。接着，分四步展示实现过程：1) 设计包含输入框和提示信息的表单结构；2) 使用CSS3创建样式，增强视觉效果；3) 使用JavaScript监听输入事件，动态验证表单并显示错误信息；4) 测试和调试确保跨平台兼容性。通过学习，开发者能掌握创建带验证功能的表单，提升用户体验。
桃李春风一杯酒
28 7
桃李春风一杯酒
|
11天前
|
编解码 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站，运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页，设计简洁易用，包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性，色彩搭配选用冷色调为主，辅以亮色点缀。字体选择清晰易读，布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南，为进一步功能扩展和优化打下基础。
桃李春风一杯酒
26 5
桃李春风一杯酒
|
11天前
|
前端开发 测试技术 定位技术
【专栏：HTML 与 CSS 实战项目篇】构建一个企业级网站：HTML 与 CSS 实战
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建企业级网站的实战步骤，包括项目概述、页面结构设计、HTML结构搭建、CSS样式设计、具体页面实现、优化与提升。通过合理布局、美观样式和响应式设计，创建现代、简洁的网站，包含主页、关于我们、产品展示、新闻动态和联系我们等页面。优化图片和代码，确保性能，助力企业在数字时代树立良好形象并提升沟通效率。
桃李春风一杯酒
25 7
桃李春风一杯酒
|
11天前
|
编解码 缓存 前端开发
【专栏：HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配，强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异，提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤，以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具，以适应移动端发展。
桃李春风一杯酒
31 2
桃李春风一杯酒
|
11天前
|
编解码 前端开发 UED
【专栏：HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发，它能根据用户设备自动调整布局，提供最佳浏览体验。通过HTML和CSS，利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则，Flexbox处理元素排列。文章通过新闻网站首页设计实例，展示了如何应用这些理论，包括使用Flexbox设计导航栏，使用媒体查询调整轮播图和内容区域，以及创建自适应页脚。遵循移动优先原则，关注性能优化和用户体验，响应式设计是前端开发的关键，为多设备用户提供优质浏览体验。
桃李春风一杯酒
21 2
桃李春风一杯酒
|
11天前
|
前端开发 UED 容器
【专栏：CSS进阶篇】CSS Grid布局：构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统，适用于复杂页面结构，如页眉、主体和侧边栏。通过定义网格线和单元格，能轻松创建行和列。基本语法包括设置容器为grid容器，定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中，CSS Grid能有效提升开发效率和用户体验，尤其在响应式设计和复杂布局场景下。
桃李春风一杯酒
21 0
桃李春风一杯酒
|
11天前
|
前端开发 开发者 容器
【专栏：CSS进阶篇】CSS Flexbox布局：实现灵活的响应式设计
【4月更文挑战第30天】CSS Flexbox是现代网页设计中创建响应式布局的关键工具，它提供了一种一维布局模型，使元素能灵活适应各种屏幕尺寸。通过设置容器的`display`属性为`flex`，开发者可以利用主轴和交叉轴调整元素排列和对齐方式。核心概念包括弹性项、伸缩性、空间分配和对齐。通过实例，如导航栏、卡片布局、图片画廊和响应式表单，展示了Flexbox在实现响应式设计中的应用。尽管需要注意浏览器兼容性，但掌握Flexbox能帮助开发者构建出功能强大且适应性强的界面。
桃李春风一杯酒
16 0
桃李春风一杯酒
|
11天前
|
前端开发 开发者 容器
【专栏：CSS基础篇】CSS定位与布局：从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础，包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序，相对定位可在正常位置基础上偏移，不占用额外空间。绝对定位基于最近已定位祖先元素定位，脱离文档流。固定定位相对于浏览器窗口定位，无视页面滚动。浮动用于文字环绕图片等，可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式，适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
桃李春风一杯酒
16 0
会影
|
前端开发 Web App开发
css使用笔记
最近写一个前台页面，因为不用考虑太多兼容性问题，尝试了很多css3的东西，记录下。 1、渐变和边框阴影 最初的视觉稿，上面有很多地方颜色使用了渐变，为了不使用图片，用了很挫的方式来实现：从图片渐变开始、中间、结束部分，用gimp的吸管获取颜色，然后转换成css的渐变。不过因为渐变每个浏览器支持方
会影
1577 0