一点点小随笔:min-width

简介:

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            html,
            body {
                width: 100%;
                font-size: 16px;
                min-width: 1305px;
                overflow: hidden;
            }

            ul {
                list-style: none;
                width: 100%;
                /*border: 1px solid red;*/
                background: gray;
            }

            li {
                margin: 11px;
                text-align: center;
                display: inline-block;
                width: 200px;
                height: 20px;
                border: 1px solid red;
            }

            li:nth-child(5n+1) {
                margin-left: 111px;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $('ul li').eq(0).css('background', 'green');
            })
        </script>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body>

</html>
目录
相关文章
|
4月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
138 3
|
5月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
344 8
|
8月前
|
UED 开发者 容器
【CSDN创作优化2】内嵌图片 `<img>` 标签`height`和`width`属性
【CSDN创作优化2】内嵌图片 `<img>` 标签`height`和`width`属性
62 2
|
8月前
|
机器学习/深度学习 算法 搜索推荐
【C++修行之道】竞赛常用库函数(sort,min和max函数,min_element和max_element、nth_element)
【C++修行之道】竞赛常用库函数(sort,min和max函数,min_element和max_element、nth_element)
|
前端开发
前端学习案例2-三栏布局之position
前端学习案例2-三栏布局之position
88 0
前端学习案例2-三栏布局之position
|
前端开发
前端学习案例4-三栏布局之table 原创
前端学习案例4-三栏布局之table 原创
83 0
前端学习案例4-三栏布局之table 原创
|
前端开发 Linux 程序员
「CSS」知识点笔记:position
「CSS」知识点笔记:position
115 0
「CSS」知识点笔记:position
|
前端开发 容器
#yyds干货盘点# 前端歌谣的刷题之路-第一百四十一题-flex-grid-区域
#yyds干货盘点# 前端歌谣的刷题之路-第一百四十一题-flex-grid-区域
66 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百四十一题-flex-grid-区域