Next, let's create a simple responsive web page using HTML/CSS.
Before learning, we can first take a look at the effect:https://www.example.com/try/demo_source/tryhtmlcss_website.htm
CSS Code
* {
box-sizing: border-box;
}
/*Body styles*/
body {
font-family: Arial;
margin: 0;
}
/*Heading*/
.header {
padding: 80px;
text-align: center;
background: #1A6BBC;
color: white;
}
/*Increase heading font size*/
.header h1 {
font-size: 40px;
}
/*Navigation*/
.navbar {
overflow: hidden;
background-color: #333;
}
/*Navigation bar styles*/
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/*Right-side links*/
.navbar a.right {
float: right;
}
/*Mouse hover link color*/
.navbar a:hover {
background-color: #ddd;
color: black;
}
/*Column container*/
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/*Create two columns*/
/*Sidebar*/
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/*Main content area*/
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/*Test image*/
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/*Footer*/
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/*Responsive layout - When the screen device width is less than 700px, make the two columns stack vertically.*/
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*Responsive layout - When the screen device width is less than 400px, make the navigation items stack vertically.*/
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Try it »
HTML Code
<div class="header">
<h1>Rookie Tutorial web page test example</h1>
<p>Create a page.</p>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>My Photos:</h5>
<div class="fakeimg" style="height:200px;">Insert image here</div>
<p>About me..</p>
<h3>More content</h3>
<p>More of my content</p>
<div class="fakeimg" style="height:60px;">Insert image here</div><br>
<div class="fakeimg" style="height:60px;">Insert image here</div><br>
<div class="fakeimg" style="height:60px;">Insert image here</div>
</div>
<div class="main">
<h2>Title</h2>
<h5>Subtitle</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Rookie Tutorial, what you learn is not only technology, but also dreams!!! Rookie Tutorial, what you learn is not only technology, but also dreams!!! Rookie Tutorial, what you learn is not only technology, but also dreams!!!</p>
<br>
<h2>Title</h2>
<h5>Subtitle</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Rookie Tutorial, what you learn is not only technology, but also dreams!!! Rookie Tutorial, what you learn is not only technology, but also dreams!!! Rookie Tutorial, what you learn is not only technology, but also dreams!!!</p>
</div>
</div>
<div class="footer">
<h2>Footer content</h2>
</div>
Try it »