55-001-1 web前端HTML5 实现一个简单的首页

来源：互联网发布：php 数组按字段值排序编辑：程序博客网时间：2024/06/02 00:37

建立一个静态页面如图：

1.准备工作：

1.1 添加bootstrap的整体支持 bootstrap-3.3.4-dist，所有的css、js支持都放到这个里面

1.2 建立图片文件夹images

1.3 建立自定义的css、js文件夹

2. 新建页面顶部的显示效果；

2.1 搭建index页面的整个框架布局头中尾三个层次，并且导入bootstrap的相关文件；

2.2 编写顶部显示的代码；

<li class="header-li"><a href="http://www.zhzyk.cn/">资源库首页</a></li>

</ul>

<li >

</li>

<li >

</li>

<li >

<a href="#">English</a>

</li>

</ul>

<a>

  欢迎您：<s:property value="#session.studentsUserInfo.getUsername()"></s:property>

</a>

</li>

</li>

</ul>

</div>

并设置其样式

ul.language{

margin-left: 655px;

}

ul.language li a{

padding-right: 5px;

padding-left: 5px;

}

显示效果

3. 插入一个div层显示标题，其颜色样式#329AFC;

<h1>CKC Online在线评测系统</h1>

</div>

设置样式

article section .title{

height: 100px ;

width: 100% ;

background-color: #329AFC;

text-align: center;

}

article section .title h1{

padding-top: 33px;

}

显示效果

4. 然后定义navigation导航信息，删掉个人中心

</a>

</li>

<li class="header-li"><a href="http://www.zhzyk.cn/">资源库首页</a></li>

<li class="header-li"><a href="stuIndex.jsp">在线评测首页</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">识字量评测系统 <span class="caret"></span></a>

<li class="header-li"><a href="wordReadList.jsp?index=2&type=0">生活常用语</a></li>

<li class="header-li"><a href="wordReadList.jsp?index=3&type=0">学生常用成语</a></li>

</ul>

</li>

<li><a href="ForeignLanguageList.jsp?type=0">Chinese for speakers of other languages</a></li>

</ul>

</li>

<li class="header-li"><a href="getTestList?grade=all">语文综合知识评测系统</a></li>

<li class="header-li"><a href="Choose_Cartoon.jsp">动画评测系统</a></li>

</ul>

</div>

设置样式：

.nav-div{

margin-left:10%;

margin-right:10%;

}

.navbar-defalut {

font:15px/1.5 "Microsoft Yahei",

"Hiragino Sans GB", Helvetica,

"Helvetica Neue", "微软雅黑", Tahoma,

Arial, sans-serif;

background-color: white;

height:50px;

}

.navbar li a{

color: black;

}

.navbar li a:HOVER{

border-bottom: 3px solid #ddd;

background-color: white;

color:#b00;

}

#nav-div{

margin-left:80px;

}

.header{

width: 1100px !important;

}

.btn,.navbar-toggle{

background-color: #ddd;

}

.dropdown:hover .menu-top {

display: block;

}

.dropdown-submenu{

position:relative;

}

.dropdown-submenu > .dropdown-menu{

top:0;

left:100%;

margin-top:-6px;

margin-left:-1px;

-webkit-border-radius:0 6px 6px 6px;

-moz-border-radius:0 6px 6px 6px;

border-radius:0 6px 6px 6px;

}

.dropdown-submenu:hover > .dropdown-menu{

display:block;

}

.dropdown-submenu > a:after{

display:block;

content:" ";

float:right;

width:0;

height:0;

border-color:transparent;

border-style:solid;

border-width:5px 0 5px 5px;

border-left-color:#cccccc;

margin-top:5px;

margin-right:-10px;

}

.dropdown-submenu:hover > a:after{

border-left-color:#ffffff;

}

.dropdown-submenu .pull-left{

float:none;

}

.dropdown-submenu.pull-left > .dropdown-menu{

left:-100%;

margin-left:10px;

-webkit-border-radius:6px 0 6px 6px;

-moz-border-radius:6px 0 6px 6px;

border-radius:6px 0 6px 6px;

}

效果图：

5. 定义正内容：三个评测系统的进入口

</a>

</div>

<h2>识字量评测系统</h2>

<p>对汉字词的认识数量的评测。</p>

</div>

</a>

</div>

<h2>语文综合评测系统</h2>

<p>通过语文综合试题进行评测</p>

</div>

</a>

</div>

<h2>动画评测系统</h2>

<p>显示词组，对词组和字形进行识别评测</p>

</div>

</section>

设置样式：

/*三个评测进入口的样式*/

.sys-test-panel{

background-color: #329AFC ;

height: 420px ;

}

.sys-test-panel a .img-circle1{

border-radius: 300px ;

width: 150px ;

height:150px ;

}

.thumbnail_pic{

margin-top: 36px;

}

section div .caption{

text-align: center;

margin-top: 18px;

}

section div .caption a{

color: rgb(50, 51, 51);

font-size: 17px;

}

效果图：

6. 实现底部显示

<ul>

</ul>

</footer>

</div>

设置样式

/*页面底部的实现*/

#footer-wrapper{

background-color:#329AFC ;

margin-top: 60px ;

height: 80px ;

padding: 15px 0px ; /*上下15，左右0的内边距实现div中文字居中；*/

}

#footer-wrapper li{

display: inline-block; /*水平对齐*/

vertical-align: top ; /*顶部对齐*/

border-right: 1px solid black ;/*1个像素的白色水平竖线*/

padding-right: 20px ; /*元素之间的间隔*/

padding-left: 14px;

}

#footer-wrapper footer{

text-align: center; /*三个超链接内容水平居中*/

}

#footer-wrapper li a{

text-decoration:none; /*取消超链接下划线*/

color:black; /*文字颜色白色*/

}

#footer-wrapper footer p{

color:black; /*文字颜色白色*/

margin-top: 10px ;

}

#footer-wrapper li:last-child{

border:0;

}

效果图：

最终效果图：

资源文件下载：https://yunpan.cn/OcPaEEX6hw7JDm 访问密码 0ab9

0 0