制作一个导航栏页面
效果图：
代码图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏示例</title>
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block,flex;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #0c0b0b;
color: rgb(248, 248, 248);
}
.navbar a.active {
background-color: #333;
color: white;
}
@media screen and (max-width: 600px) {
.navbar a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href=" ">首页</a >
<a class="active" href=" ">新闻</a >
<a class="active" href=" ">热点</a>
<a class="active" href="">联系我们</a>
<a class="active" href="">关于我们</a>
<a class="active" href=" ">其他</a>
<a class="active" href=" ">我的</a>
</div>
</body>
</html>css盒子模型学习记录：
CSS盒子模型是一个非常基础但又非常重要的概念，它是网页布局的核心。下面是一个关于CSS盒子模型的学习记录概要，你可以根据这个概要来扩展你的学习笔记。
CSS盒子模型学习记录
1. 盒子模型概述
定义：CSS盒子模型是一个设计和布局网页元素的模型，每个HTML元素可以看作一个矩形盒子。
组成：包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。
2. 内容区域（Content）
网页元素的实际内容所在区域。
通过 width 和 height 属性定义大小。
3. 内边距（Padding）
内容区域周围的空间，与内容之间有一定的间隔。
通过 padding-top 、 padding-right 、 padding-bottom 、 padding-left 或简写 padding 属性设置。
4. 边框（Border）
围绕内边距的一条线，可以设置宽度、样式和颜色。
通过 border-width 、 border-style 、 border-color 属性定义。
5. 外边距（Margin）
盒子与其他元素之间的空间。
通过 margin-top 、 margin-right 、 margin-bottom 、 margin-left 或简写 margin 属性设置。
6. 盒子模型的两种类型
标准盒子模型：总宽度和高度由内容、内边距、边框决定。
IE盒子模型（怪异模式）：总宽度和高度只由内容决定，内边距和边框会扩展盒子的尺寸。
7. 盒子尺寸计算
标准盒子模型： width + padding + border = 总宽度
IE盒子模型： width = 总宽度（不包括 padding 和 border ）
8. CSS3盒模型属性
box-sizing 属性可以改变盒子模型的计算方式。
content-box ：标准盒子模型。
border-box ：IE盒子模型，边框和内边距包含在元素的宽度和高度内。
3469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
