Home >Web Front-end >HTML Tutorial >How to create a card layout page using HTML and CSS
How to create a card layout page using HTML and CSS
- WBOYOriginal
- 2023-10-27 12:30:111013browse
How to create a card layout page using HTML and CSS
In web design, card layout has become a very popular design trend. It displays information in the form of cards, making the page look clean, intuitive, and easy to navigate. In this article, I will introduce you to how to use HTML and CSS to create a simple card layout page, and provide specific code examples.
Step 1: Create the HTML structure
First, we need to create the basic structure of HTML. The following is a simple sample code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡片式布局页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<img src="image1.jpg" alt="图片1">
<h2>卡片标题1</h2>
<p>卡片正文内容1</p>
</div>
<div class="card">
<img src="image2.jpg" alt="图片2">
<h2>卡片标题2</h2>
<p>卡片正文内容2</p>
</div>
<div class="card">
<img src="image3.jpg" alt="图片3">
<h2>卡片标题3</h2>
<p>卡片正文内容3</p>
</div>
</div>
</body>
</html>In the above code, we create a div container named "container" to wrap the card. Each card consists of a div element with class "card", which contains an image, a title and a text.
Step 2: Write CSS styles
Next, we need to add styles to the card. The following is a simple CSS code example:
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: 300px;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card img {
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
}
.card h2 {
font-size: 24px;
margin-bottom: 10px;
}
.card p {
font-size: 16px;
}In the above code, we use flex layout to make the card automatically wrap in the horizontal direction. Each card has a width of 300px, margin and padding of 20px, a solid 1px border with rounded corners, centered text, and a shadow effect.
The image uses 100% width and sets an adaptive height. The font sizes for the title and body text are 24px and 16px respectively.
Step 3: Save the file and preview
Save the above HTML code as a file named "index.html" and save the CSS code as a file named "style.css". Make sure the html files and css files are in the same folder, and place the image files (image1.jpg, image2.jpg, and image3.jpg) in that folder as well.
Then, open the "index.html" file in the browser to preview the card layout page.
Summary
Through the above steps, we successfully created a simple card layout page using HTML and CSS. By flexibly using CSS styles, we can adjust the layout and appearance of the card as needed.
Of course, the above example is just a simple example, you can modify and expand it according to your actual needs. I hope this article can be helpful to you, and I wish you better results in card layout!
The above is the detailed content of How to create a card layout page using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!