HTML5--应用网页模板

因为刚开始写博客,只想着把知识点记录在这,也想给你们一些参考,在布局上有些没有思考太多;回过头来看,实在是不忍直视,对不住之前阅读的100 ,既然昨天的事无法挽回,那就从现在开始从新整改吧!也希望大家看了,能对你们有所帮助
1.先给大家看看效果图,好让大家有点兴趣

2.大家再来看代码,是不是有点干劲了。

<!doctype html>
<meta charset='utf-8' content='text/html' />
<head>
<title>应用网页模板</title>
<style content='text/css'>
*  {margin:0px;padding:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} 
html,body  {width:100%;background:#fff;}  
body {min-width:100%;}
header,section,nav,article,aside,footer {display:block;text-align:center;text-shadow:1px 1px 1px #444;font-size:1.2em;}
header {background-color:hsla(200,10%,20%,0.9);min-height:100px;min-width:100%;padding:10px 20px;}
footer {background-color:hsla(250,50%,80%,0.9);min-width:100%;padding:1%;min-height:60px;}
section {min-width:100%;min-height:400px;}
section nav {background-color:hsla(300,60%,20%,.9);padding:1%;width:220px;}
section article {background-color:hsla(120,50%,50%,.9);padding:1%;}
section aside {background-color:hsla(20,80%,80%,.9);padding:1%;width:220px;} 
body {display:flex;display:-ms-flex;-ms-flex-flow:column wrap;flex-flow:column wrap;}
section {display:-ms-flex;display:flex;-ms-flex:1;flex:1;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:stretch;align-items:stretch;}
nav {flex:1;-ms-flex-order:0;order:0;}
article {-ms-flex:1;flex:1;-ms-flex-order:2;order:2;}
aside {flex:1;-ms-flex-order:3;order:3;} 
</style></head><body>
<header>页眉区域</header>
<section><article>1.主体内容区域</article><nav>2.导航栏</nav><aside>3.侧边栏</aside>
</section>
<footer>页脚区域</footer>
</body>
3.下面就是不同代码的解释,多研究研究,其实就没什么难的,都是从简单开始演变的。
1.-moz-box;    老版本:firefox 19-
2.-webkit-box;  老版本:ios 6-,safari 3.1-3.6
3.-ms-flexbox;  混合版本:IE10
4.-webkit-flex;  新版本:Chrome
5.flex;      标准规范Opera 12.1,Firefox 20 box-sizing:border-box; 并排放置2个带边框的框
display:block;     让对象成为块级元素
background-color:hsla(220,50%,50%,.9)1.h: number; 色调 number对应相应的颜色2.s:0-100%; 饱和度3.l: 0-100%; 亮度4.a: 0-1;   alpha透明度
padding:10px 10px 10px 10px;内边距:顺时针 上 右 下 左
margin:10px 10px 10px 10px;外边距:顺时针 上 右 下 左
flex是flex-grow\flex-shrink\flex-basis的缩写1.默认值0 1 auto2.flex:none;1.flex-grow:0;   扩展空间2.flex-shrink:0;  收缩空间3.flex-basis:auto; 伸缩比率3.flex:auto;1.flex-grow:1;2.flex-shrink:1;3.flex-basis:auto;4.flex:1;1.flex-grow:1;2.flex-shrink:1;3.flex-basis:0%;
在伸缩和布局中设置长度和宽度:min-width;min-height;
orient: horizontal; 水平排列div元素的子元素vertical;  垂直排列
direction:normal   伸缩和对象的子元素正常排列reverse   反向排列
lines:multiple;   当一横排元素满的时候,换行显示single;    当一横排元素满的时候,不换行显示
flow:     设置或检索弹性盒模型对象的子元素排列方式row;    x,主轴方向排列column;     y,横轴方向排列wrap;    换行nowrap;   不换行
align:      对齐stretch;  伸展
ordinal-group:规定框中的子元素的显示次序0;     默认,值越低越靠前
order:    设置或检索弹性盒模型对象的子元素出现顺序0;     默认,值越低越靠前  注释:
html    <!--some-->
css     /*some*/
javascrip //
python  #

 

本文转载于:猿2048➯https://www.mk2048.com/blog/blog.php?id=11k2k1j&title=HTML5--应用网页模板

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业集成模式简介

在此博客文章中&#xff0c;我们将介绍一些企业集成模式。 这些是旨在解决集成挑战的已知设计模式。 阅读此书后&#xff0c;您将可以设计集成解决方案。 EIP&#xff08;简而言之&#xff09;是已知的设计模式&#xff0c;可为应用程序集成过程中遇到的问题/问题提供解决方案…

手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】

转载自&#xff1a;http://www.ljwit.com/archives/php/278.html 说明&#xff1a; Postman不多介绍&#xff0c;是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。本文主要介绍下安装过程。 本文使用的是解压文件直接进行安装。是比较快速有效的安装方式&#xff0c;…

C语言博客作业--数据类型

题目1&#xff1a;7-4 打印菱形图案 1. 本题PTA提交列表 2. 设计思路 1.定义变量i,j,k,n;且声明i为要打印的行数&#xff0c;j是控制输出打印空格和星星&#xff0c;n是菱形为菱形的高 2.输入n 3.i1&#xff0c;j1 4.先打印上半部分&#xff0c;第一行到n/21行&#xff0c;输出…

信息隐藏将txt文件合并到jpg文件中_使用Kali Linux在图像内隐藏机密消息—可在任何Linux发行版使用

欢迎回到“Esn技术社区”&#xff01;今天&#xff0c;我们将演示如何使用Steghide(一种可在Kali Linux上使用的流行隐写工具)在图像内隐藏消息。在计算机科学中&#xff0c;将信息隐藏在文件内(例如图像&#xff0c;文档&#xff0c;程序&#xff0c;有用数据&#xff0c;消息…

Spring 3.1,Cloud Foundry和本地开发

这篇文章将帮助您在Cloud Foundry上使用MongoDB构建Spring 3.1 Web应用程序。 除了推动Cloud Foundry之外&#xff0c;您还可以使用MongoDB实例在本地环境中进行开发。 目标 此博客发布的目标是在本地构建应用程序&#xff0c;然后发布到本地Cloud Foundry实例。 我们将利用C…

Spring MVC 简述:从MVC框架普遍关注的问题说起

任何一个完备的MVC框架都需要解决Web开发过程中的一些共性的问题&#xff0c;比如请求的收集与分发、数据前后台流转与转换&#xff0c;当前最流行的SpringMVC和Struts2也不例外。本文首先概述MVC模式的分层思想与MVC框架普遍关注的问题&#xff0c;并以此为契机结合SpringMVC的…

java方法调用机制_Java方法调用机制 - osc_bkdv2it5的个人空间 - OSCHINA - 中文开源技术交流社区...

最近在编程时&#xff0c;修改方法传入对象的对象引用&#xff0c;并没有将修改反映到调用方法中。奇怪为什么结果没有变化&#xff0c;原因是遗忘了Java对象引用和内存分配机制。本文介绍3个点&#xff1a;① 该问题举例说明② 简要阐述Java内存区域③ 介绍JVM中方法调用的机制…

CSS染色图标(图片)

之前一直以为用background引入的图标无法染色&#xff08;非字体图标&#xff09;&#xff0c;现在才知道有黑科技可以用&#xff0c;就是利用drop-shadow。 代码示例 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"&…

eclipse安装java web插件

1 查看eclipse版本 找到eclipse的安装目录&#xff0c;找到readme文件&#xff0c;打开其中的html文件&#xff0c;我的是4.6版本的,代号是oxygen 2 安装 打开eclipse,点击help-Install new software-单击add&#xff0c;在弹出窗口中输入网址&#xff1a; http://download.ecl…

python正则表达式指南_Python正则表达式指南

1. 正则表达式基础1.1. 简单介绍正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具&#xff0c;拥有自己独特的语法以及一个独立的处理引擎&#xff0c;效率上可能不如str自带的方法&#xff0c;但功能十分强大。得益于这一点&#xff0c;在提供了正则表达…

Google Guava EventBus用于事件编程

在任何软件应用程序中都是如此&#xff0c;有些对象需要共享信息才能完成工作。 在Java应用程序中&#xff0c;实现信息共享的一种方法是拥有事件侦听器&#xff0c;其唯一目的是在发生所需事件时采取某些措施。 在大多数情况下&#xff0c;此过程有效&#xff0c;并且最有经验…

system类

package system.cn; /** system类的方法 都是静态方法&#xff0c;可以直接用类名直接调用* 常用的方法&#xff1a;* static long currentTimeMillis() 返回以毫秒为单位的当前时间。 static void exit(int status) 终止当前正在运行的 Java 虚拟机。 static void gc…

c await和java_blog/java/test/awaitility.zh.md at master · c-rainstorm/blog · GitHub

javaAtomicInteger atomic new AtomicInteger(0);// Do some async stuff that eventually updates the atomic integerawait().untilAtomic(atomic, equalTo(1));等待一个 AtomicBoolean 更简单&#xff1a;javaAtomicBoolean atomic new AtomicBoolean(false);// Do some a…

实现输入框小数多 自动进位展示,编辑时实际值不变

今天遇到个业务需求&#xff0c;要求输入框&#xff0c;输入数字的小数位数可以很多位&#xff0c;但移开后显示&#xff0c;只显示小数点后两位 &#xff08;四舍五入&#xff09;&#xff0c;当要编辑的时候&#xff0c;展现其原来的输入数据。 闲话不多说&#xff0c;当时也…

使用Jasper Reports以Java创建报告

上周&#xff0c;我试图使用Jasper创建报告。 在这篇文章中&#xff0c;我将记录一些资源和链接&#xff0c;以便对任何寻求类似信息的人都有用。 我将介绍Jasper报告&#xff0c;示例和Dynamic Jasper的生命周期。 Jasper Reports是世界上最受欢迎的开源报告引擎。 它完全用…

CentOS7 安装NodeJS

一、切换目录到/usr/local/src 命令行&#xff1a;cd /usr/local/src 二、下载node.js&#xff08;我这里下载的是二进制的源码&#xff09; 命令行&#xff1a; wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz 图片&#xff1a; 三、解压压缩包 命令行&am…

CSS3基础2(变形与动画)

<!DOCTYPE html5><html lang"en"><head> <meta charset"UTF-8"> <title>CSS3基础知识&#xff08;动画&#xff09;</title> <style> /*div{*/ /*width: 150px;*/ /*hei…

java对hashmap迭代_Java:通过HashMap迭代,这样更有效率?

第二个选项肯定更有效&#xff0c;因为在第一个选项中只进行一次查找&#xff0c;次数为n次。但是&#xff0c;没有什么比尝试它更好&#xff0c;当你可以。所以这里 –(不完美&#xff0c;但足够好验证假设和我的机器)public static void main(String args[]) {Map map new H…

html-edm(邮件营销)编写规则

最近写了一个edm邮件 以前没有接触过 使用的是很老的html页面编写规则 只能用table标签 在此记录一下edm编写的一些规则 个人参考的是这两个网址&#xff0c;转载一下 http://www.zcool.com.cn/article/ZMTM5MDgw.html https://www.cnblogs.com/lhweb15/p/6404626.html …

ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试

1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的&#xff0c;根据官方文档说明新建网站后还是需要引用官方SDK的源码&#xff0c; 在这里直接使用网上一位朋友的用.NET Standard 2.0 进行实现了支…