CSS一个较为完整的页面布局_可以根据页面屏幕大小调整布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{box-sizing: border-box;}
8 body{
9 font-family: Arial;
10 padding: 10px;
11 background: #f1f1f1;
12 }
13 /*头部标题*/
14 .header{
15 padding: 30px;
16 text-align: center;
17 background: white;
18 }
19 .header h1{font-size: 50px;}
20 /*导航条*/
21 .topnav{
22 overflow: hidden;
23 background-color: #333;
24 }
25 /*导航条链接*/
26 .topnav a{
27 float: left;
28 display: block;
29 color: #f2f2f2;
30 text-align: center;
31 padding: 14px 16px;
32 text-decoration: none;
33 }
34 /*链接颜色修改*/
35 .topnav a:hover{
36 background-color: #ddd;
37 color: black;
38 }
39 /*创建两列*/
40 /*左侧栏*/
41 .leftcolumn{
42 float: left;
43 width: 75%;
44 }
45 /*右侧栏*/
46 .rightcolumn{
47 float: left;
48 width: 25%;
49 }
50 /*图像部分*/
51 .fakeimg{
52 background-color: #aaa;
53 width: 100%;
54 padding: 20px;
55 }
56 /*文章卡片效果*/
57 .card{
58 background-color: white;
59 padding: 20px;
60 margin-top: 20px;
61 }
62 /*列后面清除浮动*/
63 .row:after{
64 content: "";
65 display: table;
66 clear: both;
67 }
68 /*底部*/
69 .footer{
70 padding: 20px;
71 text-align: center;
72 background: #ddd;
73 margin-top: 20px;
74 }
75 /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
76 @media screen and (max-width: 800px) {
77 .leftcolumn,.rightcolumn{
78 width: 100%;
79 padding: 0;
80 }
81 }
82 /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
83 @media screen and (max-width: 400px){
84 .topnav a{
85 float: none;
86 width: 100%;
87 }
88 }
89 </style>
90 </head>
91 <body>
92 <div class="header">
93 <h1>我的网页</h1>
94 <p>重置浏览器大小查看效果</p>
95 </div>
96
97 <div class="topnav">
98 <a href="#">首页</a>
99 <a href="#">新闻</a>
100 <a href="#">图片</a>
101 <a href="#" style="float: right">关于</a>
102 </div>
103
104 <div class="row">
105 <div class="leftcolumn">
106 <div class="card">
107 <h2>文章标题</h2>
108 <h5>2020年4月17日</h5>
109 <div class="fakeimg" style="height: 200px;">图片</div>
110 <p>一些文本...</p>
111 <p>这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架</p>
112 </div>
113 <div class="card">
114 <h2>文章标题</h2>
115 <h5>2020年4月17日</h5>
116 <div class="fakeimg" style="height: 200px;">图片</div>
117 <p>一些文本...</p>
118 <p>这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架</p>
119 </div>
120 </div>
121 <div class="rightcolumn">
122 <div class="card">
123 <h2>关于我</h2>
124 <div class="fakeimg" style="height: 100px;">图片</div>
125 <p>关于我的一些信息...</p>
126 </div>
127 <div class="card">
128 <h2>热门文章</h2>
129 <div class="fakeimg">图片</div>
130 <div class="fakeimg">图片</div>
131 <div class="fakeimg">图片</div>
132 </div>
133 <div class="card">
134 <h2>关注我</h2>
135 <p>一些文本...</p>
136 </div>
137 </div>
138 </div>
139 <div class="footer">
140 <h2>底部区域</h2>
141 </div>
142 </body>
143 </html>
CSS一个较为完整的页面布局_可以根据页面屏幕大小调整布局的更多相关文章
- Android 布局 中实现适应屏幕大小及组件滚动
要实现如图的布局: 这是在eclipse可视化窗口中的截图,但实际运行在Android设备上可能出现的问题有: (1):当编辑图1中的最后一个EditText时,输入法的编辑界面会把底部的Button ...
- 有了这套flex页面布局方案，页面什么的，那都不是事。
一.CSS3弹性盒子弹性盒子是CSS3的一种新布局模式.CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局 ...
- 【浅谈html5 响应式布局之自动适应屏幕宽度】
允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=”viewport” content=”w ...
- css命名为何不推荐使用下划线_
一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符,这也是在写JS时惯用的写法. 用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让 ...
- css布局 - 工作中常见的两栏布局案例及分析
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...
- 《转载黑马教程》HTML&&CSS讲义0，，包含教程_仅供参考
今日内容 1. web概念概述 2. HTML web概念概述 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务 ...
- 你不知道的css各类布局（四）之响应式布局
响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...
- 三行代码接入，社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。
(转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...
- 使用一个HttpModule拦截Http请求，来检测页面刷新(F5或正常的请求)
在Web Application中,有个问题就是:“我怎么来判断一个http请求到底是通过按F5刷新的请求还是正常的提交请求?” 相信了解ASP.NET的人知道我在说什么,会有同感,而且这其实不是一个 ...
随机推荐
- Ubuntu16.04 oh_my_zsh 安装与配置
参考文章 Ubuntu上使终端显示Git分支(oh-my-zsh) oh-my-zsh的安装与基本配置 Ubuntu 下安装oh-my-zsh 前言 之前学习Laravel的时候,经常要切换git分支 ...
- 在Windows环境下构建Lua 入门
在Windows环境下构建Lua 一:准备软件 1.C-compiler(TDM GCC) http://tdm-gcc.tdragon.net/download 2.Lua源代码 http:// ...
- 阐述final、finally、finalize的区别?
- final:修饰符(关键字)有三种用法:如果一个类被声明为final,意味着它不能再派生出新的子类,即不能被继承,因此它和abstract是反义词.将变量声明为final,可以保证它们在使用中不被 ...
- 简述 synchronized 和 java.util.concurrent.locks.Lock 的异同？
Lock 是 Java 5 以后引入的新的 API,和关键字 synchronized 相比主要相同点: Lock 能完成 synchronized 所实现的所有功能:主要不同点:Lock 有比 sy ...
- 您对 Mike Cohn 的测试金字塔了解多少？
Mike Cohn 提供了一个名为 Test Pyramid 的模型.这描述了软件开发所需的自 动化测试类型. 根据金字塔,第一层的测试数量应该最高.在服务层,测试次数应小于单元测试 级别,但应大于端 ...
- 为什么 redis 需要把所有数据放到内存中？
答Redis 为了达到最快的读写速度将数据都读到内存中,并通过异步的方式将数 据写入磁盘.所以 redis 具有快速和数据持久化的特征.如果不将数据放在内存中, 磁盘 I/O 速度为严重影响 redi ...
- C语言形参和实参的区别（非常详细）
如果把函数比喻成一台机器,那么参数就是原材料,返回值就是最终产品:从一定程度上讲,函数的作用就是根据不同的参数产生不同的返回值.这一节我们先来讲解C语言函数的参数,下一节再讲解C语言函数的返回值.C语 ...
- 复习——高级语法对象原型，es5新增语法
今天的开始进入了js的高级语法 我马上也要复习完了,之前学到闭包递归,就回去复习去了,复都复习这么久而且,复习的过程真的比学知识的过程难熬的多,只不过终于要复习完了,再来点es6的新语法马上就要步入v ...
- 使用 jfinal + beetl + bootstrap 实现商城展示及管理系统
使用 jfinal+beetl 在线商品展示系统 使用 git clone https://github.com/zhouchong741/jfinal-demo.git 使用 IntelliJ ID ...
- 2022DASCTF X SU 三月春季挑战赛 ezpop
复现一道dactf的ezpop <?php class crow { public $v1; public $v2; function eval() { echo new $this->v ...