关于动态门户WEB博雅互动的源代码(HTML+CSS+javascript)

本文介绍了一个基于HTML、CSS和JavaScript实现的动态门户WEB项目。预览图可能因浏览器兼容性问题导致部分字体显示不一致,原文链接提供详细内容。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博雅互动</title>
    <link rel="stylesheet" href="./CSS/index.css">


</head>
<body>
    <div class = "box">
        <div class = "nav">
            <span><a href="http://www.boyaa.com"><img src="./images/logo.png"></a></span>
            <ul>
            <li class = "frist"><a href="#">首页</a></li>
            <li><a href="#">博雅游戏</a></li>
            <li><a href="#">博雅新闻</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">客服中心</a></li>
            <li><a href="#">投资者关系</a></li>
            <li class = "last"><img src="./images/jrwm.png"></li>
            </ul>
        </div>
    </div>
    <div class = "banner">
    <img src="./images/banner1.jpg" alt="" name = "banner">
    </div>

    <div class = "bpt">
        <div>
            <img src="./images/bpt1.jpg" alt=""><p align = "center">BPT宣传片</p><p align = "center"><a href="#">点击播放</a></p>
        </div><div>
            <img src="./images/bpt2.jpg" alt=""><p align = "center">博雅互动宣传视频</p><p align = "center"><a href="#">点击播放</a></p>
        </div><div>
            <img src="./images/bpt3.jpg" alt=""><p align = "center">斗地主</p><p align = "center"><a href="#">点击播放</a></p>
        </div><div class="bptlast">
            <img src="./images/bpt4.jpg" alt="" class="imglast"><p align = "center">德州扑克</p><p align = "center"><a href="#">点击播放</a></p>
        </div>
        
    </div>
<!--博雅新闻开始-->
<div class= "new">
    <div class = "newone"><img src="./images/bynewsbg.jpg" alt="">
    <ul>
        <li><script type="text/javascript">
            var today = new Date();
            var y = today.getFullYear();
            var m = today.getMonth()+1;
            document.write(y+"/"+m)
        </script>&nbsp;<a href="http://www.gdzsxx.com/news/dx/201612/106161.html"><strong>第三届宠物文化节在华南农业大学正式落幕</strong></a></li>
        <li><script type="text/javascript">
            var today = new Date();
            var y = today.getFullYear();
            var m = today.getMonth()+1;
            document.write(y+"/"+m)
        </script>
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
制作一个博雅互动新闻的HTML网页可以按照以下步骤进行: 1. 创建HTML文件:首先,创建一个新的HTML文件,可以使用任何文本编辑器,例如Notepad++、Sublime Text等。 2. 添加HTML结构:在HTML文件中,添加HTML的基本结构,包括`<!DOCTYPE html>`声明、`<html>`标签、`<head>`标签和`<body>`标签。 3. 设置页面标题:在`<head>`标签中,使用`<title>`标签设置页面的标题,例如`<title>博雅互动新闻</title>`。 4. 添加样式和样式表:可以使用内联样式或外部样式表来设置页面的样式。可以在`<head>`标签中使用`<style>`标签添加内联样式,或者使用外部CSS文件链接到HTML文件中。 5. 创建页面布局:使用HTML标签和CSS样式来创建页面的布局。可以使用`<header>`标签来定义页面的页眉,`<nav>`标签来定义导航栏,`<section>`标签来定义新闻内容区域,`<article>`标签来定义每篇新闻的内容,`<footer>`标签来定义页面的页脚等。 6. 添加新闻内容:在每个`<article>`标签中,添加新闻的标题、日期、作者和正文内容等。 7. 添加链接和图片:可以在新闻内容中添加链接和图片,使用`<a>`标签来创建链接,使用`<img>`标签来插入图片。 8. 设置页面交互:可以使用JavaScript来实现页面的交互效果,例如点击新闻标题展开或收起新闻内容等。 9. 保存并预览:保存HTML文件,并在浏览器中打开该文件,预览博雅互动新闻网页的效果。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>博雅互动新闻</title> <style> /* 添加样式 */ body { font-family: Arial, sans-serif; background-color: #f5f5f5; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } section { margin: 20px; background-color: #fff; padding: 20px; } article { margin-bottom: 20px; } h2 { color: #333; } p { color: #666; } a { color: #0066cc; text-decoration: none; } img { max-width: 100%; height: auto; } </style> </head> <body> <header> <h1>博雅互动新闻</h1> </header> <nav> <!-- 导航栏内容 --> </nav> <section> <article> <h2><a href="#">新闻标题</a></h2> <p>新闻内容...</p> <p>作者:张三</p> <p>日期:2022-01-01</p> <img src="news_image.jpg" alt="新闻图片"> </article> <!-- 其他新闻内容 --> </section> <footer> <p>版权所有 © 2022 博雅互动</p> </footer> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值