教你如何用 HTML + CSS 来设计 响应式 的网站布局
先来看一下成品：
正常分辨率大于1000px（100%）：
分辨率小于1000px，网页内容排版发生变化：
分辨率小于500px时，导航栏发生变化：
css代码：
*{box-sizing: border-box;}.header{background-color:white ;/* width:100%; */padding:20px 0;text-align:center;}.row1::after{display: table;clear:both;content:"";}.ul1{overflow:hidden;background-color: rgb(83, 78, 78);list-style-type: none;margin:0;padding:0;}.ul1 li{float:left;}.ul1 li a{text-decoration: none;color:white;display:block;padding:1em;}.ul1 li a:hover{background-color: rgb(180, 175, 175);color:black;}.main1{float:left;width:74.99%;/* background-color: ; */margin-top: 10px;}.side1{float:left;width:24.99%;/* background-color: ; */margin-top: 10px;padding-left:10px;}.neirong1{padding:1em;margin-top: 10px;background-color: white;}.img1{width:100%;padding:40px 20px;background-color: gray;height:100px;border:1px solid red;}.footer{text-align: center;/* width:100%; */padding:20px 0;margin-top:10px;background-color: lightblue;}@media screen and (max-width:1000px){.main1,.side1{width:100%;padding:0;}}@media screen and (max-width:500px){.ul1 li{width:100%;text-align: center;}}html代码：
<div style="padding:20px 20px;background-color: lightgray;overflow:hidden;"><div class="header"><h1>My Website</h1><p>Resize the browser window to see the effect.</p></div><!-- <div class="row1"> --><ul class="ul1"><li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li><li style="float:right"><a href="">Link</a></li></ul><!-- </div> --><div class="row1"><div class="main1"><div class="neirong1"><h2>TITLE HEADING</h2><p><b>Title description, Dec 7, 2017</b></p><div class="img1">Image</div><p>Some text</p><p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></div><div class="neirong1"><h2>TITLE HEADING</h2><p><b>Title description, Sep 2, 2017</b></p><div class="img1">Image</div><p>Some text</p><p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></div></div><div class="side1"><div class="neirong1"><h2>About Me</h2><div class="img1">Image</div><p>Some text about me in culpa qui officia deserunt mollit anim..</p></div><div class="neirong1"><h2>Popular Post</h2><div class="img1">Image</div><div class="img1">Image</div><div class="img1">Image</div></div><div class="neirong1"><h2>Follow Me</h2><p>Some text...</p></div></div></div><div class="footer"><h2>Footer</h2></div></div>教你如何用 HTML + CSS 来设计 响应式 的网站布局相关推荐
- HTML5期末大作业：游戏网站设计——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述
HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- 网页设计成品DW静态网页Html5响应式css3 ——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述
HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- [css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
- 个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)
HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- 网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
- HTML5期末大作业：网上花店网站设计——响应式的鲜花预订网电商模板(21页) HTML+CSS+JavaScript
HTML5期末大作业:网上花店网站设计--响应式的鲜花预订网电商模板(21页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 ...
- html 响应式 同一行,一行CSS实现各种响应式元素 – Fluidity
一行CSS实现各种响应式元素 – Fluidity 3月 31, 2014 评论 Sponsor FLUIDITY是一个极微小的CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像.文 ...
- 自适应网页设计/响应式Web设计 （Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
最新文章
- Python之多线程
- CallByName的一些缺陷
- Modular_exponentiation模幂运算
- DHTMLX 前端框架 建立你的一个应用程序教程(二)--设置布局
- leveldb中为什么L 0层中每个sst文件中key的范围都是有重叠的？
- java多线程【线程安全问题】
- 安卓actionbar上的搜索按钮点击没反应如何解决
- Linux的ping用python,python与linux中的非特权ping IPPROTO_ICMP
- R从网页抓取到文本分析全教程：影评的获取与分析
- 火狐浏览器怎么打不开网页
- c语言象棋图片大全精美,【图片】象棋C语言【中国新象棋吧】_百度贴吧
- 解决Python包下载慢问题
- 在linux下使用360随身wifi 2 | 李凡希的blog,在Linux下使用“360随身WiFi 2” | 李凡希的Blog...
- visio粘贴excel图表
- cbrt c语音_如何在C语言中实现功能重载？
- 106、七氟丙烷灭火系统的灭火机理
- 联想Y450 MAC系统SD读卡器驱动
- java抽象方法声明_java抽象类和抽象方法
- PHP最新恶搞好友之伪视频通话模板源码
- 服务器改远程端口后怎么连接,如何修改服务器远程桌面连接端口