随笔分类 - 【00】_响应式网页布局
网站通常分为：
1页眉（独占一整行，一个div），
2导航栏（独占一整行，一个div），—重点
3内容（响应式布局主要在这里实现各种分辨率下的不同布局）,—重点
4页脚（独占一整行）。
摘要：1、简单的响应式网站布局 <!-- 实现方式：div浮动+（断点）媒体查询。 --> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-sca
阅读全文
摘要：<!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>页脚</title> <style> * { box-sizing:
阅读全文
摘要：（1）网格布局 <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>网格布局</title> <style> *{ bo
阅读全文
摘要：（1）列布局 <!-- 适用：IE11以上包括11 优点：弹性框布局模块，无需使用浮动或定位。 例如：无需知道弹性项目的高度，只要设置弹性容器在x轴和y轴上的居中对齐弹性项目，即可实现弹性项目的完美居中。 --> <!DOCTYPE html> <head> <meta charset="utf-8
阅读全文
摘要：（1）网格视图 <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>网格视图</title> <style> *{ bo
阅读全文
摘要：（1）基础下拉菜单 <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>基础下拉菜单</title> <style> /
阅读全文
摘要：一、垂直导航栏 （1）基础版 <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>垂直导航栏</title> <styl
阅读全文