位置: IT常识 - 正文

CSS网页布局(css网页布局代码)

编辑:rootadmin
CSS网页布局

推荐整理分享CSS网页布局(css网页布局代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:CSS网页布局模板,css网页布局与美化教程,div+css网页布局,CSS网页布局模板,css网页布局的基础是什么,CSS网页布局9外边距折叠与预防,css网页布局的基础是什么,css网页布局代码,内容如对您有帮助,希望把文章链接给更多的朋友!

📜个人简介

⭐️个人主页:微风洋洋🙋‍♂️ 🍑博客领域:编程基础💡,后端💡,大数据,信息安全 🍅写作风格:干货,干货,还是tmd的干货 🌸精选专栏:【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】 🚀支持洋锅:点赞👍、收藏⭐、留言💬

好久不见,甚是想念! 大家好🙋‍♂️

我是微风洋洋 今天这篇文章就是来和大家详细聊聊CSS网页布局,希望大家读完有所收获,那我辛苦码字也就值了🎈🎈🎈

文章目录一、CSS布局常用属性1.定位属性(position)🍅静态定位🍅相对定位🍅绝对定位🍑父对象有position属性设置🍑父对象无position属性设置🍅层叠定位属性(z-index)2.浮动属性(float)🍅基本浮动定位🍅清除浮动属性二、CSS的网页布局1.单列布局2.两列布局3.使用CSS3盒布局的三列布局三、DIV+CSS布局的应用1.图文混排的实现2.制作二级导航菜单一、CSS布局常用属性

CSS常用的布局方式主要有定位式和浮动式两种,相应布局属性为定位属性(position)和浮动属性(float)。

1.定位属性(position)

使用position属性可以精确控制盒子的位置,其语法格式如下。

position: static |relative | absolute | fixed

🍅静态定位

设置position属性的值为static,或不做设置即缺省时默认为static,元素按照HTML规则定位。

示例

代码

<!DOCTYPE html><html><head><meta charset=utf-8><style type="text/css">#container {width: 250px;height: 250px;border: medium #00C double;}</style></head><body><div id="container"><div><img src="images/kay.gif" width="140px" height="120 px "/></div><div><img src="images/Neg.gif" width="140px " height="120px"/></div></div></body></html>

效果

🍅相对定位

设置position属性的值为relative时即为相对定位,设置盒子相对其原本位置的定位。相对定位的盒子占用原页面空间。

示例

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">#container {width: 250px;height: 250px;border: medium #00C double;left: 100px;top: 0px;}#img1 {position: relative;left: 50px;top: 50px;}</style></head><body><div id="container"><div><img id="img1" src="images/kay.gif" width="140px" height="120px"/></div><div><img src="images/Neg.gif" width="140px" height="120px"/></div></div></body></html>

效果

🍅绝对定位

设置position属性的值为absolute时即为绝对定位,设置盒子相对其具有position设置的父对象进行定位。

🍑父对象有position属性设置

示例

代码

效果

🍑父对象无position属性设置

绝对定位元素的所有层次父对象均无position属性设置时,该元素以body即浏览窗口为参照绝对定位。如示例15-13中,删除A图片父对象position属性设置,即删除如下代码行:

position: relative;

left:0px;

top:0px;

🍅层叠定位属性(z-index)

被定位的元素会挡住部分其他元素,可以通过层叠定位属性(z-index)定义页面元素的层叠次序。z-index的取值可以为负数,表示各元素间层次关系,值大者在上,当为负数时表示该元素位于页面之下。

示例

代码

效果

2.浮动属性(float)

float属性可以控制盒子左右浮动,直到边界碰到父对象或另一个浮动对象。

float属性语法格式如下。

float:none|left|right;

🍅基本浮动定位

设置了向左或向右浮动的盒子,整个盒子会做相应的浮动。浮动盒子不再占用原本在文档中的位置,其后续元素会自动向前填充,遇到浮动对象边界则停止。

示例

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">img {width: 140px;height: 120px;}.fl {float: left;}</style></head><body><div class="fl"><img src="images/kay.gif"/></div><div class="fl"><img src="images/Neg.gif"/></div><div><img src="images/jobs.gif"/></div></body></html>

效果

🍅清除浮动属性

浮动设置使用户能够更加自由方便地布局网页,但有时某些盒子可能需要清除浮动设置,这时需要用到浮动属性clear,其语法格式如下:

clear:none|left|right|both;

示例

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">img {width: 140px;height: 120px;}.fleft {float: left;}.clear {clear: left;}</style></head><body><div class="fleft"><img src="images/kay.gif"/></div><div class="fleft"><img src="images/Neg.gif"/></div><div class="clear"><img src="images/jobs.gif"/></div></body></html>

效果

二、CSS的网页布局

网页布局结构按照列数可分为单列、两列和三列等几种布局。

1.单列布局

单列布局相对简单,很多复杂布局往往以单列布局为基础。单列布局中的对象位置可固定在左侧、浮在右侧或居中;宽度可用像素值固定、百分比或相对于字号设置。

举个例子

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title>用HTML5结构元素布局</title><style type="text/css">body {margin: 0;padding: 0;min-width: 1000px;text-align: center; /*定义文本居中*/}header {width: 80%; /*自适应页面大小*/height: 80px;margin: 0px auto;background: #FFC;}article {width: 80%; /*自适应页面大小*/height: 240px;margin: 5px auto;background: #D0FFFF;text-align: left;}footer {width: 80%; /*自适应页面大小*/height: 100px;margin: 5px auto;background: #FFC;text-align: left;}</style></head><body><header><h2>搜索引擎改变记忆方式 人们忘记网上找到的信息</h2></header><article>Article:<p>美国科学家在7月15日出版的《科学》杂志上报告称,相关研究表明,谷歌等搜索引擎的出现改变了我们学习和记忆信息的方式。在一个遍及搜索引擎的新世界中,更好地理解记忆的工作原理有望改变各个领域的教学和学习方式。<p>哥伦比亚大学的心理学家贝齐•斯帕罗和同事进行了一系列实验后得出结论说,人们会忘记自己能在网上找到的信息,而记住自己认为无法在网上找到的信息。研究也发现,人们更容易记住在互联网的何处能找到这些信息,而不是……</article><footer>Footer:<p> 更深层次的分析表明,当人们能够记住信息时,他们不会记住在何处能找到某些信息;而当人们无法记住信息本身时,才会倾向于记住在何处能找到这些信息。</p></footer></body></html>

效果

2.两列布局

1.传统的两列布局

两列布局使用两个盒子,第一个盒子位置应在页面左侧,第二个盒子(应在页面右侧,可用fixed属性或float属性设定。

思考:如果左右两个盒子没有设置统一的高度“height: 400px”,页面效果会有什么变化呢?

2.用CSS3改进的盒布局

如果使用盒布局,需要设置左右两个盒子的外层容器的box属性,不需要使用float属性。

3.嵌套的2列布局

CSS网页布局(css网页布局代码)

顶部固定,一列固定、一列变宽的布局是在博客类网站中很受欢迎的布局形式,这类网站常把侧边的导航栏宽度固定,而主体的内容栏宽度是可变的。

与盒布局相关的部分属性

下面例子是一个典型的嵌套2列布局,用到了盒布局中的弹性布局属性-webkit-box-flex。

代码

效果

3.使用CSS3盒布局的三列布局

三列布局可以使用float属性实现,对3个盒子(列)对象分别设定位置和宽度,再设置浮动属性即可。

#left{ height: 400px;

width: 120px;

float: left;

}

#right{ background:#FFC;

height: 400px;

width: 100px;

float: right;

}

#main{

background: #D0FFFF;

height: 400px;

margin-left:120px;

}

1.简单的三列布局

下面例子是一个使用盒布局实现的三列布局。左右两列宽度固定,中间列自适应。

代码

效果

嵌套的三列布局

前面布局采用的策略是将盒子(div块)从上到下、从左到右依次排列。

代码实现

三、DIV+CSS布局的应用

在设计网页之前,首先对网页布局有一个总体思路,然后就可以用盒子对网页进行大致分块设定。

1.图文混排的实现

1.用DIV+CSS布局方式实现图文混排效果

举个例子

效果

代码实现

对上面例子进行改进

效果

代码实现

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">body {font-size: 12px;background-color: #CCC;}.text {padding-top: 10px;margin: 5px;line-height: 150%;}div#first:first-letter {/*实现首字下沉*/float: left;font: 24px 黑体; /*注意font属性顺序*/padding: 0px 5px;}img {width: 97px;height: 136px;}.img {/*内层虚线框*/float: left;border: thin dotted #F00;margin: 2px;}.imgtag{/*图标题*/margin: 5px;text-align: center;clear: left;background-color: #E8FFFF;}.outer{/*外层实线框*/border: thin solid #00F;width: 214px;float: left;margin: 8px;}</style></head><body><div id="first">美国著名的《连线》杂志,曾就一系列事物的发展前景向一批各自领域的专家征询。这些专家的看法可能有些武断,但令人欣赏地直奔主题。下面是他们对互联网络所预言的另一张时间进程表:</div><div class="outer"> <!--图片部分 --><div class="img"> <!-- 第一张图片及标识--><div><img src="images/4.jpg"/></div><div class="r"/>尼葛洛庞帝</div></div><div class="img"><!-- 第二张图片及标识--><div><img src="images/5.jpg"/></div><div class="imgtag">阿伦•凯</div></div><div class="imgtag"><!--总标识-->代表人物</div></div><div class="text">2001 远程手术将十分普及,最好的医学专家可以为全世界的人诊断治疗疾病。<BR>2001《财富500家》上榜者中将出现一批"虚拟企业"。<BR>2003全球可视电话将支持更普遍的"远程会议",企业家将通过网络管理公司。<BR>2003 "远程工作"将是更多的人主要的"上班"方式。<BR>2007 光纤电缆广泛通向社区和家庭,"无限带宽"不再停留在梦想中。<BR>2016出现第一个虚拟大型公共图书馆,虚拟书架上推满了虚拟书籍和资料。<BR></div><div class="text">这些预言中,还包括了所谓"食品药片"、"冷冻复活"等匪益所思的言论。仅从与网络相关的预言看,人类全方位的"数字化生存"──包括工作、生活和学习等相当广泛的领域── 都不是那么遥远。</div><div class="text">这一张时间进度表究竟能不能如期兑现?阿伦•凯(A.Kay)首先提出,又被尼葛洛庞帝引用过的著名论断说得好:"预测未来的最好办法就是把它创造出来。"当今的社会,预测再也不是消极地等待某个事实的出现,而是积极地促成这个事实。从这个意义上讲,创造和创新才是我们对21世纪电脑发展趋势最准确的预测,远胜过一切天才的预言。</div><div class="text" style="text-align:right;">摘自《大师的预言》</div></body></html>

2.制作二级导航菜单

导航菜单通常分为横向导航菜单和纵向导航菜单。DIV+CSS布局中多通过控制列表样式制作导航菜单,主要用到<ul>、<li>、<a>等3组标记。

1.建立一级菜单

效果和代码实现

2.定义CSS样式

创建样式#menu,设置菜单整体大小等属性,并添加到<div>标记中;创建样式#menu ul,设置隐藏列表符号、清除边距等属性,代码如下。

效果和代码实现

3.创建二级菜单

二级导航菜单是指当鼠标经过一级菜单项时,会弹出相应的二级菜单,鼠标离开该项后二级菜单自动消失。接下来在上例的基础上制作二级菜单,以一级菜单项“CSS”为例,在其下添加二级菜单。

效果和代码实现

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">#menu {width: 100px;border: 1px solid #999;}#menu ul {margin: 0px;padding: 0px;list-style: none; /*隐藏默认列表符号*/}#menu ul li {background: #06C;height: 26px;line-height: 26px; /*行距*/text-align: center;border-bottom: 1px solid #999;position: relative;}a {display: block;font-size: 13px;color: #FFF;text-decoration: none; /*隐藏超链接默认下划线*/}a:hover {color: #F00;font-size: 14px;}#menu ul li ul {display: none; /*默认隐藏*/top: 0px;width: 130px;border: 1px solid #ccc;border-bottom: none;position: absolute;left: 100px;}#menu ul li:hover ul {display: block;}#menu ul li:hover ul li a {display: block;}</style></head><body><div id="menu"><ul><li><a href="#">HTML</a></li><li><a href="#">CSS</a><ul><li><a href="#">Selector</a></li><li><a href="#">Use CSS File in HTML</a></li><li><a href="#">Formatting Document</a></li><li><a href="#">Layout</a></li></ul></li><li><a href="#">JavaScript</a></li><li><a href="#">XML</a></li><li><a href="#">PHP</a></li><li><a href="#">Ajax</a></li></ul></div></body></html>

4.横向二级导航菜单

效果和代码实现

如果觉得这篇文章对你有一丢丢启发的话,不妨点赞👍、收藏⭐、留言💬支持一下,你的支持将是我继续创作的最大动力。下一篇将介绍JS,到时不见不散❤️❤️❤️ 由于作者水平有限,如有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!

关注,即可提高学习效率。Perfect!

本文链接地址:https://www.jiuchutong.com/zhishi/300052.html 转载请保留说明!

上一篇:私人定制AI绘画——快速finetune stable diffusion教程(私人定制ai绘画下载)

下一篇:基于卷积神经网络CNN的图片分类实现——附代码(基于卷积神经网络的网络入侵检测算法设计与实现)

  • 萤石云怎么分享给家人(萤石云怎么分享到电脑上)

    萤石云怎么分享给家人(萤石云怎么分享到电脑上)

  • Redmi K30 Pro支持双模5G吗(redmi k30 pro支持快充多少瓦)

    Redmi K30 Pro支持双模5G吗(redmi k30 pro支持快充多少瓦)

  • 小米手环4nfc没有微信提醒(小米手环4nfc没电了可以刷公交卡嘛)

    小米手环4nfc没有微信提醒(小米手环4nfc没电了可以刷公交卡嘛)

  • 苹果xr热点电脑连不上(苹果xr热点电脑怎么连接)

    苹果xr热点电脑连不上(苹果xr热点电脑怎么连接)

  • 微信怎么定点发消息(微信怎么定点发红包)

    微信怎么定点发消息(微信怎么定点发红包)

  • 快手入团券是什么(快手里的入团卷怎么送)

    快手入团券是什么(快手里的入团卷怎么送)

  • 微信号打标了有影响吗(微信号打标了有风险吗)

    微信号打标了有影响吗(微信号打标了有风险吗)

  • 抖音上不了热门怎么办(抖音上不了热门是不是该换号了)

    抖音上不了热门怎么办(抖音上不了热门是不是该换号了)

  • 荣耀手机遥控器功能在哪(荣耀手机遥控器开空调)

    荣耀手机遥控器功能在哪(荣耀手机遥控器开空调)

  • 华为mate30看视频怎么全屏

    华为mate30看视频怎么全屏

  • 钉钉小窗记录观看时长吗(钉钉打开小窗可以记录时间吗)

    钉钉小窗记录观看时长吗(钉钉打开小窗可以记录时间吗)

  • 微信验证频繁多久解除(微信验证频繁多久可以恢复)

    微信验证频繁多久解除(微信验证频繁多久可以恢复)

  • 直播带货需要什么设备(直播带货需要什么显卡)

    直播带货需要什么设备(直播带货需要什么显卡)

  • 苹果相机录像怎么没了(苹果相机录像怎么关闭镜像)

    苹果相机录像怎么没了(苹果相机录像怎么关闭镜像)

  • 流量开了没有网是什么原因(流量开了没有网显示3g)

    流量开了没有网是什么原因(流量开了没有网显示3g)

  • 存储器可分为哪两类(存储器可分为哪三类答案)

    存储器可分为哪两类(存储器可分为哪三类答案)

  • 微信不适配手机怎么办(微信和手机不适配)

    微信不适配手机怎么办(微信和手机不适配)

  • 苹果电脑丢了能追踪吗(苹果电脑丢了能不能找到)

    苹果电脑丢了能追踪吗(苹果电脑丢了能不能找到)

  • 微信看好友qq相册(微信查看qq好友功能)

    微信看好友qq相册(微信查看qq好友功能)

  • word文字怎么画横道图(word文字怎么画斜线)

    word文字怎么画横道图(word文字怎么画斜线)

  • thinkpadx1开机键在哪

    thinkpadx1开机键在哪

  • 荣耀20支持多少w快充(荣耀20支持多少瓦充电器)

    荣耀20支持多少w快充(荣耀20支持多少瓦充电器)

  • 64g够用吗

    64g够用吗

  • 美团怎么看vip等级(美团怎么看vip等级排名)

    美团怎么看vip等级(美团怎么看vip等级排名)

  • wuauclt.exe是什么进程?让Windows系统自动更新!wuauclt.exe是病毒吗?(launcheflc.exe什么意思)

    wuauclt.exe是什么进程?让Windows系统自动更新!wuauclt.exe是病毒吗?(launcheflc.exe什么意思)

  • GCN经典论文笔记:Semi-Supervised Classification with Graph Convolutional Networks

    GCN经典论文笔记:Semi-Supervised Classification with Graph Convolutional Networks

  • 公司代扣代缴个人所得税如何退税
  • 以前年度损益调整属于哪类科目
  • 金税四期接入银行
  • 新公司实收资本
  • 软件行业个人所得税
  • 关联交易措施
  • 工业企业会计怎么结转成本
  • 经营结余年末结转
  • 现金折扣为什么计入主营业务收入
  • 建筑企业增值税怎么算
  • 劳务派遣营改增政策
  • 在建工程之前是什么
  • 承包租赁成本明细表的预算项目
  • 一般纳税人注销公司需要什么资料和流程
  • 普通发票汇总上传
  • 如何区分纳税调额和补税
  • 金银制成的金银币及摆件是否征收消费税?
  • 赊销的账务处理流程
  • 剑灵玩一会就崩溃
  • Win11如何解决界面不断刷新 Win11界面不断刷新解决方法
  • 误餐费怎么入账
  • 收到保险公司退款
  • php 跨域
  • php接口技术实例分析
  • js数组分组并排序
  • Node 下 Http Streaming 的跨浏览器实现
  • 购入固定资产应该怎么做账
  • c+c#
  • 中华人民共和国禁毒法第十三条规定
  • 职工福利费怎么处理
  • 报销具体流程
  • 成品油电子普通发票如何入账
  • 个人所得税申报流程图
  • 存货盘盈盘亏处理会计分录
  • 一笔购入多项固定资产
  • 网上学电脑
  • 间接费用允许调整吗
  • 代征税款手续费规定
  • 什么情况下核定应纳税额
  • 小微企业是怎样自己认定的呢
  • 商誉是成本法还是收入法
  • 印花税计税依据和税率
  • 电子商业汇票怎么接收
  • 总分类账的登记依据和方法取决于企业所采用的
  • 公司组织员工吃饭或举行活动的行为被称为什么
  • 附加税的印花税怎么计算
  • 电子设备计税基础
  • 存货周转率越高好还是越低好
  • 促销服务属于什么服务按什么征增值税
  • 维护费要交税吗
  • mysql数据库简单介绍
  • window怎么操作
  • vim如何操作
  • 黑苹果驱动说明
  • 如何使用xp
  • xp系统安装版合集
  • win8.1技巧
  • Win7登录密码
  • 微软撤回快捷键
  • windowsxp的主要特点
  • win8系统损坏怎么修复
  • windows8网页版
  • vs2008安装教程
  • js中cookie
  • using kernel
  • dos命令怎么输入命令
  • 噩梦像连续剧
  • Unity3D AsssetBundle加载效率比较
  • 深入理解innodb
  • 如何查询车辆购置税是否缴纳
  • 中央与地方增值税
  • 国家税务局2017年11号
  • 海南国税局待遇
  • 租房完税证明需要房东交钱吗?
  • 应税和非应税是什么意思
  • 深圳龙华区税务局大浪税务所电话
  • 什么是企业融资,什么是政府融资
  • 甘肃华能能源开发有限公司
  • 交叉互查的作用和意义
  • 江苏省国税客服电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设