2021/3/16 简单页面布局和选择器使用
<!DOCTYPE html>
<html lang="en">
<!-- id选择器 id表示身份,在页面中元素的id不允许重复,因此id选择器只能选择单个元素 -->
<!-- div 标签选择器 根据标签名称选择对应的所有标签 -->
<!--.nav 类别选择器 选择拥有该类别的多个元素 -->
<!-- * 通用选择器 针对页面上所有标签都生效-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局与选择器</title>
<style>
body {
margin: 0;
}
html {
background-color: #ddd;
}
#navigation {
height: 80px;
line-height: 80px;
text-align: center;
background-color: honeydew;
}
#bottom {
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: gray;
}
.nav {
text-decoration: none;
color: black;
margin: 0 15px;
}
#banner img {
width: 100%;
}
</style>
</head>
<body>
<!-- 一个控的div,默认宽度为100%,高度为0 -->
<div id="banner">
<img src="img/banner.jpg">
</div>
<!-- 字体大小默认16px 行高默认21px -->
<div id="navigation">
<a href="#" class="nav">首页</a>
<a href="#" class="nav">关于我们</a>
<a href="#" class="nav">产品世界</a>
<a href="#" class="nav">新闻中心</a>
<a href="#" class="nav">网络事件</a>
<a href="#" class="nav">联系我们</a>
<a href="#" class="nav">关于我们</a>
<a href="#" class="nav">网络新闻</a>
</div>
<div id="bottom">
版权所有:浙江王力门业有限公司 科技支持派桑网络
</div>
</body>
</html>
效果图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
