How to make a responsive news list using HTML, CSS and jQuery-JS Tutorial-php.cn

How to make a responsive news list using HTML, CSS and jQuery

PHPz

Release： 2023-10-26 09:40:56

Original

1083 people have browsed it

How to make a responsive news list using HTML, CSS and jQuery, specific code examples required

In the context of modern social media and news applications, responsive Design has become an essential skill for designers and developers. By using HTML, CSS and jQuery, we can make a responsive news list so that the news is presented in the best way on the screens of different devices. This article explains how to use these techniques to achieve this.

First, we need to create an HTML page and organize the elements with a basic structure. Here is an example HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式新闻列表</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <h1>新闻列表</h1>
        <ul class="news-list">
            <li>
                <div class="news-item">
                    <h2>新闻标题</h2>
                    <p>新闻内容</p>
                </div>
            </li>
            <li>
                <div class="news-item">
                    <h2>新闻标题</h2>
                    <p>新闻内容</p>
                </div>
            </li>
            <li>
                <div class="news-item">
                    <h2>新闻标题</h2>
                    <p>新闻内容</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Copy after login

In the above code, we have created a <ul> element that contains the news list. Each piece of news is contained in the <li> element, and the title and content of the news are contained in the <h2> and  elements respectively. middle.

Next, we need to create a CSS file to define the style of the news list. Here is a sample CSS code:

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-item {
    background-color: #f2f2f2;
    padding: 10px;
    margin-bottom: 20px;
}

.news-item h2 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px;
}

.news-item p {
    font-size: 16px;
    margin-top: 0;
}

Copy after login

In the above code, we use some basic CSS properties to define the style of the news list. We add a background color, padding, and margins to the <div> element that contains each news item, so that it appears as a box on the page.

Finally, we need to create a JavaScript file to use jQuery to implement the responsive nature of the news list. Here is an example JavaScript code:

$(document).ready(function() {
    adjustLayout();

    $(window).resize(function() {
        adjustLayout();
    });

    function adjustLayout() {
        var containerWidth = $('.container').width();
        var newsItemWidth = $('.news-item').outerWidth(true);
        var numColumns = Math.floor(containerWidth / newsItemWidth);

        $('.news-item').css('width', (containerWidth / numColumns) + 'px');
    }
});

Copy after login

In the above code, we use the $(document).ready() function to define the actions to be performed when the page is loaded. In this function, we first call the adjustLayout() function to adjust the layout of the news items. Then, we use the $(window).resize() function to detect window size changes, and call the adjustLayout() function again to readjust the layout.

In the adjustLayout() function, we first get the width of the container and the width of the news item. We then calculate the number of columns that can fit and set the width of each news item based on the number of columns.

By using the above HTML, CSS and jQuery code, we can implement a responsive news list. No matter what device users use to access our website, the news list will be presented to them in the best possible way.

Of course, this is just a simple example. In a real project, you may need more complex layouts and more elaborate responsive designs. However, these codes can give you a starting point and help you understand how to use HTML, CSS, and jQuery to make a responsive news list. Good luck!

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