一个小页面示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-header">
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div>
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left">
                Logo
            </div>
            <div style="float: right">
                <div style="height: 50px;width: 100px;background-color: #dddddd"></div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div style="background-color: red;">
         <div style="width: 980px;margin: 0 auto;">
             asdfsdf
         </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/qiangayz/p/8712174.html

时间: 2024-11-02 03:26:46

一个小页面示例的相关文章

Angularjs做的一个小页面

<!DOCTYPE html><html lang="en" ng-app="todolist"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src=

如何使用微信小程序开发一个弹窗页面(附源码)

在小程序的开发过程中,我们肯定会遇到开发一个弹窗页面的情况,我们先看一下小程序官方对于弹窗页面的解释.API的接口如下 从官方给出的代码示例来看,想当简单,就像一个asert,并不能看出弹窗的真实需求.所以今天HTML51.COM就写了一个弹窗小程序教程,供大家学习参考.首页我们先看一下动态的效果图: 我们首先看到的是首页代码: <view class="copyright"> <view class="copyright_item">Cop

用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量.<s:iterator>标签有一个value属性,用来存放在Action类的方法中存数据的list集合,还有一个id,好像是说指定集合的索引的意思,就是给list集合遍历出来的每个对象加上一个数字标签,反正我是这么理解的,没用过.还有一个很重要,就是var变量,我在s:iterator按ctr

开发一个微笑小程序示例

一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”.3.会获得一个AppID,记录AppID,后面创建项目时会用到. 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”.即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号.本教程默认注册帐号.体验都是使用管理员微信

制作一个小黄鸭转圈跳舞的页面。

我们来制作一个小黄鸭转圈跳舞的页面. 分析一下 1.分析一下这个页面,要完成这些效果,一共需要3步: 把鸭子都放到一个盒子当中 在盒子里,把每个鸭子的位置摆好 让盒子旋转 2.让鸭子在盒子中的位置摆好,需要怎么做: 先让鸭子站在圆心的位置(需要先了解父相子绝定位方式) 沿一个方向移动一个半径的距离(3d) 每个鸭子旋转一个角度,让鸭子均匀的分布一圈 开始写代码 要用到的知识包括几个HTML标签和一部分的css知识. 先把图片放到页面里边. 先来在页面中添加一个img标签,将小黄鸭跳舞的gif图放

Python 练习册,每天一个小程序

Python 练习册,每天一个小程序 说明: Python 练习册,每天一个小程序.注:将 Python 换成其他语言,大多数题目也适用 不会出现诸如「打印九九乘法表」.「打印水仙花」之类的题目 点此链接,会看到每个题目的代码, 欢迎大家 Pull Request 出题目,贴代码(Gist.Blog皆可):-) 本文本文由@史江歌([email protected] QQ:499065469)根据互联网资料收集整理而成,感谢互联网,感谢各位的分享.鸣谢!本文会不断更新. Talk is chea

Python练习册,每天一个小程序

Python练习册,每天一个小程序 精选评论关注该公众号可参与评论 写评论 加载中 以上评论由公众帐号筛选后显示 Python练习册,每天一个小程序 提交 我的评论 已评论 Python练习册,每天一个小程序 2014-12-15 程序猿 说明: ●Python 练习册,每天一个小程序.注:将 Python 换成其他语言,大多数题目也试用 ●不会出现诸如「打印九九乘法表」.「打印水仙花」之类的题目 ●欢迎大家 Pull Request 出题目,贴代码(Gist.Blog皆可):-) ●访问链接h

Android笔记2——开发前奏2工程目录介绍和一个小应用

转载请注明http://www.cnblogs.com/devtrees/p/4405519.html 一.创建第一个应用HelloWorld (一)创建步骤: 1.New出一个Android Application Project 三种方式 1): 2): 3): 2.会出现下图的窗口: 分别是:应用名:给用户看的 工程名:开发工具中显示的项目名 包名: 客户端中设置->应用->应用列表中显示的名字 兼容的最低版本: 兼容的最高版本: 开发基于的版本:(一般将兼容的最高版本和开发所基于的版本

先定一个小目标,自己封装个ajax

你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 你是否发现fetch好像比ajax好用那么一点 你是否想过自己封装个ajax.... 纯前端写得久了,便想折腾点事情.比如先定一个小目标,年前自己写个类jquery轻量级库.... 那么就从自己封装一个ajax切入吧,首先我整理的一个思维导图,一目了然 解析参数数据 通常我们的请求后面会有一些参数,