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

项目简介:

需求分析

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

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

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

界面设计

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

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

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

首页模块分析介绍

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

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

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

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

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

完成项目框架的搭建

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

index.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-114div>
        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,框架,前端,项目)