响应式网格视图css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    *{
        box-sizing:border-box;
    }
.header {
    border: 1px solid red;
    padding: 15px;
}
.menu {
    width: 25%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.main {
    width: 75%;
    float:left;
    padding: 15px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>
时间: 2024-08-01 21:39:22

响应式网格视图css的相关文章

任务八——响应式网格(栅格化)布局之问题总结

题目请看:任务八:响应式网格(栅格化)布局 一:要求是每个元素之间的间距均为20px,首先间距的实现有两种方法:    方法1. <div class="container"> <div class="col-sm-4 col-xs-6">4-6</div> . . . . . . </div> container设置box-sizing:border-box:width:100%:padding:10px:每个div

响应式网格(栅格化)布局总结

任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项 网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

(作业)百度前端技术学院 任务八:响应式网格(栅格化)布局

百度前端技术学院 任务八:响应式网格(栅格化)布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px;

0075 移动开发选择和技术解决方案:单独、响应式、normalize.css、border-box、移动端特殊样式

4.1移动端主流方案 1.单独制作移动端页面(主流) 通常情况下,网址域名前面加 m(mobile)可以打开移动端.通过判断设备,如果是移动设备打开,则跳到移动端页面. 也就是说,PC端和移动端为两套网站,pc端是pc端的样式,移动端再写一套,专门针对移动端适配的一套网站. 京东pc端.移动端: 2.响应式页面兼容移动端(其次) 响应式网站:即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配. 4.2 移动端技术解决方案 1.移动端浏览器兼容问题 移动端浏览器基本以 webkit 内

任务八:响应式网格(栅格化)布局

任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项 网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

响应式开发 纯CSS实现隐藏菜单栏

首先,需要在页头引入相应的CSS文件 <link media="(min-width: 800px)" rel="stylesheet" href="css/main.css"> <link media="(max-width: 768px)" rel="stylesheet" href="css/mobile.css"> 在 main.css中将要隐藏的菜单设置

IFE-8笔记 响应式网格布局

//当屏幕大于769px @media screen and (min-width: 769px){} //当屏幕小于769px @media screen and (max-width: 768px){}//calc自动计算 (百分比空格(+-*X)空格20px) width: calc(50% - 20px);

Html 响应式 Web

网格视图 很多网页都是基于网格设计的,这说明网页是按列来布局的. 使用网格视图有助于我们设计网页.这让我们向网页添加元素变的更简单. 响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩. viewport viewport 是用户网页的可视区域.手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的

响应式设计的核心CSS技术Media(媒体查询器)

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie--><meta name="viewport" content="width=device-width, initial-scale=1"><!--得到媒体查询屏幕宽度,缩放比例--> 准备