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

最新推荐文章于 2024-07-21 09:07:15 发布

众拾达人

最新推荐文章于 2024-07-21 09:07:15 发布

阅读量1.4k

点赞数 4

分类专栏：前端文章标签： html css 框架前端项目

本文链接：https://blog.csdn.net/wtdask/article/details/79235528

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

项目简介：

需求分析

这里写图片描述

界面设计

这里写图片描述

首页模块分析介绍

这里写图片描述

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;
}

众拾达人

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
前端系列之实战(城市医院预约挂号平台1.框架搭建)

项目简介：需求分析界面设计首页模块分析介绍HTML+CSS完成静态页面样式开发完成项目框架的搭建index.html<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>城市医院预约平台</title> <link rel="stylesheet" t
复制链接

扫一扫

专栏目录