web前端实战系列[1]——三列布局
1.代码
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 300px 0 200px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style> </head><body><div class="left">left</div><div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的,你可以领会要点,举一反三。</div><div class="right">right</div> </body> </html>
2.总结
三列布局
左侧:position:absolute;left:0;
右侧:position:absolute;right:0;
中间:margin:a b c d;
转载于:https://www.cnblogs.com/helloIT/articles/5154980.html
web前端实战系列[1]——三列布局相关推荐
- web前端实战系列[4]——多级菜单
1.代码 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
文章目录 三列布局背景介绍 定位实现三列布局 浮动实现三列布局 圣杯布局 双飞翼布局 三列布局背景介绍 三列元素,左右元素固定宽度: 中间元素自适应: <div id="left&qu ...
- html三列布局源码,HTML三列布局 - 黄柳淞的个人页面 - OSCHINA - 中文开源技术交流社区...
1.三列布局1 三列布局 body{padding: 0;margin: 0;} .left{width:33.3%;height: 500px;background-color: #ccc;floa ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三) 转载于:https://github.com/Meowv/Blog 上一篇完成了博客的主题切换,菜单和 ...
- Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言 出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
- web前端开发三个阶段和三要素,学前端必备基础知识
web前端开发三个阶段和三要素是什么?下面就跟着小编一起来看看吧! Web前端市场前景广阔,吸引了很多人涌入学习,但无论是零基础小白,亦或是想要进阶深造的程序员,前端开发三个阶段和三要素都是他们必学的 ...
- 常用布局简介(单列布局、两列布局、三列布局、sticky footer粘连布局)
常用布局简介 一.简介 网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
最新文章
- DBA大牛告诉你,如何让MySQL语句执行加速?
- Huawei FusionCompute安装体验
- Jenkins 权限配置与集群配置
- 计算机一级应用基础选择题,计算机应用基础一级考试选择题
- Web笔记-移动前端开发笔记
- MySQL数据库操作步骤---增删改查
- 【Elasticsearch】Curator 从入门到实战
- 大班线描机器人_大班美术教案机器人
- Solr5.2.1-Cloud-Zookeeper快速搭建
- 「leetcode」701. 二叉搜索树中的插入操作:【递归法】【迭代法】详解
- 编程基本功:工作完成之后,还有做好、做精、做美、做顶、做宗等境界
- 机器人操作系统 ROS 大全
- 博科BROCADE交换机开启snmp服务
- Linux安装SSH
- Canoco5绘制漂亮的DCA或CCA图
- 河北画报杂志河北画报杂志社河北画报编辑部2022年第20期目录
- 冰蝎工具的最新检测特征
- 快递收件寄件JAVA小程序技术描述_解析“微快递”小程序的交互流程
- spire.doc操作word文档工具类(自用)
- 揭开AI产品PRD的面纱 | 浅谈其和互联网产品PRD的异同