0
0

HTML+CSS仿大学官网

仿官网效果图

代码展示

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>仿华珠官网</title>
  6.         <style type="text/css">
  7.             * {
  8.                 padding: 0px;
  9.                 margin: 0px;
  10.             }
  12.             body {
  13.                 /* background-color: chartreuse; */
  14.             }
  16.             .head_1 {
  17.                 width: 100%;
  18.                 height: 100px;
  19.                 padding: 8px 0px 4px;
  20.                 background-color: #3d3bb8;
  21.                 position: fixed;
  22.                 /* border: 1px solid red; */
  23.             }
  25.             .content_1 {
  26.                 width: 78%;
  27.                 height: 100px;
  28.                 margin: auto;
  29.                 /* border: 1px solid red; */
  30.             }
  32.             .logo {
  33.                 float: left;
  34.                 padding-top: 8px;
  35.                 width: 30%;
  36.                 /* border: 1px solid red; */
  37.             }
  39.             .logo>img {
  40.                 width: 100%;
  41.             }
  43.             .menu {
  44.                 float: left;
  45.                 width: 70%;
  46.                 height: 100px;
  47.                 /* border: 1px solid red; */
  48.             }
  50.             .menu_top,
  51.             .menu_foot {
  52.                 float: left;
  53.                 width: 100%;
  54.                 height: 50%;
  55.             }
  57.             .search {
  58.                 float: right;
  59.                 width: 32%;
  60.                 height: 70%;
  61.                 border-radius: 18px;
  62.                 background-color: #ffffff;
  63.             }
  65.             #search_border {
  66.                 float: left;
  67.                 font-size: 5px;
  68.                 width: 72%;
  69.                 height: 100%;
  70.                 margin: 4% 0% 4% 9%;
  71.                 border: none;
  72.             }
  74.             #search_button {
  75.                 float: left;
  76.                 width: 15px;
  77.                 height: 15px;
  78.                 margin: 4% 0% 4% 3%;
  79.                 border: none;
  80.             }
  82.             .nav {
  83.                 list-style: none;
  84.                 margin: 1.5% auto 0%;
  85.             }
  87.             .nav>li {
  88.                 float: left;
  89.                 margin-left: 3.4%;
  90.                 padding: 0% 0% 2%;
  91.                 position: relative;
  92.             }
  93.             
  94.             [class^="nav_"]>a {
  95.                 color: #ffffff;
  96.                 font-size: 14px;
  97.                 text-decoration: none;
  98.             }
  99.             
  100.             [class^="nav_"]>a:hover {
  101.                 opacity: 0.5;
  102.             }
  104.             [class^="child"] {
  105.                 list-style: none;
  106.                 top: 40px;
  107.                 left: -40px;
  108.                 position: absolute;
  109.                 display: none;
  110.             }
  111.             
  112.             [class^="child_2_"] {
  113.                 left: 140.5px;
  114.                 top: 0px;
  115.             }
  116.             
  117.             .child_2_2 {
  118.                 top: 50px;
  119.             }
  121.             [class^="child"]>li {
  122.                 width: 120px;
  123.                 height: 30px;
  124.                 padding: 10px 10px;
  125.                 line-height: 30px;
  126.                 text-align: center;
  127.                 background-color: #ffffff;
  128.             }
  129.             
  130.             [class^="child_2_"]>li {
  131.                 width: 160px;
  132.             }
  133.             
  134.             [class^="child"] a {
  135.                 color: #000;
  136.                 font-size: 14px;
  137.                 text-decoration: none;
  138.             }
  139.             
  140.             [class^="child"] a:hover {
  141.                 color: #3d3bb8;
  142.             }
  144.             li:hover>[class^="child"],
  145.             li:hover>[class^="block"] {
  146.                 display: block;
  147.             }
  149.             .child_4 {
  150.                 left: -55px;
  151.             }
  153.             .child_4>li {
  154.                 width: 150px;
  155.             }
  157.             [class^="block"] {
  158.                 border-bottom: 10px solid white;
  159.                 border-left: 8px solid transparent;
  160.                 border-right: 8px solid transparent;
  161.                 top: 30px;
  162.                 left: 20px;
  163.                 position: absolute;
  164.                 display: none;
  165.             }
  166.             
  167.             .banner_picture {
  168.                 width: 100%;
  169.             }
  170.             
  171.             .news_text {
  172.                 float: left;
  173.                 width: 100%;
  174.                 height: 90px;
  175.                 margin-top: 25px;
  176.                 text-align: center;
  177.                 position: relative;
  178.             }
  179.             
  180.             .news_text>span {
  181.                 font-size: 40px;
  182.                 color: #E9E9F9;
  183.                 left: 165px;
  184.                 top: 10px;
  185.                 font-weight: bold;
  186.                 position: absolute;
  187.                 z-index: -1;
  188.             }
  189.             
  190.             .news_title {
  191.                 font-size: 23px;
  192.                 color: #000000;
  193.                 left: 182px;
  194.                 top: 32px;
  195.                 position: absolute;
  196.             }
  198.             .under_line_1 {
  199.                 background-color: #3d3bb8;
  200.                 border-radius: 3px;
  201.                 width: 60px;
  202.                 height: 6px;
  203.                 left: 195px;
  204.                 top: 72px;
  205.                 position: absolute;
  206.             }
  207.             
  208.             .under_line_2 {
  209.                 background-color: #3d3bb8;
  210.                 border-radius: 3px;
  211.                 margin: 1% auto 0%;
  212.                 width: 60px;
  213.                 height: 6px;
  214.             }
  215.             
  216.             .section_2 {
  217.                 /* background-color: aqua; */
  218.                 float: left;
  219.                 padding: 4% 12% 2%;
  220.                 background-image: url("./img/home_index1_bg.png");
  221.                 background-size: 62%;
  222.                 background-repeat: no-repeat;
  223.                 background-position: right;
  224.             }
  225.             
  226.             .section_2_left {
  227.                 float: left;
  228.                 width: 40%;
  229.                 height: 100%;
  230.                 /* background-color: coral; */
  231.             }
  232.             
  233.             .section_2_left>img {
  234.                 width: 100%;
  235.                 margin-top: 75px;
  236.             }
  237.             
  238.             .section_2_right {
  239.                 float: left;
  240.                 width: 60%;
  241.                 height: 100%;
  242.                 /* background-color: yellow; */
  243.             }
  244.             
  245.             [class^="subject"] {
  246.                 float: right;
  247.                 height: 35px;
  248.                 font-size: 20px;
  249.                 color: #999999;
  250.                 margin-left: 40px;
  251.                 padding-bottom: 40px;
  252.             }
  253.             
  254.             [class^="subject"]:hover {
  255.                 color: #000000;
  256.             }
  257.             
  258.             .subject_3 {
  259.                 color: #000000;
  260.             }
  261.             
  262.             .subject_2:hover~.subject_3 {
  263.                 color: #999999;
  264.             }
  265.             
  266.             .subject_1:hover~.subject_3 {
  267.                 color: #999999;
  268.             }
  269.             
  270.             [class^="box"] {
  271.                 float: left;
  272.                 width: 96%;
  273.                 margin-left: 30px;
  274.                 display: none;
  275.             }
  276.             
  277.             [class^="box"][name="1_box"] {
  278.                 display: block;
  279.             }
  280.             
  281.             .section_2_right>.subject_2:hover~[class^="box"][name="1_box"] {
  282.                 display: none;
  283.             }
  284.             
  285.             .section_2_right>.subject_2:hover~[class^="box"][name="2_box"] {
  286.                 display: block;
  287.             }
  288.             
  289.             .section_2_right>.subject_1:hover~[class^="box"][name="1_box"] {
  290.                 display: none;
  291.             }
  292.             
  293.             .section_2_right>.subject_1:hover~[class^="box"][name="3_box"] {
  294.                 display: block;
  295.             }
  296.             
  297.             [class^="new_line"] {
  298.                 float: left;
  299.                 width: 100%;
  300.                 margin-bottom: 18px;
  301.             }
  302.             
  303.             a:hover .line_top {
  304.                 color: #3d3bb8;
  305.             }
  306.             
  307.             .line_left {
  308.                 float: left;
  309.                 width: 51px;
  310.                 height: 73px;
  311.                 color: #ffffff;
  312.                 margin-bottom: 4px;
  313.                 background-color: #3d3bb8;
  314.             }
  315.             
  316.             .line_right {
  317.                 float: left;
  318.                 height: 75px;
  319.                 margin-left: 20px;
  320.             }
  321.             
  322.             .day {
  323.                 margin: 6px 6px;
  324.                 text-align: center;
  325.                 font-size: 28px;
  326.             }
  327.             
  328.             .year_month {
  329.                 margin: 0px 3px;
  330.                 text-align: center;
  331.                 font-size: 5px;
  332.             }
  333.             
  334.             .line_top {
  335.                 float: left;
  336.                 width: 90%;
  337.                 height: 20px;
  338.                 margin-left: 15px;
  339.                 font-size: 15px;
  340.                 font-weight: bold;
  341.                 color: #000;
  342.                 text-overflow: ellipsis;
  343.                 overflow: hidden;
  344.             }
  345.             
  346.             .line_bottom {
  347.                 float: left;
  348.                 width: 90%;
  349.                 height: 40;
  350.                 font-size: 14px;
  351.                 color: #666666;
  352.                 margin-top: 17px;
  353.                 margin-left: 15px;
  354.                 text-overflow: ellipsis;
  355.                 overflow: hidden;
  356.             }
  357.             
  358.             .more {
  359.                 margin-top: 20px;
  360.                 float: right;
  361.             }
  362.             
  363.             .more>a {
  364.                 color: #999999;
  365.                 font-size: 12px;
  366.                 text-decoration: none;
  367.             }
  368.             
  369.             .more>a:hover {
  370.                 color: #3d3bb8;
  371.             }
  372.             
  373.             .section_3 {
  374.                 float: left;
  375.                 width: 100%;
  376.                 height: 770px;
  377.                 text-align: center;
  378.                 background-image: url("./img/home_index2_bg.png");
  379.                 background-size: cover;
  380.                 background-repeat: no-repeat;
  381.             }
  382.             
  383.             .video_title {
  384.                 margin-top: 35px;
  385.                 color: #e9e9f9;
  386.                 font-size: 25px;
  387.             }
  388.             
  389.             .video_text {
  390.                 font-size: 23px;
  391.                 color: #000000;
  392.             }
  393.             
  394.             .video_play {
  395.                 width: 100%;
  396.                 margin: 30px auto 0px;
  397.                 padding-bottom: 20px;
  398.             }
  399.             
  400.             .video_play>video {
  401.                 width: 70%;
  402.                 cursor: pointer;
  403.                 object-fit: fill;
  404.             }
  405.             
  406.         </style>
  407.     </head>
  408.     <body>
  409.         <div class="head_1">
  410.             <div class="content_1">
  411.                 <div class="logo">
  412.                     <img src="./img/主页logo.png" alt="logo">
  413.                 </div>
  414.                 <div class="menu">
  415.                     <div class="menu_top">
  416.                         <div class="search">
  417.                             <form action="">
  418.                                 <input type="text" name="" id="search_border" placeholder="请输入搜索内容">
  419.                                 <button id="search_button">
  420.                                     <svg t="1679578244033" class="icon" viewBox="0 0 1024 1024" version="1.1"
  421.                                         xmlns="http://www.w3.org/2000/svg" p-id="1044">
  422.                                         <path
  423.                                             d="M418.91 93.09c179.66 0 325.82 146.16 325.82 325.82 0 74.59-24.74 144.9-71.53 203.33l-22.66 28.29-28.3 22.66c-58.43 46.8-128.74 71.53-203.33 71.53-179.66 0-325.82-146.16-325.82-325.82 0-179.65 146.16-325.81 325.82-325.81m0-93.09C187.55 0 0 187.55 0 418.91s187.55 418.91 418.91 418.91c99.01 0 189.83-34.54 261.53-91.97 0.34 0.37 0.45 0.86 0.81 1.21l263.3 263.3c9.09 9.09 21 13.63 32.91 13.63s23.82-4.54 32.91-13.63c18.18-18.18 18.18-47.65 0-65.82l-263.3-263.3c-0.36-0.36-0.85-0.46-1.21-0.81 57.43-71.7 91.97-162.52 91.97-261.53C837.82 187.55 650.27 0 418.91 0z"
  424.                                             fill="#2c2c2c" p-id="1045"></path>
  425.                                     </svg>
  426.                                 </button>
  427.                             </form>
  428.                         </div>
  429.                     </div>
  430.                     <div class="menu_foot">
  431.                         <ul class="nav">
  432.                             <li class="nav_1"><a href="#">首页</a></li>
  433.                             <li class="nav_2">
  434.                                 <a href="#">学校概况</a>
  435.                                 <div class="block_1"></div>
  436.                                 <ul class="child_1">
  437.                                     <li><a href="#">学校简介</a></li>
  438.                                     <li><a href="#">现任领导</a></li>
  439.                                     <li><a href="#">校长寄语</a></li>
  440.                                     <li><a href="#">师资队伍</a></li>
  441.                                     <li><a href="#">校园风光</a></li>
  442.                                     <li><a href="#">华珠大事件</a></li>
  443.                                     <li><a href="#">华珠荣誉</a></li>
  444.                                     <li><a href="#">专业介绍</a></li>
  445.                                 </ul>
  446.                             </li>
  447.                             <li class="nav_3"><a href="#">信息公开专栏</a></li>
  448.                             <li class="nav_4">
  449.                                 <a href="#">机构设置</a>
  450.                                 <div class="block_2"></div>
  451.                                 <ul class="child_2">
  452.                                     <li>
  453.                                         <a href="#">行政部门</a>
  454.                                         <ul class="child_2_1">
  455.                                             <li><a href="#">党政办公室</a></li>
  456.                                             <li><a href="#">学生工作部（处）</a></li>
  457.                                             <li><a href="#">人事处</a></li>
  458.                                             <li><a href="#">党委组织部</a></li>
  459.                                             <li><a href="#">校团委</a></li>
  460.                                             <li><a href="#">校工会（统战部）</a></li>
  461.                                             <li><a href="#">后勤保卫处</a></li>
  462.                                             <li><a href="#">教务处</a></li>
  463.                                             <li><a href="#">图书服务</a></li>
  464.                                             <li><a href="#">教室教学发展中心</a></li>
  465.                                             <li><a href="#">体育与艺术中心</a></li>
  466.                                         </ul>
  467.                                     </li>
  468.                                     <li>
  469.                                         <a href="#">二级学院</a>
  470.                                         <ul class="child_2_2">
  471.                                             <li><a href="#">商学院</a></li>
  472.                                             <li><a href="#">信息工程学院</a></li>
  473.                                             <li><a href="#">设计学院</a></li>
  474.                                             <li><a href="#">传媒学院</a></li>
  475.                                             <li><a href="#">人文学院</a></li>
  476.                                             <li><a href="#">基础课教学部</a></li>
  477.                                             <li><a href="#">马克思主义学院</a></li>
  478.                                             <li><a href="#">继续教育学院</a></li>
  479.                                             <li><a href="#">国际教育学院</a></li>
  480.                                             <li><a href="#">乡村振兴学院</a></li>
  481.                                         </ul>
  482.                                     </li>
  483.                                 </ul>
  484.                             </li>
  485.                             <li class="nav_5"><a href="#">党建网</a></li>
  486.                             <li class="nav_6"><a href="#">教务管理</a></li>
  487.                             <li class="nav_7">
  488.                                 <a href="#">招生就业</a>
  489.                                 <div class="block_3"></div>
  490.                                 <ul class="child_3">
  491.                                     <li><a href="#">招生网</a></li>
  492.                                     <li><a href="#">小北就业</a></li>
  493.                                 </ul>
  494.                             </li>
  495.                             <li class="nav_8"><a href="#">OA管理</a></li>
  496.                             <li class="nav_9">
  497.                                 <a href="#">数字资源</a>
  498.                                 <div class="block_4"></div>
  499.                                 <ul class="child_4">
  500.                                     <li><a href="#">数字图书资源</a></li>
  501.                                     <li><a href="#">图书系统</a></li>
  502.                                     <li><a href="#">资产系统</a></li>
  503.                                     <li><a href="#">在线教学平台</a></li>
  504.                                     <li><a href="#">京广图书</a></li>
  505.                                     <li><a href="#">五车图书</a></li>
  506.                                     <li><a href="#">学工管理</a></li>
  507.                                     <li><a href="#">数字化实习实训平台</a></li>
  508.                                     <li><a href="#">实训平台</a></li>
  509.                                     <li><a href="#">校友系统</a></li>
  510.                                     <li><a href="#">心理测评</a></li>
  511.                                 </ul>
  512.                             </li>
  513.                             <li class="nav_10"><a href="#">加入我们</a></li>
  514.                         </ul>
  515.                     </div>
  516.                 </div>
  517.             </div>
  518.         </div>
  519.         <div class="section_1">
  520.             <img class="banner_picture" src="./img/主页图片.jpg" alt="二十大图片">
  521.         </div>
  522.         <div class="section_2">
  523.             <div class="section_2_left">
  524.                 <img src="./img/大门大门-scaled.jpg" alt="学校大门">
  525.                 <div class="news_text">
  526.                     <span>NEWS</span>
  527.                     <div class="news_title">新闻头条</div>
  528.                     <div class="under_line_1"></div>
  529.                 </div>
  530.             </div>
  531.             <div class="section_2_right">
  532.                 <div class="subject_1">学院通告</div>
  533.                 <div class="subject_2">部门动态</div>
  534.                 <div class="subject_3">新闻头条</div>
  535.                 <div class="box_1" name="1_box">
  536.                     <div class="new_line_1">
  537.                         <a href="#">
  538.                             <div class="line_left">
  539.                                 <div class="day">24</div>
  540.                                 <div class="year_month">2023.03</div>
  541.                             </div>
  542.                             <div class="line_rignt">
  543.                                 <div class="line_top">学思践悟&nbsp;知行合一|华珠信息工程学院开展知行讲堂活动，共同探讨项目研究的实践与方法</div>
  544.                                 <div class="line_bottom"></div>
  545.                             </div>
  546.                         </a>
  547.                     </div>
  548.                     <div class="new_line_2">
  549.                         <a href="#">
  550.                             <div class="line_left">
  551.                                 <div class="day">23</div>
  552.                                 <div class="year_month">2023.03</div>
  553.                             </div>
  554.                             <div class="line_rignt">
  555.                                 <div class="line_top">敬告专升本考生|2023年华南农业大学珠江学院专升本考试考场安排</div>
  556.                                 <div class="line_bottom"></div>
  557.                             </div>
  558.                         </a>                        
  559.                     </div>
  560.                     <div class="new_line_3">
  561.                         <a href="#">
  562.                             <div class="line_left">
  563.                                 <div class="day">23</div>
  564.                                 <div class="year_month">2023.03</div>
  565.                             </div>
  566.                             <div class="line_rignt">
  567.                                 <div class="line_top">锐意进取、开拓创新，努力提高服务能力和水平————华珠召开行政办公系统培训会</div>
  568.                                 <div class="line_bottom">3月22日，华南农业大学珠江学院行政办公系统办公室工作业务培训在行政楼会议室举行。懂事长陈香山、校长助理赵[...]</div>
  569.                             </div>
  570.                         </a>                        
  571.                     </div>
  572.                     <div class="new_line_4">
  573.                         <a href="#">
  574.                             <div class="line_left">
  575.                                 <div class="day">22</div>
  576.                                 <div class="year_month">2023.03</div>
  577.                             </div>
  578.                             <div class="line_rignt">
  579.                                 <div class="line_top">华珠召开2023年新学期宣传工作会议</div>
  580.                                 <div class="line_bottom">为深层推动华珠新闻宣传工作规范化、制度化和科学化，提高新闻宣传工作水平和质量，进一步夯实新学期宣传工作基础，3[...]</div>
  581.                             </div>
  582.                         </a>                        
  583.                     </div>
  584.                 </div>
  585.                 <div class="box_2" name="2_box">
  586.                     <div class="new_line_1">
  587.                         <a href="#">
  588.                             <div class="line_left">
  589.                                 <div class="day">24</div>
  590.                                 <div class="year_month">2023.03</div>
  591.                             </div>
  592.                             <div class="line_rignt">
  593.                                 <div class="line_top">学思践悟&nbsp;知行合一|华珠信息工程学院开展知行讲堂活动，共同探讨项目研究的实践与方法</div>
  594.                                 <div class="line_bottom"></div>
  595.                             </div>
  596.                         </a>
  597.                     </div>
  598.                     <div class="new_line_2">
  599.                         <a href="#">
  600.                             <div class="line_left">
  601.                                 <div class="day">23</div>
  602.                                 <div class="year_month">2023.03</div>
  603.                             </div>
  604.                             <div class="line_rignt">
  605.                                 <div class="line_top">喜讯|华珠设计学院学生首次荣获“百利杯”办公家具设计大赛金奖</div>
  606.                                 <div class="line_bottom">近期，由广东省家具协会主办的2021和2022年度“华笔奖”系列家具设计大赛颁奖典礼在广州琶洲举行，我校设计学[...]</div>
  607.                             </div>
  608.                         </a>                        
  609.                     </div>
  610.                     <div class="new_line_3">
  611.                         <a href="#">
  612.                             <div class="line_left">
  613.                                 <div class="day">21</div>
  614.                                 <div class="year_month">2023.03</div>
  615.                             </div>
  616.                             <div class="line_rignt">
  617.                                 <div class="line_top">华珠信息工程学院举办“随机建模与邦联学习框架的研究”学术论坛</div>
  618.                                 <div class="line_bottom"></div>
  619.                             </div>
  620.                         </a>                        
  621.                     </div>
  622.                     <div class="new_line_4">
  623.                         <a href="#">
  624.                             <div class="line_left">
  625.                                 <div class="day">18</div>
  626.                                 <div class="year_month">2023.03</div>
  627.                             </div>
  628.                             <div class="line_rignt">
  629.                                 <div class="line_top">设计学院师生赴云南开展采风写生教学实践</div>
  630.                                 <div class="line_bottom">近日，我校设计学院组织2022级戏剧影视美术设计、环境设计专业200余名学生赴云南开展采风写生课程。采风写生[...]</div>
  631.                             </div>
  632.                         </a>                        
  633.                     </div>
  634.                 </div>
  635.                 <div class="box_3" name="3_box">
  636.                     <div class="new_line_1">
  637.                         <a href="#">
  638.                             <div class="line_left">
  639.                                 <div class="day">23</div>
  640.                                 <div class="year_month">2023.03</div>
  641.                             </div>
  642.                             <div class="line_rignt">
  643.                                 <div class="line_top">敬告专升本考生|2023年华南农业大学珠江学院专升本考试考场安排</div>
  644.                                 <div class="line_bottom"></div>
  645.                             </div>
  646.                         </a>
  647.                     </div>
  648.                     <div class="new_line_2">
  649.                         <a href="#">
  650.                             <div class="line_left">
  651.                                 <div class="day">19</div>
  652.                                 <div class="year_month">2023.03</div>
  653.                             </div>
  654.                             <div class="line_rignt">
  655.                                 <div class="line_top">资讯速递|华珠2023届毕业生春季空中双选会助力就业</div>
  656.                                 <div class="line_bottom"></div>
  657.                             </div>
  658.                         </a>                        
  659.                     </div>
  660.                     <div class="new_line_3">
  661.                         <a href="#">
  662.                             <div class="line_left">
  663.                                 <div class="day">11</div>
  664.                                 <div class="year_month">2023.03</div>
  665.                             </div>
  666.                             <div class="line_rignt">
  667.                                 <div class="line_top">2023年研考国家线公布</div>
  668.                                 <div class="line_bottom"></div>
  669.                             </div>
  670.                         </a>                        
  671.                     </div>
  672.                     <div class="new_line_4">
  673.                         <a href="#">
  674.                             <div class="line_left">
  675.                                 <div class="day">06</div>
  676.                                 <div class="year_month">2023.03</div>
  677.                             </div>
  678.                             <div class="line_rignt">
  679.                                 <div class="line_top">关于征集第九届中国“互联网+”大学生创新创业大赛重点培育项目的通知</div>
  680.                                 <div class="line_bottom">各二级学院：为贯彻落实教育部关于举办中国国际“互联网+”大学生创新创业大赛精神，更好地培养大学生就业创业实践[...]</div>
  681.                             </div>
  682.                         </a>                        
  683.                     </div>
  684.                 </div>
  685.                 <div class="more"><a href="#">MORE></a></div>
  686.             </div>
  687.         </div>
  688.         <div class="section_3">
  689.             <div class="video_title">VIDEO SHOW</div>
  690.             <div class="video_text">视频展播</div>
  691.             <div class="under_line_2"></div>
  692.             <div class="video_play">
  693.                 <video src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/2022迎新花絮-1.mp4" poster="./img/2y11.jpg" controls></video>
  694.             </div>
  695.         </div>
  696.     </body>
  697. </html>
标签： css3 前端 css
本文转载自: https://blog.csdn.net/qq_44829421/article/details/129760168
版权归原作者 ? ! 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML+CSS仿大学官网”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？