HTML5 使用结构元素进行网页布局
2017-03-07 17:55
260 查看
<!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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5新的网页结构及主要新增元素的使用
- 改变页面使用的CSS文件，使网页进行布局或色调等改变
- 使用CSS进行网页布局的十八个技巧
- 使用CSS进行简单的网页布局
- JAVA在线抓取网页中的元素的例子（使用JSoup包进行解析）
- 如何使用CSS进行网页布局（HTML/CSS）
- 不使用class和id进行网页布局的方法
- PhoneGap/Cordova学习笔记--4.使用HTML5进行页面布局
- CSS教程:使用ul进行网页的多列布局
- JAVA在线抓取网页中的元素的例子（使用JSoup包进行解析）
- [HTML5移动网页开发] Flexbox布局讲解与使用技巧
- 使用DIV+CSS进行网页布局设计(转)
- 使用样式表CSS进行网页布局的十八个技巧
- 使用SiteMesh简化网页布局
- WEB标准网页布局中尽量不要使用的HTML标签
- 使用面板组件进行分组和布局
- 使用Grid来对WPF页面进行布局排版
- 网页布局中常用的列表元素ul ol li dl dt dd讲解
- 使用Grid来对WPF页面进行布局排版
- 不要使用的HTML标签(WEB标准网页布局)