记一次计算机网络上机报告实现过程—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">
新闻资讯
<!-- <b class="caret"></b> -->
</a>
<ul class="dropdown-menu">
<li><a href="#">新闻资讯1</a></li>
<li><a href="#">新闻资讯2</a></li>
<li><a href="#">新闻资讯3</a></li>
</ul>
</li>
<li><a href