页面结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
    <style>
        header, nav, article, footer{
            border: solid 1px #666;
            padding: 5px;
        }
        header{
            width: 500px;
        }
        nav{
            float: left;
            width: 60px;
            height: 100px;
        }
        article{
            float: left;
            width: 428px;
            height: 100px;
        }
        footer{
            clear: both;
            width: 500px;
        }
    </style>
</head>
<body>
    <header>
        头部部分
    </header>
    <nav>
        菜单导航部分
    </nav>
    <article>
        内容部分
    </article>
    <footer>
        底部部分
    </footer>
</body>
</html>
时间: 2024-09-30 08:35:11

页面结构的相关文章

前端HTML之页面结构

前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面. PS:2015年1月进军编程行业. 废话不多讲,这一年页面改版了N次,以至于设计师都撂挑子了,,,页面做多了,经验自然就有了. 背景(前端小白,迫于生计放弃之前销售工作,计算机专业) 前端的最基本要求,实现设计师所出的效果图,也就是样子跟设计图一样就可以. 这个要求容易实现,需要费点心思,花点时间,期初切图会慢一点,往后就越来越快了,, 前端的进阶一,

Android网络项目课程笔记-----页面结构

1. Android App主页结构 存在主要的App组织结构: 1) Tab页 a) Android Tab标签在顶部 b) 模仿iOS Tab标签在底部,最后一个是更多 2) 侧滑菜单 Tab 优点:直观 缺点:占空间 menuDrawer 优点:节省空间 缺点:不直观 时间 2侧滑菜单: 2.1 SlidingMenu 主页面(包括Actionbar)完整滑动 2.2 menuDrawer 内容部分被滑动菜单遮住 GMail.GoogleMusic.Google+ 3. GoogleSty

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元

【转】移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

HTML入门-页面结构&amp;基础标签

文章目录 一.什么是html?二.动态网页与静态网页区别?(面试题)三.三个版本和一个标准(面试题)四.html5的扩展五.html创建文件(重点)六.html格式(重点)七.html基本结构(重点)八.注释九.基础标签(重点)十.文本标签十一.布局标签十二.特殊符号一.什么是html? html 超文本标记语言 文本:文字元素超文本:视频,图片,音乐,链接标记符:由左书名号和右书名号包裹一个标签名字的构造-----<p>语言:人与电脑交流的语言方式二.动态网页与静态网页区别?(面试题) 动态

常规html页面结构

一.创建页眉 <header role="banner"> 页眉包括网站标志.主导航和其他全站链接,甚至搜索框.也适合对页面深处的一组介绍性或导航性内容进行标记. 注意:role="banner"(横幅)地标角色改善可访问性 二.标记导航 <nav role="navigation"> <ul>无序链接列表</ul> 或 <ol>有序链接列表</ol> </nav>

任务七:实现常见的技术产品官网的页面结构及样式布局

任务目的 通过实现一个常见的技术产品官网,加深对于HTML,CSS的实战能力 学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变 任务描述 通过HTML及CSS实现设计稿 设计稿PSD文件(点击下载),效果如 效果图(点击打开) 设计稿是有一定宽度的,这个宽度为页面的最小宽度,也就是说,当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,但是当浏览器窗口宽度大于设计稿宽度时,页面部分内容的宽度应该保持和浏览器窗口宽度一致,具体哪些部分题目不做具体指明,看看大家的判断

【转】Html页面结构范例

原文地址:http://www.51testing.com/html/38/225738-220986.html · HTML · HEAD · LINK ... CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance. · SCRIPT. ... JavaSc