html 中 基础的页面布局

最新推荐文章于 2024-03-08 15:37:52 发布
最新推荐文章于 2024-03-08 15:37:52 发布
阅读量345 收藏
点赞数 1
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YKenan/article/details/88865158
版权

html 中 基础的页面布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="keywords" content="maven, index" />
		<title>YKenan</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/buttons.css" />
		<link rel="stylesheet" type="text/css" href="css/drop-down.css" />
		<link rel="stylesheet" type="text/css" href="css/style_admin.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>

		<div class="container">
			<div class="bg_head">
				<div class="row">
					<div class="col-sm-4 col-md-4 col-lg-1">
						<h3>YKenan</h3>
					</div>
					<div class="col-sm-4 col-md-4 col-lg-6">
						<i class="fa fa-reorder" onclick="showHidden()"></i>
					</div>
					<div class="col-sm-4 col-md-4 col-lg-5">
						<i class="fa fa-warning"></i>
						<i class="fa fa-tasks"></i>
						<i class="fa fa-cogs"></i>
						<span>${YKenan.YKenanName}</span>
					</div>
				</div>
			</div>
			<div class="bg_body">
				<div class="row">
					<div id="showHidden" class="col-sm-4 col-md-4 col-lg-2">
						<ul class="drop-down">
							<li><span><i class="fa fa-bicycle"></i>one</span>
								<ul class="sub">
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
								</ul>
							</li>
							<li><span><i class="fa fa-bicycle"></i>one</span>
								<ul class="sub">
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
								</ul>
							</li>
							<li><span><i class="fa fa-bicycle"></i>one</span>
								<ul class="sub">
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
								</ul>
							</li>
							<li><span><i class="fa fa-bicycle"></i>one</span>
								<ul class="sub">
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
									<li>
										<a href="#"><label><i class="fa fa-bicycle"></i>two</label></a>
									</li>
								</ul>
							</li>
						</ul>

					</div>
					<div id="fullScreen" class="col-sm-8 col-md-8 col-lg-10">
						
						<div class="card">
							<div class="card-header">
								YKenan
							</div>
							<div class="card-body">
								<h5 class="card-title">YKenan</h5>
								<p class="card-text">YKenan</p>
								<a href="#" class="btn btn-primary">YKenan</a>
							</div>
							<div class="card-footer text-muted">
								YKenan
							</div>					  
						</div><br />
						<div class="card">
							<div class="card-header">
								YKenan
							</div>
							<div class="card-body">
								<h5 class="card-title">YKenan</h5>
								<p class="card-text">YKenan</p>
								<a href="#" class="btn btn-primary">YKenan</a>
							</div>
							<div class="card-footer text-muted">
								YKenan
							</div>					  
						</div><br />
						<div class="card">
							<div class="card-header">
								YKenan
							</div>
							<div class="card-body">
								<h5 class="card-title">YKenan</h5>
								<p class="card-text">YKenan</p>
								<a href="#" class="btn btn-primary">YKenan</a>
							</div>
							<div class="card-footer text-muted">
								YKenan
							</div>					  
						</div><br />
						
					</div>
				</div>
			</div>

			<div class="bg_footer copyright">
				<div><i class="fa fa-copyright">YKenan</i></div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/drop-down.js" charset="utf-8"></script>
		<script src="js/style.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/example.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>
YKenan
关注
专栏目录
网页设计HTML表格基础与布局优秀PPT.ppt
12-03
"网页设计HTML表格基础与布局优秀PPT" 网页设计HTML表格基础与布局是网页设计的基础知识之一。通过学习HTML表格基础与布局，开发者可以更好地掌握网页设计的技术和技巧。 一、HTML表格基础 HTML表格是网页设计中...
Html5 通用布局方式
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-08 5335
概述 在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。 HTML5 语义元素 涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分： 示例效果图 布局效果如下： 布局源码
HTML5页面布局基础
hizyk的博客
11-23 1747
声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！ 区块标签（sections） 区块标签和分组标签通常在文档中充当容器和包含块等角色 HTML中负责页面总体布局的文档结构都应由区块元素来定义 这些新增标签主要是为替代div标签。这些新增的区块标签和div最大的区别就是其标签名带有语义 区块标签 body 代表浏览器的所有可视区域。body标签比较特殊，该标签同时也是区块标签。在大部分浏览器中，b
HTML5页面布局
最新发布
atarik@163.com
03-08 727
双飞翼布局和圣杯布局的实现效果完全一样，不同在于圣杯布局需要修改父元素的padding值，而双飞翼布局可以回避掉padding设置，改为使用margin值，在低版本浏览器能够避免一些额外的hack代码。双飞翼的缺点是在页面添加了一项额外的DOM层级。左右固定，中间自适应（圣杯布局）
HTML5+CSS3学习笔记（九）前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
Yeee_F
03-30 3607
前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
HTML+CSS基础——HTML5（布局）
weixin_66547608的博客
12-30 1230
这是一个HTML网页的代码，描述了一个简单的网页布局。该网页包括一个标题（Yoko’s Kitchen）、导航栏（home, classes, catering, about, contact）、主要内容区域（courses）和侧边栏（popular-recipes, contact-details）。页脚显示了版权信息。图像和样式表也包括在代码中。
百度新闻页面布局html+css
02-28
综上所述，创建“百度新闻页面布局html+css”涉及到了HTML基础标签的运用，页面布局策略，以及CSS样式的设定。通过实践，你可以更好地理解这些概念，并能构建出符合现代网页设计标准的新闻列表页面。
页面布局基础章节2.3
09-07
在“页面布局基础章节2.3”中，我们主要探讨的是HTML5中关于网页布局的基础概念和技术。HTML5是现代网页开发的标准，它为开发者提供了更强大和灵活的布局工具，使得网页设计更加高效和易维护。在这个章节，我们将...
网页设计布局基础第1/4页
10-31
一个好的网页布局能够帮助用户更快速地理解页面内容，并且提升用户体验。只有当网页布局与内容完美结合时，才能使网站更具吸引力。 #### 二、网页布局的基本原则 1. **清晰性**：确保网页上的信息易于理解和导航。...
HTML,CSS前端所有页面布局技术教程
11-30
HTML 和 CSS 是构建网页界面的基础，其中页面布局技术是实现美观和功能性的关键。本教程将深入探讨五种主要的HTML页面布局技术：静态布局、自适应布局、流式布局、响应式布局以及弹性布局。 1. 静态布局： 静态...
html5+css3页面布局
08-23
简单的HTML5与CSS3页面布局。
简单HTML5+CSS3页面布局
01-22
自己写的一个简单HTML5+CSS3页面布局，适合新手学习，MIchael学院
Html5 布局方式
weixin_34111790的博客
11-27 361
在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。布局效果如下： 涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分： HTML5 语义元素 head...
HTML5 ----- 布局
qq_64227183的博客
12-20 470
布局，绝对定位，相对定位
html5页面整体布局,HTML5页面布局 网页的基本结构
weixin_35374026的博客
05-31 2026
这篇HTML5页面布局我们来学习组成HTML5网页的基本结构都包含了哪些内容，首先先来看下源代码。欢迎关注头条号/自学编程hello world以上就是一个HTML5网页的最基本结构。下面我们对以上的源代码进行逐一的学习。声明不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，!表示不是，这是一个单标签，doctype不区分大小写，这行代码必须放在的前面。...
HTML5 页面布局【结合案例】
热门推荐
weixin_41964994的博客
08-19 3万+
新布局的意义 语义化 HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签 1. 这种语义化的特性提升了网页的质量和语义 2. 减少了以前用于CSS 调用的class 和 id 属性 对搜索引擎的友好 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好    额外补充点：新巩固 index.html  &lt;!DOCTYPE html&...
HTML布局（HTML Layout）简介
cnds123的专栏
09-17 7626
HTML布局（HTML Layout）是创建一个网站时需要考虑的情况，合理设计网页中内容的排列方式，让网页看起来更加合理、美观，能产生引人注目的视觉效果。
HTML---布局（详解）
Philo的博客
01-12 1万+
文章目录网页布局常用标签网页布局实例实例1:用div实现：实例2:用table实现 我们在完成老师布置的前端html任务时，往往布局是最关键的，我们必须先从宏观上把握页面大致的构成，通过标签先确定下页面总体有那些东西，将整体框架写好，之后才是对各个部分进行细致的填充。 网页布局常用标签 div：是块级元素，它可用于组合其他 HTML 元素的容器，它没有确切的含义，天生是用来进行页面布局的，除此之外，由于它属于块级元素，浏览器会在其前后进行换行。 table：是表格元素，每个表格均有若干行（由 &lt
html页面分上下部分,css布局 - 常规上中下分左右布局的一百种实现方法
weixin_29471541的博客
06-05 4838
一、 上中下左固定 - fixed+margin概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。html：我是头部position:fixed;z-index:9;section.flexModalnavul>li*5栏目一栏目二栏目三栏目四栏目五内容区域section.flexModalarticelsection{padding:60px0}sectio...
HTML网页布局基础与标签应用解析
在网页布局中，CSS (Cascading Style Sheets) 起到至关重要的作用，它允许我们将样式和布局信息分离出来，使内容和表现形式相分离，提高了代码的可维护性和可重用性。 `<meta>`标签则是HTML中用来提供元信息的重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值