HTML 响应式设计

不管用什么设备,你的网页应该看起来很好,并且容易使用.

什么是响应式网页设计?

响应式设计就是适应所有的显示设备(台式电脑,平板电脑和手机).

响应式的网页设计就是用CSS和HTML调整大小,隐藏,缩小,扩大,或移动内容来适应显示屏.

创建属于你自己的响应页面

自己创建自适应页面:

例子

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
} 
</style>
</head>
<body>

<h1自适应网页</h1>

<div class="city">
  <h2>上海</h2>
  <p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市,
国家中心城市,超大城市,
沪杭甬大湾区核心城市,国际经济、金融、贸易、航运、科技创新中心 [1-2]  ,
首批沿海开放城市.
上海地处长江入海口,是长江经济带的龙头城市、G60科创走廊核心城市.
隔东中国海与日本九州岛相望,南濒杭州湾,北、西与江苏、浙江两省相接</p>
</div>

<div class="city">
  <h2>成都</h2>
  <p>成都,简称蓉,别称蓉城、锦城,是四川省省会,西南地区唯一一个副省级市,特大城市,
国家重要的高新技术产业基地、
商贸物流中心和综合交通枢纽,西部地区重要的中心城市. [1-3]  2017年,
全市下辖20个区（市）县和成都高新区、
天府新区成都直管区, [4]  面积1.46万平方公里,常住人口1600余万人,
GDP超1.3万亿元, [5]  城镇化率达70.6%.</p> 
</div>

<div class="city">
  <h2>达州</h2>
  <p>达州是四川省下辖的地级市,位于四川省东部,自东汉建县至今已有1900多年的历史,
历为该地区州、郡、府、县所在地.
达州幅员面积16591平方公里,辖2个市辖区（通川区、达川区）、
4个县（宣汉县、开江县、大竹县、渠县）、代管1个县级市（万源市）,
另附加一个经济开发区,共685.23万人.</p>
</div>

</body>
</html>

用w3.css库

另一个方法是创建一个响应的库,像w3.css

用w3.css开发网站很轻松,并且同时适应台式电脑,笔记本电脑,平板电脑和手机:

W3.CSS Demo

自适应页面!

上海

上海,简称“沪”或“申”,是中国共产党的诞生地.

上海市总面积6340平方公里,辖16个市辖区,属亚热带湿润季风气候.

成都

成都,简称蓉,别称蓉城、锦城,是四川省省会.

成都位于四川盆地西部,成都平原腹地,境内地势平坦、河网纵横、物产丰富、农业发达,属亚热带季风性湿润气候.

达州

达州是四川省下辖的地级市,位于四川省东部.

达州市是四川省人口大市、农业大市、资源富市、工业重镇、交通枢纽和革命老区.

例子

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.21xrx.com/public/css/w3.css">
<body>
 <div class="w3-container w3-orange">
                    <h1>W3.CSS Demo</h1>
                    <p>自适应页面!</p>
                </div>

                <div class="w3-row-padding">

                    <div class="w3-third">
                        <h2>上海</h2>
                        <p>上海,简称“沪”或“申”,是中国共产党的诞生地.</p>
                        <p>上海市总面积6340平方公里,辖16个市辖区,
属亚热带湿润季风气候.</p>
                    </div>

                    <div class="w3-third">
                        <h2>成都</h2>
                        <p>成都,简称蓉,别称蓉城、锦城,是四川省省会.</p>
                        <p>成都位于四川盆地西部,成都平原腹地,境内地势平坦、
河网纵横、物产丰富、农业发达,属亚热带季风性湿润气候.</p>
                    </div>

                    <div class="w3-third">
                        <h2>达州</h2>
                        <p>达州是四川省下辖的地级市,位于四川省东部.</p>
                        <p>达州市是四川省人口大市、农业大市、资源富市、
工业重镇、交通枢纽和革命老区.</p>
                    </div>
                </div>
</body>
</html>

想学习更多的w3.css,请看我们的w3.css教程

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索