…早上爬起来写到现在,感觉作用这种…
也不知道有没有用,前段时间觉得写的没有用,
但是写完这个感觉,
努力还是有一点用的,虽然不多


某大专魂,有一说一我真的感觉这个官网不好看…
咳咳,就这样我抄的都挺麻烦了

就只抄成这个样子,轮播图是没有轮播图的,
只能糊弄一下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WYWM</title><link rel="stylesheet" href="School.css">
</head><body><div id="main"><div id="top"><div class="top_left"><span>2020年12月11日 星期五</span></div><div class="top_right"><ul><span>关注我们:</span><!-- <input type="submit"  style="background: url(../../Rikico_imges/12-11.gif);"> --><li><img src="../../Rikico_imges/12-11.gif"></li><li><img src="../../Rikico_imges/school001.png"></li><li><input class="text" type="text" placeholder="请输入搜索内容"></li><input class="button" type="button" value="搜索"><li><a href="">English</a></li></ul></div></div><div id="header"></div><div id="nav"><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></ul></div><div id="table_one"><img src="../../Rikico_imges/12-12-1.jpg"><div class="gap"></div><div class="text"><div class="text_header"><div class="header_nav"><img src="../../Rikico_imges/t3.jpg" alt=""><p>学校要闻</p></div><div class="header_content"><ul><li><a href="">·天寒暖人心 帮扶情更深 ——学校开展...</a><span> 2020-12-11</span></li><li><a href="">·晏斌宣讲党的十九届五中全会精神</a><span> 2020-12-10</span></li><li><a href="">·院领导深入电子商务学院新生班级视察</a><span> 2020-12-10</span></li><li><a href="">·学校举行“脱贫攻坚 兴赣有我”爱国...</a><span> 2020-12-10</span></li><li><a href="">·学校举办2020年全国“1+X”跨境电...</a><span> 2020-12-9</span></li><li><a href="">·学校举行观摩课教学活动</a><span> 2020-12-9</span></li><li><a href="">·学校在第三届全国装配式建筑技能大赛中获...</a><span> 2020-12-9</span></li><li><a href="">·学校承办2020年江西省职业院校技能大...</a><span> 2020-12-8</span></li><li><a href="">·学校在江西省职业院校技能大赛“工程测量...</a><span> 2020-12-7</span></li><li><a href="">·学校举办辅导员班主任心理危机干预培训班</a><span> 2020-12-7</span></li></ul></div></div></div></tr></div><div id="table_two"><img class="two_imga" src="../../Rikico_imges/12-12-4.png" alt=""><img class="two_imgb" src="../../Rikico_imges/12-12-5.png" alt=""></div><div id="table_three"><div class="box box1"><div class="box1_nav"><div class="tit">部门动态</div><div><a href="" class="nav_link">更多>>></a></div></div><div class="box1_centent"><ul><li><a href="">·学校举办档案管理系统软件应用培训会</a></li><li><a href="">·学校深入阳门社区开展平安志愿者活动</a></li><li><a href="">·我校举办2020年第三期学工学术沙龙</a></li><li><a href="">·学校举行学生资助业务知识竞赛活动</a></li><li><a href="">·学校举办第四期“尚德·修身”讲坛</a></li></ul></div></div><div class="box box1 box2"><div class="box1_nav"><div class="tit">系部动态</div><div><a href="" class="nav_link">更多>>></a></div></div><div class="box1_centent"><ul><li><a href="">·艺术与设计学院党总支开展丰富多彩的学生活动</a></li><li><a href="">·倾听心声 关爱成长 ——国际商务...</a></li><li><a href="">·工商管理学院(旅游学院)开展“暖冬...</a></li><li><a href="">·电子商务学院召开“电子商务专业群深...</a></li><li><a href="">·会计金融学院组织2020年全国1+...</a></li></ul></div></div><div class="box box1 box3"><div class="box1_nav"><div class="tit">公共告示</div><div><a href="" class="nav_link">更多>>></a></div></div><div class="box1_centent"><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></div><div class="box box1 box4"><div class="box1_nav"><div class="tit">媒体聚焦</div><div><a href="" class="nav_link">更多>>></a></div></div><div class="box1_centent"><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></div><div class="box5"><img src="../../Rikico_imges/h1.jpg" alt=""><span>摇篮</span><img src="../../Rikico_imges/h2.jpg" alt=""><span>青春</s></div><div class="box6"><div class="nav"><img class="img1" src="../../Rikico_imges/t3.jpg" alt=""><div class="nav_top"><span>专题活动</span></div></div><!-- 抄歪了,这里还有一个nav的 --><img class="img2" src="../../Rikico_imges/12-12-8.png" alt=""><a href=""><img src="../../Rikico_imges/z1.gif" alt="" class="img3"></a><a href=""><img src="../../Rikico_imges/z2.gif" alt="" class="img3"></a><a href=""><img src="../../Rikico_imges/z3.gif" alt="" class="img3"></a><a href=""><img src="../../Rikico_imges/z4.gif" alt="" class="img3"></a><a href=""><img src="../../Rikico_imges/z5.gif" alt="" class="img3"></a><a href=""><img src="../../Rikico_imges/z6.gif" alt="" class="img3"></a><a href=""><img src="../../Rikico_imges/z7.jpg" alt="" class="img3"></a></div></div><div id="footer"><div class="img"><a class="img1" href=""><img src="../../Rikico_imges/12-12a1.gif"></a><a class="img2" href=""><img src="../../Rikico_imges/12-12a2.gif"></a><a class="img3" href=""><img src="../../Rikico_imges/12-12a3.gif"></a><a class="img4" href=""><img src="../../Rikico_imges/12-12a4.gif"></a><a class="img5" href=""><img src="../../Rikico_imges/12-12a5.gif"></a><select name="" id=""><option value="" selected>学院各部导航</option><option value="">应用西语学校</option><option value="">招生就业处</option><option value="">“一带一路”语言文化研究所</option><option value="">思想政治理论课教学部</option><option value="">宣传统战处</option><option value="">国际贸易研究所</option><option value="">国际工程学院</option><option value="">电子商务学院</option></select></div><div class="read"><ul><li>免责声明</li><li>|</li><li>关于本站</li><li>|</li><li>使用帮助</li><li>|</li><li>网站声明</li><li>|</li><li>联系我们</li><li>|</li></ul></div><div class="end"><ul><li class="end_left">学院地址:江西省南昌市天祥大道291号<br>招生热线:0791-88352677 传真:0791-88353587 邮编:330099</li><li class="centent"><img src="../../Rikico_imges/20-43.gif" alt=""></li><li class="end_right">Copyright© 2015 jxcfs.com ALL Rights Reserved<br>技术支持:Rikoco_Chineseco网站备案编号:赣ICP备16005704号</li></ul></div></div></div>
</body></html>

再看这些代码真的自己都头疼,还好简单
…有点担心以后自己的头发了

*{margin: 0;padding: 0;/* background-color:rgb(255, 246, 217); */font-size: 14px;font-family: "宋体";
}
#main{margin: auto;width: 980px;height: 1300px;background-color:rgb(255, 251, 239);
}
#main #top{display: flex;width: 100%;height: 32px;background-color:rgb(253, 219, 122) 253, 219, 122;float: left;position: relative;
}
#main #top .top_left{width: 200px;height: 32px;line-height: 32px;
}
#main #top .top_left span{position: absolute;width: 200px;
}
#main #top .top_right{height: 32px;float: right;
}
#main #top .top_right ul{margin-right: 20px;display: flex;margin-left: 470px;height: 32px;float: right;top: 0;line-height: 32px;
}
#main #top .top_right ul li .text{width: 147px;height: 32px;background-color: white;border: none;
}
#main #top .top_right ul .button{width: 70px;height: 30px;border: none;background-color: rgb(255, 110, 6);
}
#main #top .top_right ul span{width: 74px;
}
#main #top .top_right ul li{margin-left: 10px;text-align: center;float: right;list-style: none;
}
#main #top .top_right ul li img{line-height: 32px;
}
#main #top .top_right ul li a{list-style:none;/* color: red; */text-decoration: none;
}
#main #header{width: 100%;height: 202px;background-color: slategray;float: left;background: url(../../Rikico_imges/school12-12-1.png) no-repeat;background-size: cover;
}
#main #nav{height: 50px;background-color: tan;float: left;background-color: #fcd337;border:red 1px solid;/* display: flex; */
}
/* 辣个人写的时候藏了位置了...应该留一些给hover的 */
#main #nav ul{width: 980px;display: flex;text-align: center;z-index: 10;position: absolute;list-style: none;background-color: #fcd337;
}
#main #nav ul li{background-color: #fcd337;margin-right: 36px;/* 这也太辣眼睛了吧..... */margin-left: 10.8px;float: left;width: 60px;height: 40px;line-height: 40px;/* border: 1px red solid; */
}
/* #main #nav ul li:hover{background-color:rgb(255, 114, 0);font-weight:bold;color: white;height: 42px;
} */
#main #nav ul li a:hover{display: block;color: #B90000;height: 39px;line-height: 39px;font-size: 14px;font-weight: bold;background-color: rgb(255, 114, 0);
}
#main #nav ul li a{background-color: none;font-weight: bold;color: #b90000;text-decoration: none;
}
#main #table_one{display: flex;width: 100%;height: 350px;background-color: cadetblue;float: left;position: relative;
}
#main #table_one img{width: 540px;height: 100%;
}
#main #table_one .gap{background-color:white ;width: 10px;height: 100%;
}
#main #table_one .text{/* border: red 1px solid; */background-color: grey;width: 530px;height: 430px;
}
#main #table_one .text .text_header{width: 100%;height: 32px;float: left;background-color:rgb(255, 230, 206);
}
#main #table_one .text .text_header .header_nav{background-color: white;width: 100px;height: 100%;float: left;
}
#main #table_one .text .text_header .header_nav img{float: left;width: 35px;height: 100%;
}
#main #table_one .text .text_header .header_nav p{background-color: white;text-align: center;width: 110px;height: 32px;line-height: 32px;color: #E11201;
}
#main #table_one .text .text_header .header_content ul{margin-left: 0;background-color: white;/* border: red 2px solid; */width: 430px;position: absolute;top: 32px;
}
/* 靠,我怀疑学校官网上面li的点也是假的 */
#main #table_one .text .text_header .header_content ul li{margin-top: 10px;list-style: none;background-color: white;margin-bottom: 17px;
}
#main #table_one .text .text_header .header_content ul li a{font-size: 13px;text-decoration: none;color: black;background-color: white;
}
#main #table_one .text .text_header .header_content ul li a:hover{color: red;
}
#main #table_one .text .text_header .header_content ul li span{float: right;margin-right: 10px;color: black;background-color: white;
}
#main #table_two{width: 100%;height: 96px;margin-top: 10px;background-color: white;float: left;position: relative;
}
#main #table_two .two_imga{width: 700px;height: 100%;margin-right: 20px;
}
#main #table_two .two_imgb{height: 96px;float: right;
}
#main #table_three{width: 100%;height: 576px;background-color: forestgreen;float: left;position: relative;background-color: white;
}
#main #table_three .box{background-color: white;float: left;margin-top: 10px;margin-right: 10px;position: relative;width: 350px;height: 180px;border: red 1px solid;
}
#main #table_three .box1_nav{display: flex;width: 100%;height: 40px;float: left;/* background-color: rgb(255, 245, 235); */
}
#main #table_three .box .box1_nav .tit{background: url(../../Rikico_imges/12-12-06.gif);text-align: center;line-height: 30px;margin-left:10px;margin-bottom: 15px;margin-top: 5px;width: 86px;height: 30px;border: none;/* background-color: rgb(248, 80, 1); */
}
#main #table_three .box .box1_nav .nav_link{text-align: center;position: absolute;right: 0;height: 40px;line-height: 40px;width: 60px;float: right;
}
#main #table_three .box1 .box1_centent ul{list-style: none;
}
#main #table_three .box1 .box1_centent ul li{margin-bottom: 16px;
}
#main #table_three .box1 .box1_centent ul li a{text-decoration: none;color: black;
}
#main #table_three .box1 .box1_centent ul li a:hover{color: red;
}
#main #table_three .box5{display: flex;width: 710px;height: 200px;float: left;margin-top: 10px;margin-right: 10px;border: red 1px solid;background-color: rgb(238, 238, 238);
}
#main #table_three .box5 img{margin-left: 30px;margin-right: 10px;width: 40%;height: 80%;
}
#main #table_three .box5 span{position: relative;font-family: "宋体";
}
#main #table_three .box6{position: absolute;margin-top: 10px;right: 0;width: 257px;height: 590px;background-color:white;
}
#main #table_three .box6 .nav{width: 100%;height: 40px;background-color: rgb(255, 236, 220);
}
#main #table_three .box6 .img2{width: 100%;height: 140px;
}
#main #table_three .box6 .img1{float: left;width: 36px;height: 36px;
}
#main #table_three .box6 a .img3{border: 1px solid black;position: relative;width: 100%;margin-top: 4px;margin-bottom: 4px;
}
#main #table_three .box6 .nav_top{float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: white;
}
#main #table_three .box6 .nav_top span{color:rgb( 225, 18, 1);font-size: 14px;font-weight: bold;
}
#main #footer{width: 100%;height: 130px;background-color:white;float: left;position: relative;background-color: rgb(240, 240, 240);
}
#main #footer img{margin-top: 10px;height: 28px;
}
#main #footer .img1{width: 110px;
}
#main #footer .img2{width: 120px;
}
#main #footer .img3{width: 136px;
}
#main #footer .img4{width: 182px;
}
#main #footer .img5{width: 183px;
}
#main #footer select{float: right;margin-top: 10px;border: 2px solid;height: 28px;
}
#main #footer .read{display: flex;justify-content: space-between;width: 100%;line-height: 28px;height: 28px;background-color: red;
}
#main #footer .read ul{margin: auto;
}
#main #footer .read ul li{list-style: none;color: white;float: left;
}
#main #footer .end ul{margin: auto;margin: 10px;width: 980px;height: 81px;
}
#main #footer .end ul li{float: left;top: 5px;bottom: 5px;list-style: none;
}
#main #footer .end .end_left{float: left;
}
#main #footer .end .end_centent{float: left;vertical-align: sub;/* background-image: url(../../Rikico_imges/20-43.gif); */width: 89px;height: 41px;
}
#main #footer .end .end_right{float: right;
}

今天大概就这样,虽然还有java
但是写了一天了脑子真的挺疼的
一天就在吃了一顿鸡米饭和一个肉夹馍(完全没有肉)

收获的话,有错误和感觉一定要注释上去
一定!!!!
感觉错过了好多
就酱

江西外语外贸官网 仿写相关推荐

  1. 项目三《小米官网仿写》

    文章目录 前言 一.下载APP 二.下拉菜单 三. 小米侧边栏 四.登录注册界面 五.lation实现界面切换 总结 前言 本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...

  2. csdn官网第一次写博客 一直显示不要使用默认标题

    csdn官网第一次写博客 一直显示不要使用默认标题 解决方案: 注:由此开启新的旅程

  3. 没想到吧!关于Dubbo的『消费端线程池模型』官网也写错了。

    这是why的第 63 篇原创文章 荒腔走板 大家好,我是 why,欢迎来到我连续周更优质原创文章的第 63 篇.老规矩,先荒腔走板聊聊其他的. 上面这张图片是我前几天整理相册的时候看到的.拍摄于 20 ...

  4. 无法访问python官网_python写的网站,云服务器经常无法访问

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 #coding=utf-8 from flask import Flask from flask import send_from_directory f ...

  5. 【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了

    微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌 握HTML网页设计前端盒子的布局.嵌套,及css效果的 使用... 微信官网首页主要有以下几个需要关注的 ...

  6. PHP防花生日记官网源码【前后端分离】源码

    仿花生日记官网源码仿好省官网仿蜜源官网源码+前后端分离+带独立后台可修改前端内容

  7. 黑苹果详细安装教程-基于OpenCore官网指导-UPUPMO(macOS Monterey)

    文章大纲 01. 必备知识 02. 作者当前硬件说明 03. 主板 BIOS 版本升级 04. 确定声卡.网卡信息 05. 配置 EFI 驱动 06. 配置 ACPI(SSDTs) 07. 配置 co ...

  8. 帝国CMS仿写朵朵云棋牌游戏官网源码

    帝国CMS仿写朵朵云棋牌游戏官网源码 下载地址: http://www.bytepan.com/aLBtMe2g40P

  9. 仿写小米官网 简单的HTML+CSS练习

    说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...

最新文章

  1. 精通python能干嘛-一个程序员怎样才算精通Python?
  2. 蜗壳の樱花2020-04-03
  3. Oracle 高水位问题
  4. 前端学习(2330):angular之二级路由
  5. linux + nginx + mysql + php 百度网盘_5.LNMP(Linux + Nginx + MySQL + PHP)环境安装
  6. mysql 32k 限制,MySQL之最大和最小
  7. linux 软件 runtime,Objective-C中runtime机制的应用
  8. 将数据库表中的数据读出以xml的形式下载到手机端
  9. 重零开始学前端-基础(1) 什么是变量
  10. NI6509输出遇到的问题
  11. GD32系列外部中断
  12. Mysql闪退解决方法
  13. 如何进行支付流程及安全测试?
  14. 【区块链108将】区块链追溯产品起源,让每一个产品都是放心产品
  15. 利用百度地图api将excel中的经纬度数据可视化
  16. 为什么阿里那么难进,原来精髓在这
  17. 【洛谷】P5149 会议座位
  18. 全倒装超微间距COB(COB微间距)显示主导新型显示技术。
  19. 自上而下语法分析器python
  20. adb remount失败的解决办法:

热门文章

  1. 长微博工具-长微博生成器-新浪长微博-腾讯长微博-长微博转换器
  2. 借贷宝java_程序猿去哪儿?——北京JAVA专场
  3. 力扣每日一题每天自动邮件提醒
  4. 转:网络安全法重点解读
  5. 辛巴学院-Unity-剑英陪你零基础学c#系列(一)Hello World
  6. 电磁波是如何产生的以及分类
  7. Linux中标麒麟开机程序自启动
  8. 国睿驰120gb固态硬盘测试软件,小巧极速 国睿驰精睿系列移动SSD评测
  9. 计算机专业毕设程序题目,你想做php/java/net的程序的题目都在这里面。
  10. python炒股学习软件_要炒股,学Python-LSTM学习