下面是详细的“div css制作网页实战笔记心得”的完整攻略:
1.什么是div和css?
1.1 div是什么?
div是HTML中一个标签,它代表一个没有具体含义的元素容器,可以用来把网页内容划分成不同的块。我们可以在CSS中为它定义样式,使它的外观和行为与其它元素不同。
1.2 CSS是什么?
CSS(Cascading Style Sheets)翻译为层叠式样式表,是一种用来定义网页样式的语言。通过CSS,我们可以为网页元素定义外观、位置、动画等特性,让网页更加美观和易于操作。
2.如何用div和css制作网页?
2.1 HTML基本结构
HTML是整个网页的骨架,它定义了网页的结构。以下是一个典型的HTML结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>网页标题</h1>
</div>
<div class="content">
<p>这是内容区域。</p>
</div>
<div class="footer">
<p>版权所有</p>
</div>
</body>
</html>
上面的代码中,<html>
标签包围整个网页内容,<head>
标签包围了一些网页元数据(例如标题、样式表等),<body>
标签包围网页的实际内容。<div>
标签用来划分不同的内容区块,在CSS中为每个div指定样式。
2.2 CSS样式表书写
在HTML中引用一个CSS样式表,在<head>
标签中使用<link>
标签,例如:
<link rel="stylesheet" href="style.css">
这样会把当前目录下的“style.css”文件作为样式表导入到HTML页面里。下面是一个简单的样式表例子:
.header {
background-color: #ccc;
height: 60px;
text-align: center;
line-height: 60px;
}
.content {
background-color: #f5f5f5;
padding: 20px;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
上面的CSS样式表定义了三个类(class).header
、.content
、.footer
。这些类分别对应上面HTML中的三个<div>
标签。在CSS中,我们可以为不同的类定义不同的外观和行为,使页面变得美观、易于操作等。
3.示例说明
3.1 示例1:网页布局
下面是一个比较完整的示例,它演示了如何用div和CSS创建一个网页的布局效果。请参考下面HTML和CSS代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页布局示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>网页布局示例</h1>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</div>
<div class="content">
<div class="aside">
<h2>侧边栏</h2>
<ul>
<li><a href="#">侧边栏链接1</a></li>
<li><a href="#">侧边栏链接2</a></li>
<li><a href="#">侧边栏链接3</a></li>
</ul>
</div>
<div class="main">
<h2>主要内容</h2>
<p>这里是主要内容,可以放一些文章或者图片等。</p>
</div>
</div>
<div class="footer">
<p>版权所有</p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.header {
background-color: #ddd;
height: 60px;
line-height: 60px;
text-align: center;
}
.header h1 {
display: inline-block;
font-size: 24px;
margin-right: 30px;
}
.header ul {
display: inline-block;
list-style: none;
}
.header li {
display: inline-block;
margin-right: 20px;
}
.header li a {
color: #333;
text-decoration: none;
}
.content {
display: flex;
margin-top: 20px;
}
.aside {
background-color: #eee;
width: 250px;
height: 400px;
padding: 20px;
}
.aside h2 {
font-size: 18px;
}
.aside ul {
margin-top: 10px;
}
.aside li {
margin-bottom: 10px;
}
.aside li a {
color: #333;
}
.main {
flex: 1;
background-color: #f5f5f5;
padding: 20px;
}
.footer {
background-color: #333;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
}
上面的代码展示了一个常见的网页布局模式。其中,<div class="header">
表示网页的头部,<div class="content">
表示网页的正文内容,包括一个侧边栏和主要内容区块,<div class="footer">
表示网页的底部。CSS中的样式则定义了这些元素的外观和布局特性,例如背景颜色、字体大小、间距等。
3.2 示例2:网页导航栏
下面是一个简单的示例,它演示了如何用CSS实现一个简单的网页导航栏。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页导航栏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
height: 60px;
line-height: 60px;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
margin-right: 20px;
}
.navbar li:last-child {
margin-right: 0;
}
.navbar li a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 10px;
height: 60px;
line-height: 60px;
border-bottom: 3px solid transparent;
}
.navbar li a:hover {
border-bottom-color: #fff;
}
上面的代码中,<div class="navbar">
表示网页导航栏,包括一个无序列表(<ul>
)和若干个列表元素(<li>
),每个列表元素包含一个超链接(<a>
)。CSS样式表定义了这些元素的外观和排列方式,使网页导航栏更加美观和易于操作。其中,float: left
风格使得 li
元素左浮动,border
属性使得鼠标划过时链接底部呈现一条边框,为导航栏增强了焦点状态。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:div css制作网页实战笔记心得 - Python技术站