当前位置:网站首页 > 创业 > 正文

HTML-响应式基本用法

0 张子豪 张子豪 2025-10-11 16:42 1

在网站建造中,响应式网站时经常用到的,今天我们就来熟悉一下什么是响应式,好比一个正常的网页,若是是打开的网页尺寸宽度是1200px,当设置响应式后,设置为达到800px时,网站发生转变。下面我们就以一个简单的图形变换作为参考。

东西/原料

  • HTML
  • Dreamweaver

方式/步调

  1. 1

    打开Dreamweaver软件,新建一个HTML文件

  2. 2

    在body标签中成立一个盒标签div

  3. 3

    成立CSS样式,添加对div的一些润色,如图将图形设置为一个矩形,填充红色

  4. 4

    将文件保留后,在浏览器中预览,结果如图所示

  5. 5

    然后添加响应式代码,固心猿意马搭配  @media(max-width:800){}

    小括号内添加前提,最年夜或最小 ;年夜括号内添加转换后结果属性

  6. 6

    这里将响应后发生的转变是:宽度降低到400px;高度为300px;颜色转为蓝色;如图所示设置

  7. 7

    然后保留在浏览器中查看结果,默认时是红色矩形,当拖动浏览器窗口到800px时,发生转变,转为蓝色小矩形。

注重事项

  • 若是此经验对您有帮忙,请为我投票加存眷,感谢大师的撑持^_^

来源:百闻(微信/QQ号:9397569),转载请保留出处和链接!


本文链接:https://www.ibaiwen.com/web/226981.html

张子豪

张子豪

TA很懒,啥都没写...

@百闻娱乐 本站部分内容转自互联网,若有侵权等问题请及时与本站联系,我们将在第一时间删除处理。 | 粤ICP备2024343649号 | (地图