学习微信小程序之css16常见布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常见布局</title>
    <style>
        *{
            padding: 0;margin: 0;
        }
        .header,.nav,.main,.footer{
            background-color: silver;
            border: 1px solid black;
            margin-bottom: 10px;
        }
        .header{

            height: 100px;
        }
        .nav,.main{
            height: 200px;
        }
        .nav{
            width: 200px;
            float: left;
        }
        .main{
            margin-left: 202px;

        }
        .footer{
            height: 50px;
        }
    </style>
</head>
<body>
<div class="header">
    header
</div>
<div class="nav">
    nav
</div>
 <div class="main">
     main
 </div>
<div class="footer">
    foooter
</div>
</body>
</html>

时间: 2024-07-28 17:37:31

学习微信小程序之css16常见布局的相关文章

微信小程序:原生热布局终将改变世界

最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小程序的消息,很多人(技术的和非技术的)就跟打了鸡血似的,估计现在已经鸡血告急了! 我也看了网上的一些关于微信小程序的文章,估计那帮家伙连微信小程序是什么都没搞清楚,就在那里一本正经地胡说八道.好吧,我就通过本文让大家了解一些什么是微信小程序,以及微信小程序到底能为我们带来什么. 关于微信小程序的误解和讨论已经太多了.这里就说一些主要的. 1.  微信小程序

与大家分享学习微信小程序开发的一些心得

因为我也才开始学习微信小程序不久,下文也是现在的一时之言,大家有不同的想法也可以在评论里共同交流讨论,希望文章能给大家提供一点点帮助. 最近接触到了一些前端框架,像Vue.js,React,发现小程序的框架体系跟它们很像.它们都推崇模块化,组件化,数据与元素绑定.这样没有繁琐的DOM操作,组件之间完全分离,样式和逻辑全都封装在模板里,别人写好的组件可以拿来直接用,这会明显地提高我们前端开发的速度. 另外,微信小程序界面小,样式好调.这意味着,我们从纸面原型到能跑的APP的实现将会是很快的,所以我

微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助

微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序资源大多是整理自github,如果可以,希望大家能够给github上的原作者一颗star,感谢原作者的无私奉献. 这里整理的是资源的原帖子,下载链接也在帖子里,当然本人也只体验了部分demo,有兴趣的同学可以都下载试试. 下载地址: 仿微信聊天,朋友圈小程序源码wepy框架开发的小程序商城源码,功能

微信小程序直播系统开发框架布局

使用布局页面 ASP.NET Web Pages - 页面布局 在之前的内容中,您已看到在多个网页中引用相同的内容是很简单的. 创建一致外观的另一种方法是使用布局网页.布局网页包含网页的结构,而不是内容.当网页(内容页)链接到布局页时,它会根据布局页(模板)来显示. 布局页类似普通的网页,但是会在引用内容页的位置调用 @RenderBody() 方法. 每个内容页必须以 Layout 指令开头. 在代码中是这样的: 布局网页: <html> <body> <p>This

学习微信小程序系列(1) 如何注册微信小程序

目录 前言 什么是微信小程序 如何注册微信小程序 前言 去年,有一段时间,因为工作的需要,需要进行微信小程序的开发工作.刚开始接触的时候,说真的.真的5脸懵逼.工作总是这么无奈,硬生生的逼着自己从不想学,不想写.到最后,逼着自己完成了整个小程序的前后端的开发工作.又过了一段时间,再翻开回自己曾经写的代码.简直是不堪入目.于是,我又认真的学习了一下有关微信小程序的相关的基础础.ps:趁着自己脑子还行,强行mark自己是如何学习小程序的心路历程.希望,对初学者有所帮助. 什么是微信小程序 孔子都说,

学习微信小程序的系列(3) 如何优雅的使用微信开发者工具

目录 前言 一.编辑功能 二.调试功能 三.编译功能 四.前后台功能 五.缓存功能 六.详情功能 前言 如何优雅的使用微信开发者工具,提到优雅,我相信大家都会在自己的脑海里脑补了很多画面吧.当然了,根本就不能的事情了.好了~我们言归正传.回到我们的题面,如何才能做到"优雅"呢?孙子兵法有云:"知彼知己,方百战不殆". 一.编辑功能 微信开发者工具的界面可以用于代码编写.代码调试.项目预览与上传.编译.前后台切换.缓存数据清理以及关闭项目.如图所示: 在项目文件中,可

学习微信小程序之css11内外边距集合

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 400px; height: 600px; background-color: #b3d4fc; } .box strong{ /*对于行内元素来说,上下的内外边距不支持设置,

学习微信小程序之css17clearfix原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clearfix原理</title> <style> *{ padding:0; margin: 0; } .header,.aside,.main,.footer{ border: 1px solid yellow; background-co

学习微信小程序之css4设置颜色,单位表示,字体样式

颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距