html+css+js 我的学校网页设计与制作实例(6个页面)
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>作品介绍</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">HTML+CSS+JS网页设计与制作，我的学校网页设计与制作实例， 本实例适合于初学HTML+CSS+JS的<span style="color: black;">朋友</span>。该案例里面有div+css的样式布局设置，这个实例比较全面，有一级页、二级页、详情页、输入表单等，共6个页面。本文将介绍<span style="color: black;">怎样</span><span style="color: black;">经过</span>从零<span style="color: black;">起始</span>设计我的学校网站，并将其转换为代码的过程来实现设计与制作。（网页设计与制作分享。源码分享。）</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/c883236658424b41ada290f2b68ba948~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=pjcTJ9mX%2BRibsyK8%2Blz0mTKA848%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1.网页作品简介方面 ：青绿色简约风格，div+css布局。<span style="color: black;">重点</span>有：首页、关于暨大、学校<span style="color: black;">资讯</span>、<span style="color: black;">资讯</span>详情页、校园风光、 联系<span style="color: black;">咱们</span>等总共6个页面html下载。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2.网页作品技术方面：<span style="color: black;">运用</span>CSS制作了网页背景图、鼠标经过及选中导航变色效果等。 首页制作了搜索表单。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3.网页作品布局方面：网页布局整体为LOGO、导航、主<span style="color: black;">身体</span>容布局。子页面多种布局，<span style="color: black;">照片</span>居中布局，文本描述对齐方式设置了左对齐。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">4.网页作品编辑方面：此作品为我的学校网页设计题材，代码为 html+css 布局制作，作品下载后可<span style="color: black;">运用</span>任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可<span style="color: black;">运用</span>）</span></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>作品效果</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">视频演示：</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
重播
<div style="color: black; text-align: left; margin-bottom: 10px;">播放</div>
<span style="color: black;">00:00</span>
<span style="color: black;">/</span>
<span style="color: black;">00:00</span>
<span style="color: black;">直播</span>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;">00:00</div>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">进入全屏</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">50</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">点击按住可拖动视频</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">截图演示：</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首页</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/2a9ecde772da448882c38fe429edbee4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=uaqSV4DtB7aKhj1U%2BuhACxvz7bY%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">关于暨大</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/40364247584641128bf7a8318d93ea4c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=dkpTDO%2Fp7ngWj6bT4nsCCiJc1b4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">学校<span style="color: black;">资讯</span></span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/1bcd6e4e494041b3ad72f49b10599a46~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=luAg5D3Ii%2FCk6bST5q4g%2B3jdqqw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">资讯</span>详情页</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6f4b84f82a8041f08c017798d2182215~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=gO24IKG1Fbd432gzqu9QHLUomXc%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">校园风光</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/057f0b18b16d49989d9953db68b530cf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=ZDXyazvZPqBcDWlgGohww78PN%2Fw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">联系<span style="color: black;">咱们</span></span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/7a9cfbdc1058418b85fc225983b38572~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=%2BOhbGEy0PpoZvS%2F7wfpWAZeTSPg%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>作品代码</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">文件目录：</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6bd39c22625e403ea9f8c4b506b69a0b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=COgGlHouPDzMdev30vnFavS2Vio%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5489932a8a8d4105b491ee3582f97b82~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=iiPe30OheAF7%2F%2FqUyH6B3AMcoJw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/e46e0215ef1a444aa70c5feb49c31564~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=N9BTXKebH5taz5y2eVCz5ZEhZsI%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">HTML代码：</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首页</span></p><span style="color: black;"><!DOCTYPE <span style="color: black;">html</span>></span>
<span style="color: black;"><<span style="color: black;">html</span> <span style="color: black;">lang</span>=<span style="color: black;">"en"</span>></span>
<span style="color: black;"><<span style="color: black;">head</span>></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">charset</span>=<span style="color: black;">"UTF-8"</span>></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">name</span>=<span style="color: black;">"viewport"</span> <span style="color: black;">content</span>=<span style="color: black;">"width=device-width, initial-scale=1.0"</span>></span>
<span style="color: black;"><<span style="color: black;">title</span>></span>首页<span style="color: black;"></<span style="color: black;">title</span>></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span> <span style="color: black;">type</span>=<span style="color: black;">"text/css"</span> <span style="color: black;">href</span>=<span style="color: black;">"css/reset.css"</span>></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span> <span style="color: black;">type</span>=<span style="color: black;">"text/css"</span> <span style="color: black;">href</span>=<span style="color: black;">"css/index.css"</span>></span>
<span style="color: black;"></<span style="color: black;">head</span>></span>
<span style="color: black;"><<span style="color: black;">body</span>></span>
<span style="color: black;"><!-- 头部 --></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"top-box"</span>></span>
<span style="color: black;"><!-- logo --></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/logo2.svg"</span> <span style="color: black;">class</span>=<span style="color: black;">"logo"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"right-box"</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"#"</span>></span>新门户<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"#"</span>></span>邮件<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"#"</span>></span>网上服务大厅<span style="color: black;"></<span style="color: black;">a</span>></span> |
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"#"</span>></span>图书馆<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"in-row"</span>></span>
<span style="color: black;"><<span style="color: black;">input</span> <span style="color: black;">type</span>=<span style="color: black;">"text"</span> <span style="color: black;">placeholder</span>=<span style="color: black;">"请输入您的关键词"</span>></span>
<span style="color: black;"><<span style="color: black;">button</span> <span style="color: black;">class</span>=<span style="color: black;">"button"</span>></span>搜索<span style="color: black;"></<span style="color: black;">button</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"header"</span>></span>
<span style="color: black;"><!-- logo --></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/hw_zxdj.png"</span> <span style="color: black;">class</span>=<span style="color: black;">"logo"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"><!-- 导航栏 --></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"nav"</span>></span>
<span style="color: black;"><<span style="color: black;">ul</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">class</span>=<span style="color: black;">"active"</span> <span style="color: black;">href</span>=<span style="color: black;">"./index.html"</span> <span style="color: black;">target</span>=<span style="color: black;">"_self"</span>></span>
<span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">title</span>=<span style="color: black;">"首页"</span>></span>首页<span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"./about.html"</span> <span style="color: black;">target</span>=<span style="color: black;">"_self"</span>></span>
<span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">title</span>=<span style="color: black;">"关于暨大"</span>></span>关于暨大<span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"./news.html"</span> <span style="color: black;">target</span>=<span style="color: black;">"_self"</span>></span>
<span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">title</span>=<span style="color: black;">"学校<span style="color: black;">资讯</span>"</span>></span>学校<span style="color: black;">资讯</span><span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"./scenery.html"</span> <span style="color: black;">target</span>=<span style="color: black;">"_self"</span>></span>
<span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">title</span>=<span style="color: black;">"校园风光"</span>></span>校园风光<span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"./contact.html"</span> <span style="color: black;">target</span>=<span style="color: black;">"_self"</span>></span>
<span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">title</span>=<span style="color: black;">"联系<span style="color: black;">咱们</span>"</span>></span>联系<span style="color: black;">咱们</span><span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">a</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"></<span style="color: black;">ul</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><!-- 主内容 --></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"main-content"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"banner"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/banner.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"project-content"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"content-title"</span>></span>暨南大学<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"detail-content"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"detail-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/dasdasda.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"detail-desc"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>暨南大学是中国<span style="color: black;">第1</span>所由政府创办的华侨学府。<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>“暨南”二字出自《尚书·禹贡》：“东渐于海，西被于流沙，朔南暨，声教讫于四海。”意即面向南洋，将中华文化远播到五洲四海。
<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>学校<span style="color: black;">日前</span>是中央统战部、教育部、广东省人民政府共建的国家“双一流”建设高校，直属中央统战部管理。<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>暨南大学是中国历史最悠久的大学之一。学校的前身是1906年清政府创立于南京的暨南学堂，后迁至上海，1927年更名为国立暨南大学。<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"content-title"</span>></span>校园风光<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"content-list content-list2"</span>></span>
<span style="color: black;"><<span style="color: black;">ul</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy6.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy7.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy8.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy9.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy10.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy11.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy12.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"cover-pic"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"./images/xy13.jpg"</span> <span style="color: black;">alt</span>=<span style="color: black;">""</span> /></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"title"</span>></span>校园一角<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"></<span style="color: black;">ul</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"content-title"</span>></span><span style="color: black;">媒介</span>暨大<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"content-list content-list2"</span>></span>
<span style="color: black;"><<span style="color: black;">video</span> <span style="color: black;">src</span>=<span style="color: black;">"https://osvc-mediaxbase.jnu.edu.cn/media/mediax/media/202312/25/51c2c04451825398f8c8b734.mp4"</span> <span style="color: black;">class</span>=<span style="color: black;">"video"</span> <span style="color: black;">controls</span>></span><span style="color: black;"></<span style="color: black;">video</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><!-- 底部 --></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"footer"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"contact-container"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"contact-title"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>联系<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>Contact<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"contact-content"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"c-name"</span>></span>木番薯科技<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"c-addr"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>地 点：广州市天河区花城大道666号<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>邮编：510000<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"c-addr"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>公众号名<span style="color: black;">叫作</span>：木番薯科技<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>公众号号码：mengchatchat91<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">script</span> <span style="color: black;">type</span>=<span style="color: black;">"text/javascript"</span> <span style="color: black;">src</span>=<span style="color: black;">"js/index.js"</span>></span><span style="color: black;"></<span style="color: black;">script</span>></span>
<span style="color: black;"></<span style="color: black;">body</span>></span>
<span style="color: black;"></<span style="color: black;">html</span>></span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">亦</span>适用于：大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业、web前端期末大作业、web课程设计网页规划与设计、我的学校网页设计作业成品、HTML+CSS+JS网页设计期末课程大作业等。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">css样式：</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/d88868b5be844b3b9c89205ec0b07674~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722657647&x-signature=U4NhImulycA%2B7di7SS9RwcahaRg%3D" style="width: 50%; margin-bottom: 20px;"></div>
感谢楼主的分享！我学到了很多。
页:
[1]