web前端仿上海建桥学院静态页面
一、前言
记录学习，火辣辣的夏天，祈祷下雨中，这次写的是上海建桥学院的页面，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>Documenttitle>
<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>Englishli>
<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-15li>
ul>
<ul>
<li>专科生毕业典礼(6月18日，体育馆)li>
<li id="date">04-15li>
ul>
<ul>
<li>“记忆留夏，定格康桥”摄影大赛li>
<li id="date">04-13li>
ul>
<ul>
<li>[高雅艺术]“相约经典”大学生公益票..li>
<li id="date">12-22li>
ul>
<ul>
<li>专科生毕业典礼(6月18日，体育馆)li>
<li id="date">12-22li>
ul>
<ul>
<li>“记忆留夏，定格康桥”摄影大赛li>
<li id="date">12-22li>
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-22li>
ul>
<ul>
<li id="lef">“记忆留夏，定格康桥”摄影大赛li>
<li id="rig">12-22li>
ul>
<ul>
<li id="lef">[高雅艺术]“相约经典”大学生公益票..li>
<li id="rig">12-22li>
ul>
<ul>
<li id="lef">[高雅艺术]“相约经典”大学生公益票..li>
<li id="rig">12-22li>
ul>
<ul>
<li id="lef">商学院第三届建筑模型制作大赛决...li>
<li id="rig">12-22li>
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> 建桥邮箱p>
div>
<div class="user">
<form action="">
<input type="text" placeholder="用户名" />
<input type="password" placeholder="请输入您的密码" />
<input id="sub" type="submit" value=" 登 录 " />
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