<1>加CSS制作书城网页代码
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

我的书城

我的书城

图书推荐

book1

书名1

作者1

$10.99

book2

书名2

作者2

$12.99

book3

书名3

作者3

$14.99

©2021 我的书城

```

在这个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内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队,专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务,帮助客户在激烈的市场竞争中获得更大的优势和发展机会!

点赞(55) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部