HTML/CSS(快速拨号)-6ren

HTML/CSS(快速拨号)

转载作者：太空宇宙更新时间：2023-11-03 18:10:31

我是 HTML/CSS 的初学者，只是在练习一些东西。我正在制作类似于 Google Chrome 快速拨号 2 的快速拨号。我只是有一些问题需要您的帮助。

这是它的代码。我现在想要的就是这个表盘，在这个 Picture 中概述要在左侧，不要居中。

ul.main{            
        text-align: center;     
}

这就是它居中的原因，但是如果我删除它，那么整个 ul 标签都会向左移动...我希望最终结果像那样Video Example

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Speed Dials Test</title>
    <style type="text/css">
        body{
            background-color: black;
            background-image: url(322423.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position-y: 15%;
        }


        ul.main{
            list-style-type: none;
            display: table;
            padding:0;          
            clear: both; 
            margin: 0 auto;
            text-align: center;
        }

        li.dial{
            width: 300px;
            height: 200px;
            display: inline-table;
            box-sizing: border-box;
            padding: 10px;
            outline:0;
            margin:0;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
        }

        li.dial a:hover{
            opacity: 0.75;
        }

        li.dial a{
            width: 100%;
            height: 100%;
            background-color: #BADAFF;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            padding: 10px;
            display: table-cell;
            text-decoration: none;
            color:#0000FF;
        }

        li.dial a:active{
            color:#0000FF;
        }

        .dial .site{
            font-size: 13px;
        }

        li.dial div.thumb{
            background-color: #fff;
            width: 100%;
            height: 90%;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            display: block;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

        li.dial div.site{
            background-color: transparent;
            width: 100%;
            height: 14%;
            display: block;
            padding-top: 3px;
            text-align: center;
        }



        @media only screen and (min-width : 150px) and (max-width : 1245px){
            ul.main{
                width: 1099px;
            }

            li.dial{
                width: 260px;
                height: 175px;
            }
        }

        @media only screen and (min-width : 150px) and (max-width : 1110px){
            ul.main{
                width: 978px;
            }

            li.dial{
                width: 230px;
                height: 152px;
            }
        }

        @media only screen and (min-width : 150px) and (max-width : 986px){
            ul.main{
                width: 843px;
            }

            li.dial{
                width: 200px;
                height: 132px;
            }
        }

        @media only screen and (min-width : 150px) and (max-width : 855px){
            ul.main{
                width: 750px;
            }

            li.dial{
                width: 160px;
                height: 110px;
            }

            @media only screen and (min-width : 150px) and (max-width : 760px){
            ul.main{
                width: 97%;
            }

            li.dial{
                width: 160px;
                height: 110px;
            }
        }

    </style>
</head>
<body>

    <ul class="main">
        <li class="dial">
            <a href="http://facebook.com" target="_self">
                <div class="thumb" style="background-image:url(http://i.imgur.com/yIeoHS5.png)"></div>
                <div class="site">Facebook</div>
            </a>
        </li>
        <li class="dial">
            <a href="http://google.com" target="_self">
                <div class="thumb" style="background-image: url(http://farm6.static.flickr.com/5221/5612548667_a9b09a2068_o.png)"></div>
                <div class="site">Google</div>
            </a>
        </li>
        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">Gmail.com</div>
            </a>
        </li>
        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">Yahoo</div>
            </a>
        </li>
        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">TheNewBoston</div>
            </a>
        </li>
        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">PHPacademy</div>
            </a>
        </li>
        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">Geo.saitebi.ge</div>
            </a>
        </li>
        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">W3Schools</div>
            </a>
        </li>

        <li class="dial">
            <a href="#">
                <div class="thumb" style="background-image: url(http://png-4.findicons.com/files/icons/2561/1st_mx_is_4c/256/speed_dial2.png)"></div>
                <div class="site">Seo.ge</div>
            </a>
        </li>
    </ul>

</body>
</html>

最佳答案

创建一个空的 div，类为 clean，值为 clear: both;此属性禁止换行。 both 从左右边缘同时取消环绕元素。当您需要移除包裹元素时，建议使用此值，但不知 Prop 体是哪一侧。或者仍然拒绝 text-align: center;

关于HTML/CSS(快速拨号)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23829270/

文章推荐： html - 在不使用人造列的情况下制作同样长的列

文章推荐： python - 在Python中定义列表的两种方式有什么区别？

文章推荐： python - 从 DF 中删除包含重复单词的短语(Pandas、Python3)

快速/更改循环中变量的名称
如何更改循环中变量的名称？比如 number1 、 number2 、 number3 、 number4 ？ var array = [2,4,6,8] func ap ( number1: Int
iOS延迟更改背景颜色(快速)
我想设置 View 的背景颜色并在一定延迟后将其更改为另一种颜色。这是我的尝试方式: print("setting color 1") self.view.backgroundColor = UICo
快速 session 在请求之间不持久
我在使用 express-session 时遇到问题。 session 数据不会在请求之间持续存在。正如您在下面的代码中看到的那样，/join 路由设置了一些 session 属性，但是当 /sur
快速 Steam 叶环
我试图从叶渲染器获得一个非常简单的结果，用于快速 Steam 的 for 循环。我正在上传叶文件 HTML，因为它不接受此处格式正确的代码 - 下面的pizza.swift代码- import
performance - 快速、简单的程序员编辑器
你们中有人有什么好的链接可以与我分享吗？我正在寻找一个 FAST 程序员编辑器，它可以非常快速地打开包含超过 100, 000 行代码的文件？我目前正在使用记事本自动取款机，打开一个 29000 行长
r - 快速、高效地循环数百万行并匹配列
我现在正在处理眼动追踪数据，因此拥有一个巨大的数据集(想想数百万行)，因此希望有一种快速的方法来完成此任务。这是它的简化版本。数据告诉您眼睛在每个时间点正在查看的位置以及我们正在查看的每个文件。 X
ios - 选择提示音-快速
我是新手，想为计时器或其他设备选择提示音。如何打开此列表，以选择其中一种声音？ Alert sound list 最佳答案您将无法在应用中使用系统声音。但是，您可以包括自己的声音文件，并将其显示
arrays - 将顺序字符串构建到数组中(快速)
我编写了以下代码来构建具有顺序字符串的数组。它的工作方式与我预期的一样，但我希望它能更快地运行。有没有更有效的方法在PowerShell中产生我想要的结果？我是PowerShell的新手，非常感谢
r - 快速、简洁地生成唯一矩阵行的有序频率计数的方法
我有一个包含一些非唯一行的矩阵，例如: x 尝试 y <- rle(apply(x, 1, paste, collapse = " ")) # y$lengths is the vector con
ios - 键盘打开时移动菜单(快速)
我的函数“keyboardWillShown”有问题。所以我想要的是菜单打开时，菜单正好出现在键盘上方。它可以在Iphone 8 plus，8、7、6上完美运行。但是，当我在模拟器上运行Iphone
ios - 第二次API调用后应用崩溃(快速)
我正在尝试通过Swift 5中的HTTP get方法从API提取数据。它在启动时成功加载了数据，但是当我刷新页面时，它说“索引超出范围”，这是因为数据是不再会在我的日志中读取，因此索引中没有任何内容。
ios - 将时间戳转换为其他时区(快速)
我想做什么: 从我的数据库中获取时间戳并将其转换为用户的时区。我的代码: let tryItNow = "\(model.timestampName)" let format = D
ios - 查找字符串的宽度(快速)
给定字体名称和字体大小，如何查找字符串的宽度(CGFloat)？ (目标是将UIView的宽度设置为足以容纳字符串的宽度。) 我有两个字符串:一个重复“1”，重复36次，另一个重复“M”，重复36次。
ios - JSON解析(快速)
我正在尝试解析此JSON ["Items": ( { AccountBalance = 0; AlphabetType = 3; Description = "\U0631\U
ios - 根据自动布局更改UILabel中的字体大小(快速)
我在UINavigationBar内放置了一个UILabel。我想根据navigationBar的高度增加该标签的字体大小。当navigationBar很大时，我希望字体大小更大；当滚动并缩小nav
ios - 消除数字中的多个小数点(快速)
我想将用户输入限制为仅有效数字并使用以下内容: func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, rep
C# - 图像比较(快速)
目前我有一个包含超过 100.000 张图像的数据库，它们大小不一或类似，但我想为我的公司制作以下内容: 我插入/上传一张图片，系统返回最有可能相同的图片。我不知道使用什么算法，但它需要快速。我可以预
ios - 按下按钮时发生的操作 - 快速
在我的 swift 项目中，我有一个按钮，我想在标签上打印按下该按钮的时间。如何解决这个问题？最佳答案添加到DHEERAJ的答案中，您只需在func press(sender: UIButton
arrays - 我想从解析加载数组数据(快速)
我必须发表评论，尝试在解析中导入数组。然而，有一个问题。当我尝试从 Parse 加载数组时，我的输出是 ("Blah","Blah","Blah")这是一个元组...而不是一个数组 TT... 如何
swift - 简化嵌套 if 快速
我的应用程序有一个名为 MyDevice 的类，我用它来与硬件通信。该硬件是可选的，实例变量也是可选的: var theDevice:MyDevice = nil 然后，在应用程序中，我必须初始化设备

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML/CSS(快速拨号)