您的位置：首页 > Web前端 > HTML

HTML Responsive Web Page

2017-07-12 08:27 190 查看

注：参考网站 https://www.w3schools.com

HTML Responsive Web Page

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Responsive web page</title>
<meta lang="en" charset="utf-8">
</head>
<body>
<h1>Responsive Web Design</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>

style.css

h1 {
text-align:center;
background-color:black;
padding:5px;
color:white;
}
.city {
height:200px;
max-width:410px;
border:1px solid grey;
margin:10px;
padding:5px;
overflow:hidden;
float:left;  /*关键是这一行代码，使得该代码能够在不同的设备上自适应的显示*/
}

显示结果为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html web responsive

相关文章推荐

新的分享

章节导航