AI生成式探究学习教学辅助设计单-3.3 新闻网页制作.docx

AI生成式探究学习教学辅助设计单

使用AI名称：DeepSeek班级：学生姓名：

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第三模块网站页面美化（CSS）

3.3新闻网页制作

使用HTML5，CSS3语言，制作一个新闻网页。要求显示新闻内容，并对页面文字进行样式设置，给出案例代码。

下面是一个简单的新闻网页示例，使用HTML5和CSS3来显示新闻内容，并对页面文字进行样式设置。

###HTML部分(index.html)

```html

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title新闻网页/title

linkrel=stylesheethref=styles.css

/head

body

header

h1今日新闻/h1

nav

ul

liahref=#首页/a/li

liahref=#国内新闻/a/li

liahref=#国际新闻/a/li

liahref=#财经新闻/a/li

liahref=#科技新闻/a/li

/ul

/nav

/header

main

article

h2标题：人工智能技术取得重大突破/h2

pclass=meta发布时间：2023年10月10日|作者：张三/p

imgsrc=news-image.jpgalt=新闻图片class=news-image

pclass=content近日，全球领先的科技公司宣布在人工智能领域取得了重大突破。这项新技术将极大地提高机器学习的效率，并有望在医疗、金融、教育等多个行业得到广泛应用。/p

pclass=content专家表示，这一突破将推动人工智能技术的发展，未来几年内可能会看到更多基于AI的创新应用。/p

/article

aside

h3相关新闻/h3

ul

liahref=#人工智能在医疗领域的应用/a/li

liahref=#金融科技的未来发展趋势/a/li

liahref=#教育行业如何利用AI技术/a/li

/ul

/aside

/main

footer

pcopy;2023新闻网页.保留所有权利。/p

/footer

/body

/html

```

###CSS部分(styles.css)

```css

/*全局样式*/

body{

font-family:Arial,sans-serif;

line-height:1.6;

margin:0;

padding:0;

background-color:#f4f4f4;

color:#333;

}

/*头部样式*/

header{

background-color:#333;

color:#fff;

padding:10px0;

text-align:center;

}

headerh1{

margin:0;

font-size:2.5em;

}

navul{

list-style:none;

padding:0;

margin:0;

display:flex;

justify-content:center;

}

navulli{

margin:015px;

}

navullia{

color:#fff;

text-decoration:none;

font-weight:bold;

}

navulli