CSS3 分栏布局和弹性布局(续) 弹性布局构造网站主页效果

最新推荐文章于 2024-05-11 12:17:38 发布
最新推荐文章于 2024-05-11 12:17:38 发布
阅读量522 收藏 5
点赞数
分类专栏： 前端集合 样式 文章标签： css3 弹性布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zeping891103/article/details/78543354
版权

源码：

<!--
	建站Demo
-->
<!DOCTYPE html>
<meta charset="utf-8" />
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../../libs/holder.js"></script>
		<style>
			body {
				width: 1200px;
				margin: 0px auto;
			}
			
			#TopLeft {
				float: left;
				background-color: red;
			}
			
			#TopRight {
				background-color: yellow;
			}
			
			#topNav {
				display: flex;
				justify-content: space-between;
			}
			
			#topNav nav {
				width: 200px;
				text-align: center;
				border: solid 1px #666666;
				background-color: #ffffff;
				display: inline-block;
				line-height: 300%;
				vertical-align: middle;
			}
			
			#topNav a {
				display: block;
				color: #000000;
				text-decoration: none;
			}
			
			#topNav a:hover {
				font-size: 20px;
				font-weight: bold;
				color: #FF0000;
			}
			
			#container {
				width: 1200px;
				height: 800px;
				display: flex;
				flex-direction: row;
				margin: 0 auto;
			}
			
			#aside {
				order: 1;
				background-color: orange;
				width: 200px;
				box-sizing: border-box;
			}
			
			#aside_div {
				float: left;
				width: 200px;
				height: 100%;
				background-color: aliceblue;
			}
			
			#aside_title {
				text-align: center;
				font-size: 30px;
			}
			
			#aside_div li {
				display: inline-block;
				padding-top: 5px;
				width: 150px;
				list-style: none;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis
			}
			
			#main {
				order: 2;
				flex: 1;
				background-color: yellow;
				box-sizing: border-box;
				height: 100%;
			}
			
			#main_cursign {
				margin-left: 10px;
				padding: 20px 0;
				height: 60px;
				box-sizing: border-box;
			}
			
			#main_section {
				display: flex;
				flex-direction: column;
				height: calc(100% - 60px);
			}
			
			#main_section section {
				width: 100%;
			}
			
			#main_section1 {
				background-color: #32CD32;
				flex: 1;
			}
			
			#main_section2 {
				background-color: orange;
				height: 150px;
			}
			
			#footer {
				margin-top: 5px;
				width: 100%;
				height: 100px;
				background-color: #D2691E;
			}
		</style>
	</head>

	<body>
		<header id="webTitle">
			<div id="divTop1">
				<div id="TopLeft">
					<img id="imglogo1" data-src="holder.js/800x100" />
				</div>
				<div id="TopRight">
					<img id="imglogo2" data-src="holder.js/400x100" />
				</div>
			</div>
			<div id="topNav">
				<nav>
					<a href="#">首     页</a>
				</nav>
				<nav>
					<a href="#">公司简介</a>
				</nav>
				<nav>
					<a href="#">产品介绍</a>
				</nav>
				<nav>
					<a href="#">新闻中心</a>
				</nav>
				<nav>
					<a href="#">下载中心</a>
				</nav>
				<nav>
					<a href="#">在线留言</a>
				</nav>
				<nav>
					<a href="#">联系我们</a>
				</nav>
				<nav>
					<a href="#">邮箱登录</a>
				</nav>
			</div>
			<div id="divTop2">
				<div>
					<img data-src="holder.js/1200x300?theme=sky" />
				</div>
			</div>
		</header>
		<div id="container">
			<aside id="aside">
				<div id="aside_div">
					<nav>
						<p id="aside_title">最新资讯</p>
						<ul>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
							<li>
								<a href="#">超链接</a>
							</li>
						</ul>
					</nav>
				</div>
			</aside>
			<article id="main">
				<div id="main_cursign">
					您的位置：首页
				</div>
				<div id="main_section">
					<section id="main_section1"></section>
					<section id="main_section2"></section>
				</div>
			</article>
		</div>

		<footer>
			<div id="footer">
				<img data-src="holder.js/1200x100?theme=sky" />
			</div>
		</footer>
	</body>
	<script>
	</script>

</html>

效果：

黄泽平
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面分栏显示
11-16
采用非iframe形式，实现页面分栏效果
弹性布局-less--综合案例
11-02
利用弹性布局和less制作网页，利用弹性布局和less制作网页，利用弹性布局和less制作网页，试错前行，越努力越幸运，希望可以和大家一起进步，如有不足，多多包涵！
简单HTML5+CSS3页面布局
01-22
自己写的一个简单HTML5+CSS3页面布局，适合新手学习，MIchael学院
css使用弹性布局/定位布局实现三栏布局
LPLIFE的博客
04-28 1665
三栏布局：初学css的时候，什么是三栏布局？好高大上的样子。 简单来说： 就是网页分成三块，中间自适应，左右两边固定 应用场景：视频播放进度条，两边固定，中间进度条根据电子屏幕自适应长度。 弹性布局（移动端使用弹性布局真是非常方便，可以自己了解一下）来实现： <!DOCTYPE html> <html lang="en"> <head> <met...
弹性布局小例子
Vivian_shuang的博客
07-06 751
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style> *{ margin: 0; padding: 0; } html,body,.wrap{ height: 100%; } .wrap{ width: 100%; height: 100%; display:-webki
CSS3_Node6_布局-分栏布局&弹性布局&响应式设计
louShuMei 的博客
10-23 1365
-->CSS3 分栏布局  -->CSS3 弹性布局 -->CSS3 响应式设计 一、分栏布局 column-count：auto | 整数；---控制栏数 column-width： auto | length；---每栏的宽度 column-gap : length ;---两栏之间的间距 column-rule : 宽度，线型，颜色；---栏与栏的间隔线 类似bord
Flex弹性布局（附超Q小demo
weixin_34306446的博客
04-20 151
简介 Flex 是 Flexible Box 的缩写，意为弹性布局，任何一个容器都可以指定为Flex布局，包括行内元素，如下： div{ display: flex; } 复制代码 span{ display: inline-flex; } 复制代码注意： 戳此查看兼容性； Webkit内核的浏览器，要加上-webkit-前缀； 设...
分栏布局
包磊磊的博客
08-26 536
看报纸的时候，一段文字被分了几栏效果 -webkit-column-count: 3; /*Chrome 和 Safari*/ -moz-column-count: 3; /*Firefox*/ column-count: 3; /*其他*/ column-count: 5;  栏的数量控制 column-gap: 10px  长度单位，栏之间的距离 column-
CSS分栏布局的方法:绝对定位和浮动
09-27
在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的...
css页面左中右分栏布局示例
12-13
<!DOCTYPE ... <head> <title></title>...meta charset="gb2312" />...style type="text/css"> body{ background-color:silver; } .page_center { width:600px;
CSS实现网页分栏布局的方法：绝对定位和浮动
09-27
网页制作Webjx文章简介：在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置...
CSS resize 拖拉分栏布局
07-10
resize 拖拉分栏布局
CSS经典布局之弹性布局
凛家Dear Love L的博客
08-23 4718
当我们在浏览浏览器的时候，常常会放大/缩小浏览器的显示比例，或者在不同的设备上，所处的分辨率也不尽相同。因此，我们需要学习一个新的知识：弹性盒模型。 弹性盒模型 实现项目对齐，方向，排序（即使项目大小位置动态生成），能够动态修改子元素的宽度和高度，具有良好的适配性。 如图就是弹性布局一个大概范围。 弹性容器属性 属性 说明 flex-direction
三列浮动布局的核心
洛神赋
07-29 237
/*三列定位布局*/ div#main { margin: 0 30% 0 20%; padding: 0px; } div#left { float: right; width: 25%; } div#right { float: left; width: 15%; } /*三列浮动布局*/ div#main{ margin: 0 ...
简单案例解析CSS3的分栏布局和弹性布局（续）：弹性布局构造网站主页效果Demo...
chongfeng2994的博客
11-28 228
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/78543354 Demo源码： <!-- 建站Demo --> <!DOCTYPE...
CSS3弹性伸缩布局(一)——box布局
weixin_30868855的博客
08-23 361
CSS3弹性伸缩布局简介 2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布...
HTML弹性布局、特效
xiaoming0018的博客
05-16 1899
Display:flex;启用弹性布局。flex-direction: column||row;flex-direction  flex容器中项目的方向，row横向 column纵向flex-wrap  wrap换行   nowrap不换行不会缩紧内容    如果宽度变小时，缩紧内容flex-flow  上面两个的缩写 justify-content  水平对齐模式center 居中显示   fl...
CSS弹性布局（一）
weixin_43885459的博客
12-26 4717
弹性布局可以用于做响应式页面的制作 使用弹性布局需要使用要display里的flex属性 例：让一个div是弹性布局，代码如下 .div{ display:flex; } flex里有很多属性，其中设置在容器上的属性有6个 1.flex direction:决定主轴的方向（即项目的排列方向）。 ...
制作跳动的爱心网页效果
最新发布
bengbeng2345的博客
05-11 266
【代码】跳动的爱心。
分栏布局、弹性布局和网格布局
08-03
分栏布局、弹性布局和网格布局都是现代CSS布局技术中常用的方式，它们可以根据不同的需求和场景选择使用。分栏布局适用于将内容分割成多列的情况，弹性布局适用于灵活的盒子排列和对齐方式，网格布局适用于复杂的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值