html中元素 标签 属性的值 " />
作为网页设计的基础语言,HTML和CSS是开发者的必备技能。其中,HTML被用来展示和呈现网页的结构,而CSS用来控制网页的样式和布局。本文将为大家介绍如何使用HTML和CSS,制作一个简单的书城网页。
首先,我们需要了解一下HTML中的基本元素、标签和属性的值。
HTML中的基本元素包括:
1.DOCTYPE文档类型声明
2.html元素,表示一个HTML文档的根元素
3.head元素,用于包含网页的头部信息
4.title元素,用于指定网页的标题
5.body元素,用于包含网页的主体内容
HTML中的基本标签包括:
1.基本文本标签:p、span、a、b、i、u等
2.列表标签:ul、ol、li等
3.表格标签:table、tr、td等
4.表单标签:form、input、select、option等
HTML中的属性的值:
1.属性类型:class、id、style、title等
2.属性值:表示元素的具体属性值,可以设置为字符串、数字、颜色等等。
了解了HTML的基础元素、标签和属性的值之后,我们开始准备制作我们的书城网页。
1. 创建HTML文档
首先,我们需要创建一个HTML文档。可以使用文本编辑器,如记事本、Sublime Text等等,新建一个文本文件,然后将以下内容保存为一个HTML文件。
```html
我的书城
作者1 $10.99 作者2 $12.99 作者3 $14.99 图书推荐
书名1
书名2
书名3
```
在这个HTML文档中,我们将网页分为了三个部分:头部、主体和底部。
2. 创建CSS样式表
接下来,我们需要为网页创建样式。创建一个新的文本文件,将以下内容保存为一个CSS文件。
```css
body {
font-family: Arial, sans-serif;
background-color: #F9F9F9;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #FFFFFF;
padding: 10px 20px;
}
h1 {
margin: 0;
font-size: 36px;
font-weight: normal;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
main {
margin: 20px;
}
.books {
display: flex;
flex-wrap: wrap;
}
.book {
width: 300px;
margin: 20px;
padding: 10px;
background-color: #FFFFFF;
box-shadow: 0 0 5px #CCCCCC;
text-align: center;
}
.book img {
width: 200px;
height: 200px;
}
.book h3 {
margin: 5px 0;
font-size: 24px;
}
.book p {
margin: 0;
font-size: 16px;
}
.book p.price {
color: #FF0000;
font-size: 18px;
font-weight: bold;
}
footer {
background-color: #333;
color: #FFFFFF;
padding: 10px 20px;
text-align: center;
}
```
在这个CSS样式表中,我们使用了选择器和属性来设置网页的样式。比如,我们使用了body选择器来设置整个网页的字体、背景颜色、外边距和内边距等等。同时,我们还使用了header选择器来设置网页的头部的背景颜色、字体颜色和内边距等等。
3. 结合HTML和CSS
在HTML文档中,我们使用link元素将CSS样式表链接到HTML文档中。具体来说,我们在head元素中添加了以下代码。
```html
```
这段代码中,href属性指向了我们创建的CSS样式表。这样,浏览器就会根据这个CSS样式表来渲染HTML文档中的元素。
接下来,我们针对HTML中的各个元素和标签,添加样式。比如,我们使用header选择器来设置网页的头部的背景颜色、字体颜色和内边距等等。
我们还使用了.nav ul li选择器来设置导航链接的样式。具体来说,我们将导航链接的文本颜色设置为白色,并且添加了一个下划线效果,以表明该链接已被选中。
针对主体内容,我们使用了flex属性来设置书籍的排列方式。具体来说,我们将.books元素设置为弹性容器,并且将flex-wrap属性设置为wrap。这样,当书籍的数量超过一行时,它们就会自动换行。
对于每本书,我们使用了.book选择器来设置样式。比如,我们将书籍的宽度设置为300像素,并且添加了一个灰色的阴影效果。
另外,我们使用.book img选择器来设置每本书的封面图片的宽度和高度。
4. 测试效果
以上就是使用HTML和CSS来制作一个简单的书城网页的过程。完成HTML和CSS的编写后,我们只需要在浏览器中打开HTML文件即可查看效果。
总结:HTML和CSS是构建网站和Web应用程序的基础。HTML用来定义网页的结构,CSS用来设置网页的样式和布局。在制作网页时,我们需要了解HTML中的基本元素、标签和属性的值,同时掌握常用的CSS样式和属性。
壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队,专门致力于为客户提供优质的服务。
我们致力于为客户提供一站式的互联网营销服务,帮助客户在激烈的市场竞争中获得更大的优势和发展机会!
发表评论 取消回复