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

最新推荐文章于 2024-04-26 15:21:52 发布

LQSLM

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量4.6k

点赞数 4

分类专栏： HTML5，元素文章标签： html5

本文链接：https://blog.csdn.net/LQSLM/article/details/60772851

版权

HTML5，元素专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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; /*字体加粗*/
}

.main.block1{
width: 430px;
height: 250px;
margin-top: 20px; /*上外边距*/
float:left; /*向左浮动*/
}

.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;
}

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
评论
HTML5 使用结构元素进行网页布局

使用结构元素进行网页布局.main{width: 1000px;margin: 40px auto;}.main nav{width: 1000px;height: 40px;background: #999;/*背景颜色*/border-radius: 5px;/*圆角边框半径*/}.main nav li{widt
复制链接

扫一扫

专栏目录