记一次计算机网络上机报告实现过程---web网页制作（二）
记一次计算机网络上机报告实现过程—web网页制作（一）
接上一篇，页眉咱是搞完了，现在弄一下这个主体部分。
效果图：
html 部分
这个中间的，咱弄四个部分一个是第一排的logo部分，但是咱这个logo找不到，就用一下自己学校的校徽代替好了，这个字体，咱也不认识，就华文行楷好了，实际上这个图和字体组成的一个logo，但是pr没学好，扣不出来啊，就这样代替一下。
之后是一个导航栏部分，用Vue是最好的，但是我开始也没弄成Vue项目，上机要求也没说，这，害，用bootstrap划水一下就可以了
再之后就是一个图片，随便找了一个图片，原因如上，不会抠图。寻思这，在中间加个搜索框会不会看上去好一点？
这三块要是真弄成蓝绿红倒也挺简单的。就是，咱能不能弄成简介啊。
搞定大致思路，咱开工。
<div class="main">
<div class="logo">
<img src="img/timg.jpg" alt="logo">
<span>瑞腾教育培训中心span>
div>
<div class="index">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页a>li>
<li><a href="#">关于我们a>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
新闻资讯
a>
<ul class="dropdown-menu">
<li><a href="#">新闻资讯1a>li>
<li><a href="#">新闻资讯2a>li>
<li><a href="#">新闻资讯3a>li>
ul>
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>
nav>
div>
<div class="back">
<input type="text" name="" id="" placeholder="请输入您要查询的内容">
<input type="button" value="搜索一下">
div>
<div class="introduce">
<h2>教师风采h2>
<ul>
<li>
<div>
<img src="img/peopleone.jpg" alt="">
<p>姓名：诸葛亮p>
<p>简介：诸葛亮（181年—234年10月8日），字孔明，号卧龙，琅琊阳都（今山东沂南）人 ，三国时期蜀汉丞相，杰出的政治家、军事家、文学家、书法家、发明家。p>
<p>联系方式：XXXXXXXXp>
div>
li>
<li>
<div>
<img src="img/peopletwo.jpg" alt="">
<p>姓名：孔子p>
<p>简介：孔子（公元前551年9月28日－公元前479年4月11日），子姓，孔氏，名丘，字仲尼，鲁国陬邑（今山东曲阜）人，祖籍宋国栗邑（今河南夏邑），中国古代思想家、教育家，儒家学派创始人p>
<p>联系方式：XXXXXXXXp>
div>
li>
<li>
<div>
<img src="img/peoplethree.jpg" alt="">
<p>姓名：胡帅哥p>
<p>简介：帅的掉渣p>
<p>联系方式：XXXXXXXXp>
div>
li>
ul>
<div class="clear">div>
div>
div>
CSS部分
.main .index .navbar-nav li{
margin-left: 100px;
}
.main .index .navbar-nav .active a{
/* color: #30f; */
background-color: #30f;
color: #fff;
}
.main .back{
width: 100%;
height: 400px;
background: url("../img/backgroud.jpg") no-repeat;
background-size: 100% 100%;
}
.main .back input{
position: relative;
top:43%;
left: 25%;
padding: 5px 12px;
height: 45px;
}
.main .back input[type='text']{
width: 40%;
border-color: sienna;
}
.main .back input[type='button']{
margin-left: -1%;
}
.introduce h2{
font-family: 宋体;
font-weight: 700;
}
.introduce ul li{
list-style: none;
display: inline-block;
width: 30%;
float: left;
margin-left: 3.3%;
}
.introduce ul li div img{
width: 50%;
height: 310px;
float: left;
}
.introduce ul li div p{
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 300;
font-size: large;
margin-top: 1%;
}
.clear{
clear: both;
}
来想想js应该写啥,搜索发送Ajax请求？咱没写后端啊。 算了 ，就这样吧。
页尾的话，害，设计了几次，不太满意，就搬运了咱百度的代码。
<div class="bottom">
<div id="bottom_layer" class="s-bottom-layer s-isindex-wrap">
<div class="s-bottom-layer-left">
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">设为首页a>
p>
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">关于瑞腾a>
p>
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">About RuiTenga>
p>
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">瑞腾营销a>
p>
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">学习前必读a>
p>
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">意见反馈a>
p>
<p class="lh">
<a class="c-color-gray2" href="#" target="_blank">帮助中心a>
p>
div>
<div id="s-bottom-layer-right" class="s-bottom-layer-right">
<span class="lh">©2020 RuiTeng span>
<span class="lh">(京)-经营性-2017-0020span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">
<span class="lh s-bottom-recordcode">京公网安备11000002000001号span>
a>
<span class="lh">京ICP证030173号span>
div>div>
div>
.bottom{
margin-top: 3%;
height: 30px;
/* background-color: #7a6c6c; */
}
#bottom_layer{
color: #000;
font-size: 12px;
font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
list-style: none;
width: 100%;
min-width: 1250px;
position: fixed;
z-index: 302;
bottom: 0;
left: 0;
height: 40px;
overflow: hidden;
zoom: 1;
margin: 0;
background-color: #fafafa;
text-align: left;
line-height: 40px;
}
.lh{
color: #000;
font-size: 12px;
font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
text-align: left;
line-height: 40px;
margin: 0;
padding: 0;
list-style: none;
display: inline;
margin-right: 20px;
margin-left: 30px;
}
.s-bottom-layer-left{
color: #000;
font-size: 12px;
font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
list-style: none;
text-align: left;
line-height: 40px;
float: left;
}
.s-bottom-layer-right{
font-size: 12px;
font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
list-style: none;
text-align: left;
line-height: 40px;
float: right;
color: #bbb;
}
效果
最后看看效果图吧：
写完之后，也不知道会怎么样，有更好的想法或者我写代码不好的地方，请留言指正。 web前端合作也可以私信我
有一个计算机课设web页面代码的文件（目前还没通过），里面是我的源码，大家可以自取。