How to create a responsive news website layout using HTML and CSS-HTML Tutorial-php.cn

How to create a responsive news website layout using HTML and CSS

WBOY

Release： 2023-10-20 16:25:58

Original

1441 people have browsed it

How to create a responsive news website layout using HTML and CSS

How to use HTML and CSS to create a responsive news website layout

In the modern Internet era, website responsive layout has become a focus of designers and developers . This layout allows the website to display optimally on different devices and screen sizes. This article will explain how to use HTML and CSS to create a responsive news website layout, and provide some specific code examples.

1. HTML Structure

Before you start creating the layout, you first need to consider the overall structure and content of the website. News websites usually include a top navigation bar, header, content area, and footer. Here we use the following HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>响应式新闻网站</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">科技</a></li>
            </ul>
        </nav>
    </header>
    <section id="content">
        <article>
            <h2>新闻标题</h2>
            <p>新闻内容</p>
        </article>
        <article>
            <h2>新闻标题</h2>
            <p>新闻内容</p>
        </article>
    </section>
    <footer>
        <p>版权所有 &copy; 2021 新闻网站</p>
    </footer>
</body>
</html>

Copy after login

2. CSS style

Next we use CSS to control the style of the website so that it presents a responsive layout. We use media queries to automatically adjust styles based on screen size.

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
}

/* 顶部导航栏样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 10px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    display: inline;
    margin-right: 10px;
}
nav a {
    color: #fff;
    text-decoration: none;
}

/* 内容区域样式 */
#content {
    margin: 20px;
}

/* 文章样式 */
article {
    margin-bottom: 20px;
}
article h2 {
    margin-top: 0;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

Copy after login

3. Responsive layout

Now that we have created the structure and style of the website, we will use media queries to implement responsive layout. We will make the navigation bar appear vertically and hide the header when the screen width is less than 768px.

/* 响应式布局 - 小屏幕 */
@media only screen and (max-width: 768px) {
    header nav {
        display: block;
    }
    header nav ul {
        text-align: center;
    }
    header nav li {
        display: block;
        margin: 10px 0;
    }
    #content {
        margin: 10px;
    }
}

Copy after login

The above code will make the website present a vertical navigation bar and compact layout on small screen devices.

Summary

Through the introduction of this article, we learned how to use HTML and CSS to create a simple responsive news website layout. By using media queries, we can automatically adjust the style of the website based on different devices and make it look best on different screen sizes. This is just a simple example, you can customize and extend this layout to suit your needs and style.

I hope this article is helpful to you and I wish you success in responsive website design!

The above is the detailed content of How to create a responsive news website layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!