web前端仿上海建桥学院静态页面

已于 2022-10-12 20:11:02 修改
阅读量372 收藏 3
点赞数 1
分类专栏： 前端 文章标签： 前端 css html
于 2022-07-08 23:06:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy1948/article/details/125687301
版权

一、前言

记录学习，火辣辣的夏天，祈祷下雨中，这次写的是上海建桥学院的页面，css中有一些代码过于繁琐自己还需要简化一些，整体的布局还有一些小细节被忽略…

二、HTML页面代码

这里面主要是div的划分，和ul中的li的调整 ，以及form表单中的input标签，text里面的属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入外部公共样式表 -->
    <link rel="stylesheet" href="../../../css/public.css" />
    <link rel="stylesheet" href="../css/学院.css" />
  </head>
  <body>
    <!-- 顶部搜索区域 -->
    <div class="search">
      <div class="searcher layout">
        <ul class="lef">
          <li>
            <a href="https://www.gench.edu.cn/" target="_blank">在校学生</a>
          </li>
          <li>
            <a href="https://www.gench.edu.cn/" target="_blank">教职员工</a>
          </li>
          <li><a href="https://www.gench.edu.cn/" target="_blank">校友</a></li>
          <li>
            <a href="https://www.gench.edu.cn/" target="_blank">未来学生</a>
          </li>
          <li id="last">
            <a href="https://www.gench.edu.cn/" target="_blank">未来教职工</a>
          </li>
        </ul>
        <ul class="rig">
          <li>繁体中文</li>
          <li>怀念旧版</li>
          <li>English</li>
          <input type="text" placeholder="请输入关键字" />
          <img src="../img/2.png" alt="" />
        </ul>
      </div>
    </div>
    <!-- 顶部图片区域 -->
    <div class="pic layout">
      <div class="pic1 pic"></div>
      <div class="pic2 pic"></div>
    </div>
    <!-- 顶部导航区域 -->
    <div class="banner">
      <ul class="ban layout">
        <li>建桥概览</li>
        <li>机构设置</li>
        <li>人才培养</li>
        <li>学术科研</li>
        <li>校园文化</li>
        <li>合作交流</li>
        <li>招生就业</li>
        <li>校友会</li>
        <li>荣誉榜</li>
        <li>信息公开</li>
      </ul>
    </div>
    <!-- 中部轮播图 -->
    <div class="midpic">
      <div class="pic layout">
        <div class="lef"></div>
        <div class="rig">
          <ul>
            <li>上海建桥学院关于办学地址变更的公告(08-04)</li>
          </ul>
          <ul>
            <li>
              校学生会当选全国学联第26届委员会团体委员│房伊萌同学参加大会(07-29)
            </li>
          </ul>
          <ul>
            <li>学生整体搬迁新校区工作顺利完成(07-08)</li>
          </ul>
          <ul>
            <li>
              学生行李发车仪式正式拉开搬迁临港大幕│周星增董事长开锣(07-04)
            </li>
          </ul>
          <ul>
            <li>关于做好搬迁工作及2015年暑假安排的通知(06-29)</li>
          </ul>
          <img src="../img/6.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 中间信息内容部分 -->
    <div class="news layout">
      <div class="one">
        <div class="top">
          <div class="p">图片</div>
          <img src="../img/7.png" alt="" />
          <div class="p1">商学院第三届建筑模型制作大赛决...</div>
        </div>
        <div class="bot">
          <div class="p">讲座报告</div>
          <ul id="first">
            <li>本科生毕业典礼暨学位授予仪式(6月2..</li>
            <li id="date">04-15</li>
          </ul>
          <ul>
            <li>专科生毕业典礼(6月18日，体育馆)</li>
            <li id="date">04-15</li>
          </ul>
          <ul>
            <li>“记忆留夏，定格康桥”摄影大赛</li>
            <li id="date">04-13</li>
          </ul>
          <ul>
            <li>[高雅艺术]“相约经典”大学生公益票..</li>
            <li id="date">12-22</li>
          </ul>
          <ul>
            <li>专科生毕业典礼(6月18日，体育馆)</li>
            <li id="date">12-22</li>
          </ul>
          <ul>
            <li>“记忆留夏，定格康桥”摄影大赛</li>
            <li id="date">12-22</li>
          </ul>
        </div>
      </div>

      <div class="two">
        <div class="top">
          <div class="p">
            <p>院部动态</p>
          </div>
          <div class="p1">
            <div class="img">
              <img src="../img/8.png" alt="" />
            </div>
            <p>
              <span>我校举行开学典礼暨临港新校区落成启用仪...<br /></span>
              9月18日下午，我校举行2015秋季开学典礼暨临港新校区落成启用仪式。中共上海市教育卫生工作委员会巡视员李...
            </p>
          </div>
          <div class="p1">
            <div class="img">
              <img src="../img/8.png" alt="" />
            </div>
            <p>
              <span>我校举行开学典礼暨临港新校区落成启用仪...<br /></span>
              9月18日下午，我校举行2015秋季开学典礼暨临港新校区落成启用仪式。中共上海市教育卫生工作委员会巡视员李...
            </p>
          </div>
        </div>

        <div class="bot">
          <div class="p">讲座报告</div>
          <div class="list">
            <ul>
              <li id="lef">[高雅艺术]“相约经典”大学生公益票..</li>
              <li id="rig">12-22</li>
            </ul>
            <ul>
              <li id="lef">“记忆留夏，定格康桥”摄影大赛</li>
              <li id="rig">12-22</li>
            </ul>
            <ul>
              <li id="lef">[高雅艺术]“相约经典”大学生公益票..</li>
              <li id="rig">12-22</li>
            </ul>
            <ul>
              <li id="lef">[高雅艺术]“相约经典”大学生公益票..</li>
              <li id="rig">12-22</li>
            </ul>
            <ul>
              <li id="lef">商学院第三届建筑模型制作大赛决...</li>
              <li id="rig">12-22</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 第三个部分 -->
      <div class="three">
        <div class="top">
          <img src="../img/9.png" alt="" />
        </div>
        <div class="bot">
          <div class="p1">
            <p><span>信息门户</span>&nbsp;&nbsp;&nbsp; 建桥邮箱</p>
          </div>
          <div class="user">
            <form action="">
              <input type="text" placeholder="用户名" />
              <input type="password" placeholder="请输入您的密码" />
              <input id="sub" type="submit" value="&emsp;登&emsp;录&emsp;" />
            </form>
            <p>忘记密码?</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部部分 -->
    <div class="bot1"></div>
    <div class="bot2">
      <div class="botton layout">
        <ul>
          <li>友情链接</li>
          <li>合作院校</li>
          <li>产学合作单位</li>
          <li>相关链接</li>
          <li>实用链接</li>
        </ul>
      </div>
    </div>
    <div class="bot3">
      <div class="footer layout">
        <ul>
          <li>教育部</li>
          <li>上海市教育委员会</li>
          <li>上海建桥(集团)有限公司</li>
          <li>西南片高校联合办学</li>
          <li>应用技术大学(学院)联盟</li>
          <li>非营利性民办高校联盟</li>
        </ul>
        <div class="font layout">
          <p>
            学校地址:上海市浦东新区沪城环路1111号邮编:201306<br />
            电话:021-58137788（总机);58137880（招生办公室)沪ICP备05052066号
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

三、css页面代码

对div布局的设计，内外边距，注意float带来的变化，整体就是块的划分和块里面内容的调整

/* 设置版心公共属性 */
.layout{
    width: 1040px;
    margin: 0 auto;
    overflow: hidden;
}
/* 顶部搜索区域 */
.search{
    height: 35px;
    color: #68696b;
    background-color: #e4e4e4;
}
.search a{
    color: #68696b;
}
.searcher{
    height: 35px;
    background-color: #e4e4e4;
    font-size: 12px;
    color: #68696b;
    line-height: 34px;
}
.searcher a:link{
    color: #68696b;
}
.searcher a:hover{
    color: red;
}
.searcher .lef{
    width: 332px;
    height: 35px;
    /* background-color: yellow; */
    float: left;
}
.searcher .lef >li{
    float: left;
    background-image: url(../img/1.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding:0px 10px;

}
.searcher .lef >#last{
    background-image: none;
}
.searcher .rig{
    width: 376px;
    height: 35px;
    /* background-color: aliceblue; */
    float: right;
}
.searcher .rig>li{
    float: left;
    margin-right: 19px;
}
.searcher .rig >input{
    width: 144px;
    height: 23px;
    border: none;
    margin-top: 8px;
}
.searcher .rig>input::-webkit-input-placeholder{
    color: #c9c9c7;
    font-size: 12px;
    text-indent: 6px;
}
.searcher .rig>img{
    float: right;
    margin-top: 8px;

}
/* 顶部图片区域 */
.pic{
    height: 98px;
    /* background-color: rebeccapurple; */
}
.pic .pic1{
    width: 370px;
    float: left;
    /* background-color: aliceblue; */
    background-image: url(../img/3.png);
    background-repeat: no-repeat;
    background-position: center;
    
}
.pic .pic2{
    width: 376px;
    float: right;
    /* background-color: aliceblue; */
    background-image: url(../img/4.png);
    background-repeat: no-repeat;
    background-position: center;
}
/* 顶部导航区域 */
.banner{
    height: 47px;
    background-color: #d92b34;
}

.banner ul>li{
    font-size: 13px;
    color: white;
    float: left;
    padding: 14px 25px;
}
.banner ul>li:hover{
    background-color: #FF6A6A;
}
/* 中间轮播图 */
.midpic{
    height: 329px;
    background-color: #e6e6e6;
}
.midpic .pic{
    height: 329px; 
    /* background-color: red; */
}
.midpic .pic >.lef{
    width: 667px;
    height: 328px;
    /* background-color: aqua; */
    float: left;
    background-image: url(../img/5.png);
    background-repeat: no-repeat;
}
.midpic .pic>.rig{
    float: right;
    width: 338px;
    height: 324px;
    background-color: #eeeeee;
    border-bottom: 5px solid #c8141f;
}
.midpic .pic .rig ul >li{
    width: 217px;
    height: 47px;
    font-size: 11px;
    margin: 0 auto;
    margin-top: 13px;
    line-height: 25px;
    border-bottom: 2px dashed gainsboro;
}
.midpic .pic .rig>img{
    float: right;
    margin-right: 60px;
}
/* 中间信息内容部分 */
.news{
    width: 1040px;
    height: 478px;
    /* background-color: #d92b34; */
    margin-top: 39px;
    overflow: hidden;
}
/* 第一部分 */
.news>.one{
    width: 284px;
    height: 478px;
    /* background-color: yellow; */
    float: left;
}
.news .one .top >.p{
    width: 270px;
    height: 43px;
    font-size: 18px;
     border-bottom: 1px solid #dfdfdf;
}
.news .one .top >img{
    margin-top: 16px;
}
.news .one .top >.p1{
    font-size: 11px;
    text-indent: 25px;
}
.news .one .bot >.p{
    width: 270px;
    height: 43px;
    font-size: 18px;
    margin-top: 54px;
     border-bottom: 1px solid #dfdfdf;
}
.news .one .bot ul li{
    font-size: 10px;
    line-height: 27px;
    float: left;

}
.news .one .bot>#first{
    margin-top: 19px;
}
.news .one .bot ul>#date{
    float: right;
}
/* 第二部分 */
.news>.two{
    width: 464px;
    height: 478px;
    /* background-color: blue; */
    float: left;
    margin-left: 16px;
    
}
/* 院部动态 */
.news .two .top >.p{
     /* margin-top: 16px; */
     width: 464px;
    height: 43px;
    font-size: 18px;
     border-bottom: 1px solid #dfdfdf;
     /* background-color: yellow; */
}
.news .two .top >.p1{
    width: 455px;
    height: 62px;
    margin-top: 16px;
    /* background-color: yellow; */
    /* overflow: hidden; */
}
.news .two .top .p1>.img{
    width: 83px;
    height: 62px;
    float: left;
    /* background-color: pink; */
}
.news .two .top .p1 .img>img{

    float: left;
    /* padding: 0px 15px; */
    margin-right: 15px;
    float: right;

}
.news .two .top .p1>p{
    width: 332px;
    height: 55px;
    float: left;
    font-size: 10px;
    line-height: 20px;
    color: #707070;
}
.news .two .top .p1 p>span{
    font-size: 14px;
}
/* 第二部分底部 */
.news .two .bot >.p{
    margin-left: 10px;
    width: 464px;
    height: 43px;
    font-size: 18px;
    margin-top: 54px;
    /* background-color: red; */
     border-bottom: 1px solid #dfdfdf;
}
.news .two .bot>.list{
    width: 464px;
    height: 198px;
    margin-top: 19px;
    /* background-color: pink; */
    margin-left: 10px;
}
.news .two .bot .list ul{
    font-size: 10px;
    line-height: 27px;
    overflow: hidden;

}
.news .two .bot .list ul>#lef{
    float: left;
}
.news .two .bot .list ul>#rig{
    /* display: inline; */
    float: right;
    margin-right: 30px;
}
/* .news .two .bot .list ul li>#lef{
    float: left;
} */

/* 第三部分 */
.news>.three{
    width: 270px;
    height: 478px;
    /* background-color: green; */
    float: left;
}
.news .three >.top{
    width: 270px;
    height: 295px;
    /* background-color: #68696b; */
}
.news .three .top>img{
    margin: 0 auto;
}
.news .three >.bot{
    width: 246px;
    height: 200px;
    /* background-color: red; */
    margin: 0 auto;
}
.news .three .bot>.p1{
    width: 246px;
    height: 45px;
    /* background-color: yellow; */
 
}
.news .three .bot .p1 >p{
    font-size: 14px;
    color: #cccccc;
    padding-bottom: 3px;
    border-bottom: 2px solid #cccccc;
    line-height: 20px;
}
.news .three .bot .p1 p>span{
    color: #c5151f;
    border-bottom: 4px solid #c5151f;
}
.news .three .bot >.user{
    margin-top: 28px;
    width: 230px;
    height: 191px;

}
.news .three .bot .user form>input{
    width: 224px;
    height: 34px;
    margin-bottom: 6px;
    border: 1px solid #cccccc;
}
.news .three .bot .user form input>input::-webkit-input-placeholder{
    font-size: 13px;
    color: black;
    font-family:Arial;
}
.news .three .bot .user form>#sub{
    width: 80px;
    height: 24px;
    float: left;
}
.news .three .bot .user>p{
    float: right;
    font-size: 13px;
    margin-right: 25px;
}
/* 底部部分 */
.bot1{
    height: 26px;
    background-color: #ebebeb;
    border-top: 3px solid #ff9c00;
    background-image: url(../img/10.png);
    background-repeat: no-repeat;
    background-position: center top;
}
.bot2{
    height: 42px;
    background-color: #d4d4d4;
}
.bot2 .botton ul>li{
    font-size: 12px;
    margin: 11px 105px 11px 50px;
    float: left;
}
.bot3{
  height: 125px;
  background-color: #302728;
}
.bot3>.footer{
    height: 125px;
    /* background-color: yellow; */
}
.bot3 .footer ul>li{
    float: left;
    margin: 12px 25px;
    font-size: 12px;
    color: white;
}
.bot3 .footer >.font{
    height: 80px;
    border-top: 1px solid gray;
}
.bot3 .footer .font>p{
    font-size: 11px;
    color: #929292;
    text-align: center;
    line-height: 20px;
    margin-top: 20px;
}

四、页面效果

在这里插入图片描述
在这里插入图片描述

五、最后

要注意每个块之间的宽度溢出问题。
链接：https://pan.baidu.com/s/16fvBlrJuc3U7zbsLNDvXMw
提取码：gkqf

初露微微
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
qq_38512792的博客
04-26 445
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
web前端瓜子二手车模仿网站Rec 0001.mp4
08-17
web前端课程设计，关于二手车买卖的课程设计页面，借鉴于瓜子二手车买卖的前端页面展示视频。采用了iconfont、js等技术和特效。
前端小白仿写小米官网首页（静态页面+jquery轮播图）
@微你
10-18 5798
前言： 最近为了稍微复习一下html和css,决定写一个页面练练手，最后决定仿写一下小米官网的首页，零零散散的时间加起来，大致用了一天半时间。有很多不足的地方，欢迎大家给出指导！ 结构： ...
web前端开发仿天猫实战
java_zdc的博客
04-19 476
学习完了前端的HTML CSS JavaScript等各项技术之后，会有一个感慨，各个知识点分开都不难，但是要做出一个成型的，好看的，时尚的网页，就无从下手。这就需要经验的积累了。本项目是一个十分接近天猫官网的网站点击进入: 模仿天猫官网本项目90%的内容是由纯 Html CSS和JQuery完成，你可以学习到如何使用最原本的html和css完成天猫这样量级的前端效果。学习本项...
Delphi做的一个仿Web的导航界面
PRSoft的博客
05-04 4268
delphi 也是可以做出很精美的界面的
上海建桥学院数据库原理实验报告
05-12
上海建桥学院数据库原理-实验报告3-视图、触发器和存储过程的使用
网页设计作业-上海建桥学院网站首页设计
04-03
这个"网页设计作业-上海建桥学院网站首页设计"项目提供了一个基于纯CSS和HTML的静态页面实例，非常适合那些想要深入理解这两种语言的学生进行学习和实践。 HTML（HyperText Markup Language）是网页内容的基础结构...
上海建桥学院实验报告-实验报告1计算机图形
04-08
一、实验目的和要求 通过实验，帮助学生更好地掌握计算机视觉相关概念和技术，使学生对图像滤波、边缘检测、谱分析、几何变换等有比较深入的认识。 1、熟悉计算机视觉中涉及的相关概念、算法，和具体的编程方法；...
上海建桥学院-移动应用开发-实验报告2-Activity组件通信
04-09
（ “男”单选按钮默认选中，学院下拉列表框的内容为：信息技术学院、外国语学院、机电学院、商学院、艺术设计学院、珠宝学院、新闻传播学院）；左列标签名字体大小为24sp； 点击“使用显示启动”按钮和“使用隐式...
上海建桥学院-移动应用开发-实验报告3-Android数据存储
04-16
实验三 Android数据存储 一、实验目的及要求 （1） 掌握Android的SharedPreferences的使用 （2） 掌握在Android中使用SQLite的方法 二、实验内容及步骤 任务：根据下述要求实现对应程序 ... 2、 根据图2来实现功能,...
完美Web仿Mac菜单界面设计
tzhy7的专栏
02-16 4205
网上已经有一些仿Mac菜单的Web设计，但实现有局限且功能非常有限，本文真正实现了Mac菜单设计。（完美实现了拖拽删除、拖拽排序、强制恢复大小等细节）​大家先看看实际效果，觉得适用再看具体代码：​http://v.youku.com/v_show/id_XODk0NTE1Nzcy.html具体代码及分析：<%String contextPath = request.getContextPath();
web前端网页界面/css 仿微软官网界面
A485320的博客
08-02 2141
Html5+css做的一款网页设计界面，仿微软官网，导航栏下拉列表，轮播图，具体界面效果如下： HTML代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Windows | Microsoft Windows 10 家庭版和 Windows 10 专业版操作系统、笔记本电脑、电脑、平板电脑等内容的官方网站</title&.
web前端html+css+js 简单模仿敲木鱼
Cpythonjavamacos的博客
11-21 1207
web前端html+css+js 简单模仿敲木鱼 pc端实现
前端学习-案例：制作一个超简单的静态页面
菜鸟-传奇
09-19 6299
前端学习-案例：制作一个超简单的静态页面 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesh...
web前端之百度首页仿写
可可的博客
09-26 4520
&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度一下，你就知道&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="0" width="100%" height=&quot
WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS
张时贰的博客
12-28 3799
WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS 文章目录WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS一、前言二、图片资源三、主要代码四、网页效果五、说明 一、前言 凌晨兴起写的，修改了好多，有一丢丢乱，但是界面效果在。 静态页面，没有后端数据，只是单一的HTML。 二、图片资源 这里用了一些iconfont-阿里巴巴矢量图标库，使用了如下几个矢量图。使用教程参考我的另一篇。(矢量图使用CSS样式导入图标，比直接导入img效果更好) 1.即使好礼苹果.jpg
Bootstrap实战练习---模仿前端网页(导航栏+轮播图+Media)
Season CSDN博客
07-24 1507
Bootstrap实战—模仿前端网页 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initi..
教你用html和css仿制小米官网页面
SunAndYou
12-13 9222
学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。
前端面试题（12）答案版
最新发布
weixin_49062485的博客
06-30 763
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值