html css网页设计（如何用一简单的CSS制作响应式HTML网页）

本文目录

• 如何用一简单的CSS制作响应式HTML网页
• 1.HTML语言和CSS样式表在网页设计中有很重要作用，它们各自解决的技术问

如何用一简单的CSS制作响应式HTML网页

建议展开阅读

新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......

三个部分[Viewport][网格视图][媒体查询]

1.先在head里面设置Viewport

《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》

用户可以通过平移和缩放来看网页的不同部分。

2.很多响应式都基于网格视图设计

响应式网格视图通常是 12 列，宽度为100%，在网页自动伸缩

比如CSS里面写

* {    box-sizing: border-box;}[class*=“col-“] {    float: left;    padding: 15px;}.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}

这样即可在html写

《div class=“row“》《div class=“col-3“》《ul》《li》标题1《/li》《li》标题2《/li》《li》标题3《/li》《li》标题4《/li》《/ul》《/div》《div class=“col-9“》《h1》2333333《/h1》《p》2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333《/p》《p》2333333333333333333333333333333333323333333333《/p》《/div》

达到简单的响应式效果[拖拽浏览器大小查看]

图片响应式方法

div {width: 100%;height: 400px;background-image: url(’url’);background-repeat: no-repeat;background-size: contain;border: 1px solid red;}

background-size 属性设置为 “contain“, 图片比例会自动缩放。

3.媒体查询主要用于针对不同的媒体类型定义不同的样式

比如我在电脑显示图片1,但是在手机显示的是图片2

详细可以私信我

1.HTML语言和CSS样式表在网页设计中有很重要作用，它们各自解决的技术问

网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS，比如你用DW的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个.style1的红色代码，在《style》《/style》之间不知道你注意过没有，这就是CSS,这样讲的话你应该能理解html和CSS的区别了吧。CSS的名称就叫“层叠样式表”,从字面也就能理解了。

网页