HTML5 使用结构元素进行网页布局

最新推荐文章于 2024-04-26 15:21:52 发布
最新推荐文章于 2024-04-26 15:21:52 发布
阅读量4.6k 收藏 11
点赞数 4
分类专栏： HTML5，元素 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LQSLM/article/details/60772851
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用结构元素进行网页布局</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<style>
<!--网页的宽度和对齐方式-->
.main{
width: 1000px;
margin: 40px auto;
}
<!--导航的宽度、高度和整体样式-->
.main nav{
width: 1000px;
height: 40px;
background: #999; /*背景颜色*/
border-radius: 5px; /*圆角边框半径*/
}
<!--导航个栏目的宽度、高度和对齐方式-->
.main nav li{
width: 70px;
height: 40px;
float: left; /*向左浮动*/
text-align: center;
line-height: 40px; /*行高为40px*/
}
<!--超链接初始状态的样式-->
.main nav ul li a{
color: #fff
font-family:"微软雅黑";
font-size: 14px;
}
<!--超链接鼠标悬停的样式-->
.main nav ul li a:hover{
font-weight: bold; /*字体加粗*/
}
<!--娱乐新闻模块的CSS规则-->
.main.block1{
width: 430px;
height: 250px;
margin-top: 20px; /*上外边距*/
float:left; /*向左浮动*/
}
<!--军事新闻模块的CSS规则-->
.mian.block2{
width: 430px;
height: 250px;
margin-top: 20px;
float: right; /*向右浮动*/
}
<!--娱乐新闻和军事新闻模块中标题的样式-->
.mian.block1 h1,
.mian.block2 h1{
color: #333; /*字体颜色*/
font-size: 20px; /*字体大小*/
font-family: "微软雅黑";
line-height: 50px; /*行高50px*/
text-indent: lem;
}
<!--列表规则-->
.mian.block1 ul,
.mian.block2 ul{
width: 390px;
margin:0 19px 10px 19px;/*上、右、下、左的外边距依次为0px 19px 10px 19px*/
}
<!--列表各项高度和宽度-->
.mian.block1.ul li,
.mian.block2.ul li{
width: 390px;
height: 40px;
}
<!--列表各项的文字样式-->
.mian.block1 ul li a,
.mian.block1 ul li time,
.mian.block2 ul li a,
.mian.block2 ul li time{
color: #333;
font-size: 14px;
font-family: "微软雅黑";
line-height: 40px;
}
.main.block1 ul li a,
.mian.block2 ul li a{
float: left;
}
.mian.block1 ul li a:hover,
.mian.block2 ul li a:haver{
color: red; /*鼠标悬停的字体的颜色为红色*/
}
.mian.block1 ul time,
.mian.block2 ul time{
float: right;
}
<!--页面底部的CSS规则-->
footer{
clear: both; /*清除两边的浮动*/
width: 1000px;
height: 200px;
margin: 0 auto;
text-align: center;
}
footer h1 span{
margin-right: 20px; /*右边边距*/
}
footer h1 span a{
color: #333;
font-family: "微软雅黑";
font-size: 14px;
line-height: 200px;
}
footer h1 span a:hover{
color: red;
}
</style>
<body>
<div class="main">
<p><a id=FileTop></a></p>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#" style="color:#EF2D36;">新闻</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>
</header>
<div class="block1">
<section>
<h1>娱乐新闻</h1>
<ul>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>军事新闻</h1>
<ul>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block1">
<section>
<h1>体育新闻</h1>
<ul>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>财经新闻</h1>
<ul>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
</div>
<footer>
<h1><span><a href="#">关于我们</a></span><span><a href="#">联系我们</a></span></h1>
</footer>
</body>
</html>
LQSLM
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css定位属性基础笔记
qq_64353584的博客
01-20 891
定位属性 static 自动定位 默认 静态定位无法通过边偏移属性 top bottom left right 一般用来清除定位 relative 相对定位 相对原文档流进行定位 absolute 绝对定位 相对于上一个已经定位的父元素进行定位 fixed 固定定位 相对于浏览器窗口进行定位 <!DOCTYPE html> <html lang="en"> <head> ...
html5设计状态布局,HTML5+CSS3网页设计与布局模式项目教程
weixin_32176627的博客
06-02 351
任务1搭建Web前端开发环境11.1任务导入11.2任务目标11.3核心知识21.3.1网页访问机制21.3.2浏览器市场份额31.3.3浏览器内核及渲染过程31.3.4PHP Web服务器组件41.3.5Web服务器启动失败原因分析41.3.6移动前端开发环境网络拓扑结构51.3.7WebStorm优势51.3.8EMMET语法51.4任务实施71.4.1操作系统版本及位数识别71.4.2Chr...
html的页面结构及标签,HTML5新结构标签和移动端页面布局
weixin_42523720的博客
06-03 373
--------------------HTML5新结构标签--------------------1、h5新增的主要语义化标签如下：1、header 页面头部、页眉2、nav 页面导航3、article 一篇文章4、section 文章中的章节5、aside 侧边栏6、footer 页面底部、页脚pc端兼容需要引用对应的js脚本2、HTML5 新增表单控件：网址 邮箱 日期 时间 星期 数量 范...
CSS 网页布局（详解网页的布局构造）
最新发布
百赢出品，必属精品
04-26 1527
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
常见布局
weixin_42588966的博客
12-17 164
1. 美团网切换城市 .category { padding-top: 20px; dd { cursor: pointer; font-size: 15px; color: #666; } .hd { margin-bottom: 30px; dt { font-size: 16px; ...
（四）盒子模型之外边距
weixin_47481102的博客
05-12 2655
1.外边距 margin属性用于设置外边距，即控制盒子和盒子之间的距离。 属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 margin简写方式代表的意义跟padding完全一致。 如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
css3布局学习html5网站模板
04-02
1. **语义化元素**：HTML5引入了许多新的语义元素，如`<header>`、`<nav>`、`<section>`、`<article>`等，帮助构建结构清晰、易于理解的网页结构，提高SEO友好性。 2. **表单控件增强**：HTML5增加了新的表单元素...
HTML5全屏两列布局网页模板
12-12
全屏布局通常使用`<header>`、`<main>`和`<footer>`等元素来构建页面的基本结构，这些元素在HTML5中被引入，增强了文档的语义性，帮助搜索引擎理解和索引内容。两列布局则可能利用`<section>`和`<article>`来组织...
HTML5九宫格布局效果
06-05
总而言之，HTML5的九宫格布局是通过结合HTML结构、CSS样式和（可选的）JavaScript交互来实现的。这种布局模式在许多网站和应用中都很常见，因为它能有效地展示多元素并保持清晰的视觉效果。通过深入理解和实践这个...
html5+css3页面布局特效特效代码
03-20
首先，HTML5作为新一代的超文本标记语言，引入了许多新元素，比如`<header>`、`<nav>`、`<section>`、`<article>`等，这些元素有助于更好地结构化网页内容，提高语义化。此外，HTML5还支持离线存储（离线Web应用）、...
HTML5树形结构图DIV布局代码.zip
10-05
HTML5是现代网页开发的核心，它提供了丰富的语义化元素和功能，使得开发者可以构建更加高效、可访问且富有交互性的网页。在这个“HTML5树形结构图DIV布局代码.zip”压缩包中，我们可能找到了一种利用HTML5、CSS3以及...
JavaScript显示组织结构图
07-31
里面有JS文件和例子2.html,如果显示乱码把JS拷贝到html里就好了
html5用结构元素来布局,HTML5 结构元素
weixin_35112865的博客
07-08 482
的用法。 一般来说，一个应该出现在文档大纲中article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中元素的作者信息可通过元素提供，但是不适用于嵌套的元素；元素的发布日...
html5使用框架页面布局,HTML框架集与布局
weixin_35578185的博客
06-07 4554
html的框架详解和布局什么是框架？框架将浏览器划分成不同的部分，每一部分加载不同的页面，实现在同一浏览器窗口中加载多个页面的效果划分框架标记语法格式lt;framesetgt;....HTML框架集我们可以通过框架，在一个浏览器窗口中显示多个页面。HTML框架集的使用十分简单，我们需要用到如下2个标签：frameset的属性frameset主要有以下属性：rowscolsboede...博文来自...
了解HTML5、网页布局、新增结构、网页元素
m0_64460142的博客
03-30 1740
1.了解HTML 什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本 新特性 新的语义化标签，比如 header、footer、nav 新的表单控件，比如 email、url、search 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 作者有话说： 之前我们使用的都是div、p、span等标签，这样的标签最简单使用，但是也有不方便的地方，第一不利于网站对访客的易用性，单单使用div标签只能制作网页但是 访问网页的渠道有很多，div制作网
html5结构元素的作用,HTML5之结构元素 | 学步园
weixin_33231055的博客
06-30 635
1：文档结构元素1.1 文章语义 -- article、header和footer元素article元素在页面中用来表示结构完整且独立的内容部分，如论坛的一个帖子，杂志或者报纸的一篇文章。article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章与针对该文章的评论一起可以使用嵌套article的方式，这时用来呈现评论的article元素被包含在文章内容的art...
0200 | CSS | 基础笔记
ShiningChow7的博客
02-19 401
DIV + CSS 布局美化2.1 CSS 基础2.1.1 CSS 简介2.1.2 CSS 的特点CSS 具有以下特点    （1）丰富的样式定义    （2）易于使用和修改    （3）多页面应用    （4）层叠    （5）页面压缩2.1.3 CSS 的使用CSS 可通过三种方式添加到 HTML 中：    （1）内联样式：在 HTML 元素中使用 “style”属性    （2）内部样式表...
margin：auto
前端日月明
03-18 2904
很多像我这样的小白会疑惑，为什么块级元素margin：auto；只能水平居中，不能垂直居中?css居中问题怼这里我查了一下，原来是这样的：margin百分比是按照包含块的宽度计算的！且padding比例也是按包含块的宽度计算！ &lt;style&gt; *{ margin:0; padding:0; } div{ width:200px; height:180p...
HTML5新增加结构元素设计布局页面
05-18
是的，HTML5新增了一些结构元素来帮助设计和布局网页。这些元素包括： 1. `<header>`：用于定义页面或页面部分的标题，通常放置在页面或部分的顶部。 2. `<nav>`：用于定义页面的导航链接，通常包含一组链接或按钮...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值