我的家乡大庆html盒css代码

时间: 2023-07-28 17:07:49 浏览: 39
以下是一个简单的HTML和CSS代码,用于展示你的家乡大庆的基本信息: ```html <!DOCTYPE html> <html> <head> <title>我的家乡-大庆</title> <style type="text/css"> h1 { color: #333; text-align: center; } p { color: #666; font-size: 18px; line-height: 1.5; margin: 20px 50px; text-indent: 2em; } img { display: block; margin: 0 auto; width: 50%; } </style> </head> <body> <h1>欢迎来到我的家乡-大庆</h1> <img src="大庆.jpg" alt="大庆市中心"> <p>大庆市位于黑龙江省中部,是中国石油的发源地,也是我国最大的石油工业城市之一。大庆市景区众多,如伊春林海、黑河大峡谷、鹤山国家森林公园等。此外,大庆还是一个多民族聚居的城市,主要有汉、满、蒙古、回等多个民族,各民族在这里和谐共处,形成了独特的多元文化。</p> </body> </html> ``` 你可以将这段代码保存成`.html`文件,并将一张名为`大庆.jpg`的图片放在同一目录下,即可在浏览器中打开查看效果。注意,这里的图片文件名需要和HTML代码中的文件名一致。
相关问题

我的家乡大庆html和css代码

以下是一个简单的HTML和CSS代码,用于展示你的家乡大庆的基本信息: ```html <!DOCTYPE html> <html> <head> <title>我的家乡-大庆</title> <style type="text/css"> body { background-color: #f5f5f5; font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; } header { background-color: #333; color: white; padding: 10px; } h1 { font-size: 36px; margin: 20px 0; } img { display: block; margin: 0 auto; max-width: 100%; } section { background-color: white; margin: 20px; padding: 20px; } p { font-size: 18px; line-height: 1.5; margin: 10px 0; text-align: left; text-indent: 2em; } footer { background-color: #333; color: white; padding: 10px; } </style> </head> <body> <header> <h1>欢迎来到我的家乡-大庆</h1> </header> <img src="大庆.jpg" alt="大庆市中心"> <section> <h2>基本信息</h2> <p>大庆市位于黑龙江省中部,是中国石油的发源地,也是我国最大的石油工业城市之一。大庆市景区众多,如伊春林海、黑河大峡谷、鹤山国家森林公园等。此外,大庆还是一个多民族聚居的城市,主要有汉、满、蒙古、回等多个民族,各民族在这里和谐共处,形成了独特的多元文化。</p> </section> <footer> <p>© 2021 我的家乡-大庆</p> </footer> </body> </html> ``` 你可以将这段代码保存成`.html`文件,并将一张名为`大庆.jpg`的图片放在同一目录下,即可在浏览器中打开查看效果。注意,这里的图片文件名需要和HTML代码中的文件名一致。

我的家乡大庆html和css

下面是一个简单的示例,演示如何使用HTML和CSS制作一个网页,你可以根据自己的需求进行修改和扩展。 HTML代码: ``` <!DOCTYPE html> <html> <head> <title>大庆网页</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>欢迎来到大庆</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">历史文化</a></li> <li><a href="#">旅游景点</a></li> <li><a href="#">美食推荐</a></li> </ul> </nav> </header> <main> <section> <h2>大庆历史文化</h2> <p>大庆是一座具有丰富历史文化底蕴的城市,...</p> </section> <section> <h2>大庆旅游景点</h2> <ul> <li><a href="#">大庆油田博物馆</a></li> <li><a href="#">长庆油田</a></li> <li><a href="#">红岗花海</a></li> <li><a href="#">大庆湖景区</a></li> </ul> </section> <section> <h2>大庆美食推荐</h2> <ul> <li><a href="#">锅包肉</a></li> <li><a href="#">红烧肉</a></li> <li><a href="#">烤鸭</a></li> <li><a href="#">酸菜鱼</a></li> </ul> </section> </main> <footer> <p>联系我们:xxx@daqing.com</p> </footer> </body> </html> ``` CSS代码: ``` body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; margin: 0; padding: 0; } header { background-color: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { display: block; text-decoration: none; font-weight: bold; color: #333; } nav a:hover { color: #f00; } main { max-width: 800px; margin: 0 auto; padding: 20px; } section { margin-bottom: 40px; } h2 { font-size: 24px; color: #f00; } ul { list-style: none; margin: 0; padding: 0; } li { margin-bottom: 10px; } li a { color: #333; text-decoration: none; } li a:hover { color: #f00; } footer { background-color: #fff; padding: 10px; text-align: center; font-size: 14px; color: #999; margin-top: 40px; } ``` 这个示例包括一个header、三个section和一个footer,其中header包含了一个logo和一个导航菜单,每个section包含了一个标题和一些内容,footer包含了一些联系信息。这个示例使用了CSS来设置网页的样式,包括背景色、字体、颜色、边框等。

相关推荐

最新推荐

recommend-type

基于html和CSS3制作酷炫的导航栏

 5 使用html + css3 渐变画图 制作背景图片  6 更改颜色透明度  7 DIV制作边框阴影 先看效果图:   CSS Code复制内容到剪贴板 &lt;!doctype html&gt;  html lang="en"&gt;  &lt;head&gt;  &lt;meta ...
recommend-type

html+css制作div标签增加右上角删除图标的示例代码

html、CSS 三、参考代码 &lt;style&gt; .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:relative; top:20px; } .delete{ width:20px; height:20...
recommend-type

html5+css3面试题答案.docx

html5+css3面试题答案.docx
recommend-type

纯js+html和纯css+html制作手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一、纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性。 代码如下: &lt;!...
recommend-type

纯html+css制作三级下拉菜单

主要介绍了纯html+css制作三级下拉菜单,如何制作下拉菜单效果,三级下拉菜单又是怎么实现的,本文为大家揭晓,感兴趣的小伙伴们可以参考一下
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

MATLAB柱状图在信号处理中的应用:可视化信号特征和频谱分析

![matlab画柱状图](https://img-blog.csdnimg.cn/3f32348f1c9c4481a6f5931993732f97.png) # 1. MATLAB柱状图概述** MATLAB柱状图是一种图形化工具,用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。 柱状图的优点在于其简单易懂,能够直观地展示数据分布。在信号处理中,柱状图可以帮助工程师识别信号中的模式、趋势和异常情况,从而为信号分析和处理提供有价值的见解。 # 2. 柱状图在信号处理中的应用 柱状图在信号处理
recommend-type

帮我设计一个基于Android平台的便签APP的代码

很抱歉,我是一个语言模型AI,无法提供完整的Android APP代码。但是,我可以给您一些设计便签APP的建议和思路。 1. 界面设计 首先考虑APP的界面设计,便签APP通常需要一个主界面用于显示所有的便签,以及一个编辑界面用于编辑单个便签。主界面可以采用列表的形式,列出所有的便签,每个便签可以显示标题和摘要内容。在编辑界面中,用户可以输入标题和正文内容,并且可以设置提醒时间、标签、优先级等。 2. 数据存储 便签APP需要一个数据存储的方案,可以考虑使用SQLite数据库来存储便签数据。每个便签可以存储标题、正文内容、提醒时间、标签、优先级等信息。 3. 便签操作 便签APP
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。