您的位置：首页 > Web前端

前端系列之实战(城市医院预约挂号平台1.框架搭建)

2018-02-02 09:44 302 查看

项目简介：

需求分析

界面设计

首页模块分析介绍

HTML+CSS完成静态页面样式开发

完成项目框架的搭建

index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="utf-8" />
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>

<body>
<div id="top" class="top">

<div class="wrap">010-114</div>
</div>

<div id="header" class="header">

</div>

<div id="nav" class="nav">

</div>

<div id="banner" class="banner">
<div class="banner-slider"></div>
<div class="banner-search"></div>
<div class="banner-help"></div>
</div>

<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab"></div>
<div class="content-news"></div>
<div class="content-close"></div>
</div>
</div>

<div id="footer" class="footer">

</div>
</body>

</html>

layout.css

body {
margin: 0;
padding: 0;
}

.clearfix:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}

.wrap {
width: 1000px;
margin: 0 auto;
position: relative;
}

.top {
height: 30px;
background-color: #f5f5f5;
}

.header {
height: 92px;
}

.nav {
height: 36px;
background-color: #60bff2;
}

.banner {
width: 802px;
margin: 0 auto;
height: 414px;
padding: 9px 0 0 198px;
}

.banner-slider {
float: left;
width: 544px;
height: 414px;
background-color: #8edff3;
}

.banner-search {
float: right;
width: 250px;
height: 255px;
background-color: #eee;
}

.banner-help {
float: right;
width: 250px;
height: 146px;
background-color: #ccc;
margin-top: 12px;
}

.content {

padding: 10px 0 38px 0;
}

.content-tab {
float: left;
width: 742px;
height: 490px;
background-color: #EEEEEE;
}

.content-news,
.content-close {
float: right;
width: 248px;
height: 236px;
border: 1px solid #CCCCCC;
}

.content-close {
margin-top: 12px;
border-color: red;
}

.footer {
height: 132px;
padding: 25px 0;
background-color: #eceef2;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css 框架前端项目

相关文章推荐

新的分享

章节导航