基于CSS和HTML技术开发中国海洋大学网站的首页
2024-05-29 12:22:32
仿照中国海洋大学网站的首页，做成后的样式，分成两块截得，两侧固定fixed，图片大家可以截海洋大学图片
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>1.2海洋大学官网首页</title><link rel="stylesheet" href="./1.2海洋大学网站首页.css">
</head>
<body><div id="all"><div id="shang"><img src="./img/haiyang1.jpg" alt="" id="shangimg"><div id="menu" class=""><ul><li><a href="#">学校概况</a><div id="submenu" class=""><ul><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><a href="#">现任领导</a></li><li><a href="#">学校简介</a></li><li><a href="#">历史沿革</a></li></ul></div></li><li><a href="#">院系设置</a></li><li><a href="#">重点建设</a><div id="submenu" class=""><ul><li><a href="#">一流大学建设</a></li><li><a href="#">学科专业介绍</a></li></ul></div></li><li><a href="#">人力资源</a><div id="submenu" class=""><ul><li><a href="#">人事综合管理系统</a></li><li><a href="#">人才招聘</a></li><li><a href="#">师资队伍</a></li></ul></div></li><li><a href="#">教育教学</a><div id="submenu" class=""><ul><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><a href="#">审核评估</a></li></ul></div></li><li><a href="#">科学研究</a><div id="submenu" class=""><ul><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><a href="#">海洋科学与技术青岛协同创新中心</a></li><li><a href="#">人文社会科学科研基地</a></li><li><a href="#">自然科学科研基地</a></li><li><a href="#">中央财政科研项目资金管理文件解读</a></li><li><a href="#">科技成果汇编</a></li></ul></div></li><li><a href="#">招生就业</a><div id="submenu" class=""><ul><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></ul></div></li><li><a href="#">合作交流</a><div id="submenu" class=""><ul><li><a href="#">国际教育交流</a></li><li><a href="#">国际合作</a></li></ul></div></li><li><a href="#">图书档案</a><div id="submenu" class=""><ul><li><a href="#">图书馆</a></li><li><a href="#">档案馆</a></li><li><a href="#">期刊社</a></li><li><a href="#">出版社</a></li></ul></div></li><li><a href="#">信息公开</a></li><li><a href="#">科技政策</a></li></ul></div></div><div id="middle"><div id="left"><img src="./img/haiyang2l.jpg" alt="" style="position: fixed;top:181px;"><img src="./img/close.gif" alt="" style="z-index: 10; position: fixed;top:184px;"></div><div id="zhong"><img src="./img/haiyang2.jpg" alt=""><span style="display: inline-block;height: 16px;line-height: 16px;position: absolute;background-color:rgba(56, 39, 39, 0.3);margin-left:18px;margin-top:283px; left: 0;top: 0;z-index: 2; padding: 4px 10px;color: #fff;font-size: 14px;">热烈庆祝中国海洋大学建校95周年</span></div><div id="right"><img src="./img/haiyang2r.jpg" alt=""style="position: fixed;top:181px;"><img src="./img/close.gif" alt="" style="z-index: 10; position:fixed;top:184px;"></div></div><div id="xia"><div id="xialeft"><div class="clear"><table><tr><td><a href="#" class="biaoti">海大新闻</a></td></tr></table></div><table><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="海大举办“书写一流大学建设‘奋进之笔’”行动第二期行远风采论坛" class="wenben">海大举办“书写一流大学建设‘奋进之笔’”行动第二期...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:53px;" title="西海岸校区规划和建设工作领导小组召开工作会议" class="wenben">西海岸校区规划和建设工作领导小组召开工作会议</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:39px;" title="临沂市河东区区委副书记、区长姚运明一行来校调研" class="wenben">临沂市河东区区委副书记、区长姚运明一行来校调研</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="中国海洋大学林霄沛教授获得2019年度国家杰出青年科学基金资助" class="wenben">中国海洋大学林霄沛教授获得2019年度国家杰出青年科学...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:9px;" title="2019年山东省大学生韩国语话剧大赛在中国海洋大学举行" class="wenben">2019年山东省大学生韩国语话剧大赛在中国海洋大学举行</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:54px;" title="深圳市宝安区区长郭子平一行到中国海洋大学调研" class="wenben">深圳市宝安区区长郭子平一行到中国海洋大学调研</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="第十七届中琉历史关系国际学术会议”在中国海洋大学举办" class="wenben">第十七届中琉历史关系国际学术会议”在中国海洋大学举办"</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:21px;" title="中国海大教师获全国高等院校英语教师教学基本功大赛山东省一等奖" class="wenben">中国海大教师获全国高等院校英语教师教学基本功大赛...</a></td></tr><tr> <td><a href="#" class="dibu">更多 ></a> </td></tr></table></div><div id="xiazhong"><div class="clear"><table><tr><td><a href="#" class="biaoti">海大公告</a> <span style="color: #555555;size: 12px;font-weight:900;">学术活动</span></td></tr></table></div><table><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="海大人文讲坛-张凌云:旅游现象的本质探讨——非惯常环境假说的再研究" class="wenben">海大人文讲坛-张凌云:旅游现象的本质探讨——非惯常环...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="海大人文讲坛2019年第110讲-陈国权：经济增长管理与政企统合型政府" class="wenben">海大人文讲坛2019年第110讲-陈国权：经济增长管理与...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:28px;" title="海大人文讲坛-陈国权:经济增长管理与政企统合型政府" class="wenben">海大人文讲坛-陈国权:经济增长管理与政企统合型政府</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="研究生百川讲坛-第二届“新时代青年马克思主义者”交流分享会" class="wenben">研究生百川讲坛-第二届“新时代青年马克思主义者”交流...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:44px;" title="海大人文讲坛-李铁:图江门合作与“冰上丝绸之路”" class="wenben">海大人文讲坛-李铁:图江门合作与“冰上丝绸之路”</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" title="研究生百川讲坛-郭磊：逐底还是逐顶？晋升锦标赛下的政策互动" class="wenben">研究生百川讲坛-郭磊：逐底还是逐顶？晋升锦标赛下的...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:69px;" title="Keyzers:Chemical Investigation of Tongan Invertebrates" class="wenben">Keyzers:Chemical Investigation of Tongan...</a></td></tr><tr><td class="tubiao"><img src="./img/tubiao.jpg" alt="" style="width: 16px;height: 14px;"></td><td><a href="#" style="padding-right:86px;" title="研究生百川讲坛-陆帅洋:灿烂的敦煌石窟艺术" class="wenben">研究生百川讲坛-陆帅洋:灿烂的敦煌石窟艺术</a></td></tr><tr> <td><a href="#" class="dibu">更多 ></a> </td></tr></table></div><div id="xiaright"><table><tr><td class="xiatu"><img src="./img/1.png" alt=""></td></tr><tr><td class="xiatu"><img src="./img/2.png" alt=""></td></tr><tr><td class="xiatu"><img src="./img/3.png" alt=""></td></tr><tr><td class="xiatu"><img src="./img/4.png" alt=""></td></tr><tr><td class="xiatu"><img src="./img/5.png" alt=""></td></tr><tr><td class="xiatu"><img src="./img/6.png" alt=""></td></tr><tr><td class="xiatu"><img src="./img/7.png" alt=""></td></tr></table></div></div><div id="sousuo"><table><tr id="lianjie"><td width="30" align="center"> </td><td><a href="#"><img width="46" height="18" src="./img/x1.png" alt=""></a></td><td><a href="#"><img width="46" height="18" src="./img/x2.png" alt=""></a></td><td><a href="#"><img width="46" height="18" src="./img/x3.png" alt=""></a></td><td><a href="#"><img width="46" height="18" src="./img/x4.png" alt=""></a></td><td><a href="#"><img width="46" height="18" src="./img/x5.png" alt=""></a></td></tr> </table><table><tr><td id="inputt"><input type="text" name="" id=""></td><td><img src="./img/sou.png" alt="" style=" position: absolute;margin-top: 11px;margin-left:906px;width:32px ;height:24px;"></td></tr></table><div id="frienda"><a href="http://welcome.ouc.edu.cn/" target="_blank">迎新网</a> | <a href="http://jwc.ouc.edu.cn/hydxt/" target="_blank">海洋大学堂</a> | <a href="http://hqsz.ouc.edu.cn/" target="_blank">数字后勤服务大厅 </a>| <a href="http://season.ouc.edu.cn/" target="_blank">海之子</a> | <a href="http://zb.ouc.edu.cn/" target="_blank">招标公告</a> | <a href="http://jjh.ouc.edu.cn/" target="_blank">教育基金会</a> | <a href="http://xiaoyouhui.ouc.edu.cn/index.do" target="_blank">校友会</a> | <a href="http://xlzx.ouc.edu.cn/" target="_blank">心理咨询</a> | <a href="http://www.qd39.qdedu.net/" target="_blank">海大附中</a> | <a href="http://aoc.ouc.edu.cn/" target="_blank">中国海洋发展研究中心</a>| <a href="http://xhaxq.ouc.edu.cn/" target="_blank">西海岸校区建设</a>| <a href="https://vpn.ouc.edu.cn/" target="_blank">VPN</a>| <a href="https://advice2035.most.gov.cn/" target="_blank">众筹科技2035</a>| </div></div><div id="zuidibu"><div id="ziti"><span>校址：青岛市崂山区松岭路238号 电话：0532-66782730 邮编：266100 </span><br><span> 版权所有©中国海洋大学 鲁ICP备05002467号-1 <img src="./img/an.png" alt="" width="16px" height="16px"> 鲁公网安备 37021202000030号</span></div><div id="wangzhan"><table><tr><td><img src="./img/a.png" alt="" width="40px" height="40px"></td><td><img src="./img/b.png" alt="" width="40px" height="40px"></td><td><img src="./img/c.png" alt="" width="40px" height="40px"></td><td><img src="./img/d.png" alt="" width="36px" height="36px"></td></tr></table></div><div id="shiye"><img src="./img/shiye.png" alt=""></div></div></div>
</body>
</html>
CSS部分代码
body{margin:0;padding:0;
}#shang{width:100%;height:180px;background-color:rgba(111, 211, 245, 0.199);text-align:center;/* margin: 100px auto; */
}
#shangimg{width: 1000px;
}
#menu{ padding-left: 6px;margin: 10px auto;text-align: center;width:1300px;height: 40px;}#menu ul{margin: 0px;padding: 0px;}#menu ul li {height: 40px;width: 115px;list-style: none;float: left; display: inline; font: 0.9em Arial, Helvetica, sans-serif;}ul li a { color: #FFF;width: 114px;margin: 0px;padding: 0px 0px 0px 8px;text-decoration: none;display: block; background: rgb(223, 166, 8);line-height: 29px;border-bottom: 1px solid #ccc;border-right:1px solid #ccc;border-radius: px;}ul li #submenu ul li { height: 25px;}ul li #submenu ul li a {position: relative;background: rgb(47, 122, 184);line-height: 24px;z-index:1000;}ul li #submenu{visibility: hidden;}ul li:hover #submenu{ visibility: visible;}ul li #submenu ul li a:hover{background: #333;}
#middle{padding-left: 100px;/* position: absolute; */width:1300px;height:340px;/* border: 1px solid #333333; */margin: 0 auto;text-align: center;
}
#left{position: absolute;margin-left:-58px;
}
#zhong{position: absolute;margin-left: 97px;
}
#right{position: absolute;margin-left:1118px;
}
#xia{position: relative;margin: 0 auto;width:1010px;height:320px;
}
#xialeft{position: relative;float: left;width:399px;height:320px;
}
#xiazhong{position: relative;float: left;width:399px;height:320px;margin-left: 6px;
}
#xiaright{position: relative;float: left;width:181px;height:320px;margin-left: 19px;
}
.biaoti{width:100px;height: 20px;;color: #063477;size: 12px;font-weight:900;/* padding-right: 80px; */
}
.clear{clear: both;height:29px;width: 100%;border-bottom: 1px solid lightblue;
}
.tubiao img{/* position: relative; */margin-left:10px;margin-bottom: 4px;
}
.wenben{margin-left: -9px;font-size: 14px;color: black;border-bottom: 1px dotted black;line-height: 27px;/* border: 1px solid #333333; *//* margin-bottom: 4px; *//* padding-right:px ; */
}
a{text-decoration: none;
}
.dibu{position: absolute;margin-left:340px;color: black;
}
.xiatu{line-height: 34px;
}
#sousuo{position: relative;margin: 0 auto;width:1007px;height:105px;background-color: #0dadad52;
}
#lianjie{position: absolute;margin-top: 10px;
}
#inputt{position: absolute;margin-top: 10px;margin-left: 733px;
}
#frienda{position: absolute;margin-top: 50px;margin-left: 20px;font-size: 13px;
}
#frienda a{color:#224881;
}
#zuidibu{position: relative;margin: 0 auto;width:1007px;height:200px;text-align: center;margin-top:10px;
}
#ziti{font-size:14px;color: #939393;
}
#wangzhan{position: absolute;margin-top: 10px;margin-left: 390px;
}
#shiye{position: absolute;margin-top: 64px;margin-left: 435px;
}
基于CSS和HTML技术开发中国海洋大学网站的首页相关推荐
- 基于区块链交易技术开发的证券
基于区块链交易技术开发的证券 区块链交易技术在金融市场还不是主流的技术运用,但是加密货币在金融领域的影响力却不可同日而语.虽然目前的加密货币市场低迷,但是区块链技术却在全球各个国家引起了行业的重视. ...
- 基于ASP.NET AJAX技术开发在线RSS阅读器（下篇）
五.逻辑层设计 (一)添加RSS频道 在展开真正的逻辑层设计之前,先让我们简单地浏览一下下面的草图4.图4展示了我对于两个重要ASP.NET AJAX客户端控件-ListView和DataSource ...
- 基于Appian低代码平台开发一个SpaceX网站
文章目录 Appian 背景摘要 Appian Designer SpaceX网站开发 新建Application 配置应用权限 创建Record Type Appian 背景摘要 国内几乎没有App ...
- 基于VUE使用Hbuilder工具开发的甜品网站
上文已经提到了VUE实现的思维导图,感兴趣的同学可以自己去了解一下VUE,学过JS都会很快上手.本文是开发的甜品网站,适配所有手机的H5网页,你说它是APP.小程序好像都没错. 实现代码界面如下: 实 ...
- 移动端html5用什么软件开发,基于uniapp的移动端和web-h5技术开发的移动端区别与应用...
一.两者的主要区别: 基于uniapp前端框架技术开发的移动端:实现了前后端分离,可支持各种旅游小程序等电商系统搭建,实现旅游产品多端展现,让游客在哪里都可以购买到你的产品和服务,一个管理平台,十端同 ...
- 实验一 基于CSS+HTML+JS开发简单个人网站
目录: 实验要求 实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容 总结 实验要求 实验一 基于CSS+HTML+JS开发简单个人网站 实验学时:4 ...
- java计算机毕业设计springboot+vue中国古诗词网站(源码+系统+mysql数据库+Lw文档）
项目介绍 信息技术的发展带来了大量的数据内容,在这些数据中,想要找到自己需要的只有通过搜索引擎.如今,通过百度去查找信息成为大众的首选,然而在经济利益的驱动下,许多百度来的信息都是商业内容,很难找到真 ...
- java计算机毕业设计springboot+vue中国古诗词网站
项目介绍 信息技术的发展带来了大量的数据内容,在这些数据中,想要找到自己需要的只有通过搜索引擎.如今,通过百度去查找信息成为大众的首选,然而在经济利益的驱动下,许多百度来的信息都是商业内容,很难找到真 ...
- 智能车竞赛技术报告 | 智能车视觉 - 中国海洋大学 - The Waves
简 介: 本文详细介绍了在第十六届全国大学生智能汽车竞赛中智能视觉组的系统方案.本组别的比赛采用大赛组委会统一指定的C型车模,以恩智浦半导体公司生产的32位单片机I.MX RT1064 为核心控制器, ...
最新文章
- 黑帽与白帽始终有着“差别”
- Canvas之进度条的制作（矩形，圆环）
- python利用matplotlib做饼图_python利用matplotlib库绘制饼图的方法示例
- Trace文件过量生成问题解决
- 案例：演示pageContext对象的使用及源码分析获取属性方法
- Linux下Django环境安装
- 将文本写在图片上，自定义字体，自动换行，自定义行间距
- 一个很方便使用十六进制的颜色值的宏
- 关于linux下的iptables 的浅析命令和了解
- lg手机历史机型_lg手机大全【详细介绍】
- usb3.0传输速度测试软件,Win10系统如何测试usb3.0设备传输速度
- oom 如何避免 高并发_高并发下的内存管理技巧
- aps.net mysql_支持aps版
- SQL(oracle)常用命令
- 秀米推文添加附件的方法
- 【Python】字符串转换为ASCII码
- 请问php中 $_data是啥变量呢
- java SSM 框架 多数据源
- IllegalArgumentException: wrong number of arguments
- 数组队列存储结构的简单实现例子