小练手理工大学官网HTML+CSS_青岛理工大学官网html网页代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_40389152/article/details/78202309

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>::青岛理工大学::Welcome to Qingdao University of Technology</title>
  <style type="text/css">
   *{
    padding:none;
    margin:none;
    font:宋体;
   }
   .box1{
    width:1349px;
    height:98px;
    margin-top:30px;
    background:url(img/理工.gif) no-repeat top center #932e36
   }
   .box1 a{
    text-decoration: none;
   }
   .English{
    float:right;
    color:#efb3b5;
    margin:18px 200px 0 0;
    padding-left:8px;
    padding-right:8px;
    border-left:#ffa4ab 1px dashed;
    border-right:#ffa4ab 1px dashed;
   }
   .search{
    float:right;
    margin:55px -160px 0 0;
   }
   .search .sou{
    color:#dab191;
   }
   .box2{
    width:880px;
    height:400px;
    margin:20px auto;
   }
   .picture1 a{
    float:left;
    width:554px;
    height:312px;
    margin:0 2px 0 0;
    background:paleturquoise url(img/青岛理工大学.jpg);
   }
   .daohang{
    float:left;
    width:484px;
    height:27px;
    margin:-2px 35px ;
   }
   .right{
    float:right;
    width:298px;
    height:318px;
   }
   .school{
    float:right;
    width:210px;
    height:110px;
    margin:0 110px 0px 0;

   }
   .school .ul{
    width:150px;
    height:85px;
    overflow: auto;
   }
   .ul marquee{
     direction:up;
     behavior:alternate;
   }
   .news{
    float:right;
    width:210px;
    height:100px;
    margin:5px 110px 5px 0;
   }
   .picture2 a{
    float:right;
    width:122px;
    height:90px;
    margin:0px 40px 0px 10px;
    background: silver url(img/两学一做.jpg);
   }
   .picture3 a{
    float:right;
    width:122px;
    height:90px;
    background:palevioletred url(img/招生.jpg);
   }
   .daohang ul a{
    margin:2px 0px;
    list-style-type:square;
    color:black;
    font-weight: bold;
   }
   li{
    float:left;
    width:85px;
    height:100%;
   }
   .Q{
    font-weight:bold;
    font-family: 楷体;
    font-size:18px;
   }
   .N a{
    float:right;
    text-decoration: none;
    color:black;
    font-size:13px;
    margin:2px 0 0 0;
   }
   .T{
    font-weight:bold;
    font-family: 楷体;
    font-size:18px;
   }
   .G{
    float:right;
    text-decoration: none;
    color:black;
    font-size:13px;
    margin:2px 40px 0 0;
   }
   a{
    text-decoration:none;
    color:black;
    font-size:14px;
   }
   a:hover{
    color:purple;
   }
   .box3{
    width:1349px;
    height:120px;
    background:url(img/校徽.gif) no-repeat 250px 0px #f3efe4
   }
   .box3 .last{
    width:756px;
    height:20px;
    margin:2px 0 0 430px;
   }
   .box3 span{
    border-left:#352d20 1px dashed;
   }
   .box3 span a{
    color:#4c302f;
   }
   .box3 .p{
    width:753px;
    height:40px;
    margin:10px 0 0 430px;
    font-size:14px;
   }

  </style>
</head>
<body>
  <div class="box1">
   <div><a href="#" class="English">English Version</a></div>
    <div class="search">
     <input class="kuang" type="text" />
     <a href="#" class="sou">搜索</a>
    </div>
  </div>
  <div class="box2">
   <div class="right">
    <div class="school">
     <span class="Q">校内快讯</span>
     <span class="N"><a href="#">进入新闻网</a></span>
      <div class="ul">
       <marquee>
       <ul>
        <a href="#"><li>啦啦啦啦啦啦</li></a>
        <a href="#"><li>哈哈哈哈哈哈</li></a>
        <a href="#"><li>嘿嘿嘿嘿嘿额</li></a>
        <a href="#"><li>哦哦哦哦哦哦</li></a>
        <a href="#"><li>嗯嗯嗯嗯嗯嗯</li></a>
        <a href="#"><li>呀呀呀呀呀呀</li></a>
       </ul>
       </marquee>
      </div>
    </div>
    <div class="news">
     <span class="T">通知公告</span>
     <span class="G"><a href="#">更多</a></span>

     <ul>
      <a href="#"><li>啦啦啦</li></a>
      <a href="#"><li>哈哈哈</li></a>
      <a href="#"><li>嘿嘿嘿</li></a>
     </ul>
    </div>
    <div class="picture2"><a href="#"></a></div>
   <div class="picture3"><a href="#"></a></div>
   </div>
   <div class="picture1"><a href="#"></a></div>
   <div class="daohang">
    <ul>
     <a href="#">
      <li>校情总览</li>
      <li>组织机构</li>
      <li>人才培养</li>
      <li>科学教研</li>
      <li>校园生活</li>
     </a>
    </ul>
   </div>
  </div>
  <hr>
  <div class="box3">
   <div class="last">
    <span><a href="#">大事表</a></span>
    <span><a href="#">招生就业创业</a></span>
    <span><a href="#">图书馆</a></span>
    <span><a href="#">信息公开</a></span>
    <span><a href="#">住房调售</a></span>
    <span><a href="#">校友总会</a></span>
    <span><a href="#">信息公开</a></span>
    <span><a href="#">OA办公</a></span>
    <span><a href="#">邮箱</a></span>
    <span><a href="#">公共服务</a></span>
    <span><a href="#">临沂校区</a></span>
    <span><a href="#">自学考试</a></span>
    <span><a href="#">网站地图</a></span>
   </div>
   <div class="p">
    <p>市北校区地址:青岛市抚顺路11号邮编:266033长江路校区地址：青岛经济技术开发区长江中路2号邮编：266520
嘉陵江路校区地址:青岛经济技术开发区嘉陵江路777号邮编:266520临沂校区地址:临沂市费县县城东外环1号邮编:273400 </p>
   </div>
  </div>
</body>
</html>