程序设计 css

2

@ font-face src：local-如果用户已经拥有本地字体，如何使用？

什么是正确的使用方式，@font-face以便浏览器不会在用户已经拥有字体的情况下下载它？我正在使用@ font-face定义DejaVu，它已经安装在我的系统（Linux）上。Firefox不会下载该字体，但是Chromium每次都会下载它！我的CSS代码基于字体松鼠，该问题如下所示： @font-face { font-family: 'DejaVu Serif'; src: url('DejaVuSerif-webfont.eot'); src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg'); font-weight: normal; font-style: normal; } /* ... @font-face definitions for italic and bold omitted ... */ @font-face { font-family: 'DejaVu Serif'; src: url('DejaVuSerif-BoldItalic-webfont.eot'); src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), …

80 css font-face

6

如何使用CSS将表格放在页面中心？

我正在使用以下代码。如何使用CSS将此表格放在页面中心？ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>

80 html css html-table center

9

我可以使用CSS按比例缩放其高度吗？

是否可以在CSS中设置任何变量，例如希望div高度始终为div的一半，而div的屏幕尺寸宽度以百分比为单位？ <div class="ss"></div> CSS： .ss { width:30%; height: half of the width; } 30％的宽度随屏幕分辨率缩放

80 html css

6

通过Bootstrap4订购列

我想在台式机和移动设备上以不同的方式订购3列。目前，我的围裙看起来像这样： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 运行代码段隐藏结果展开摘要在移动视图中，我想要以下输出： 1-3-2 不幸的是，我不知道如何使用Bootstrap 4中的.col-md-push-*and.col-md-pull-*类解决此问题。

80 css bootstrap-4 grid

13

Nginx无法加载CSS文件

我最近决定从Apache2切换到Nginx。我在CentOS服务器上安装了Nginx并设置了基本配置。当我尝试在浏览器（FF / Chrome）中加载网站时，我注意到未加载CSS文件。我检查了错误控制台，并看到以下消息： Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css". 我检查了Nginx的配置，一切似乎都很好： http { include /etc/nginx/mime.types; .......... } 在/etc/nginx/mime.types中正确设置了css文件的mime类型。 text/css css; 一切似乎都配置正确，但我的css文件仍未加载。我没有解释另一件事值得一提。最初，我使用epel存储库安装了Nginx，并且得到了一个旧版本：0.8 ...在我看来，我的问题是该版本中的错误，因此我卸载了0.8版本，将nginx存储库添加到yum，然后安装了最新版本：1.0。 14。我以为新版本可以解决我的问题，但不幸的是，新版本无法解决我的想法。感谢您的帮助。配置文件： /etc/nginx/nginx.conf user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http …

80 css nginx mime

5

是否可以通过浏览器开发人员工具查看浏览器正在使用哪个srcset图像

我一直在尝试srcset通过浏览器开发人员工具查看我的浏览器正在使用哪个图像，但是除了使用“网络”标签来查看它无法获取的图像之外，我一直在尝试。使用网络选项卡通常会很好，但是有时我注意到它会获取两个不同大小的图像版本，如果一个断点位于600，另一个断点位于900，并且浏览器当前宽度为750px，则会发生这种情况。（我已经在Chrome和FireFox上都尝试过此操作，在某些情况下，Chrome可能会拉下这两个图像，但是FireFox似乎只会拉下一个）我想知道的原因是我是否对它缩放两个图像srcset剂量感兴趣，并在缩放浏览器窗口时自动在它们之间交换？这不能通过检查元素来判断，它只是给出了元素的原始html img，而不是img srcset其使用的实际选项。

80 html css responsive-design developer-tools srcset

8

使用HTML数据属性设置CSS背景图片网址

我计划为朋友建立一个自定义的图片库，我确切地知道我将如何制作HTML，但是CSS遇到了一个小问题。（如果可能，我希望页面样式不依赖jQuery）我的问题是：CSS Data-Attribute中的HTML Background-image 我将这种格式用于html缩略图： <div class="thumb" data-image-src="images/img.jpg"></div> 我认为CSS应该看起来像这样： .thumb { width:150px; height:150px; background-position:center center; overflow:hidden; border:1px solid black; background-image: attr(data-image-src);/*This is the question piece*/ } 我的目标是把data-image-src从div.thumb我的HTML文件，并使用它的每一个div.thumb（或多个）background-image在我的CSS文件来源。这是一支Codepen笔，以便获得我所寻找的动态示例：http : //codepen.io/thestevekelzer/pen/rEDJv

80 css background-image custom-data-attribute

7

CSS的波浪形状

我正在尝试使用CSS重新创建此图像：我不需要重复。这是我开始的，但是只有一条直线： #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id="wave"></div> 运行代码段隐藏结果展开摘要

80 css css-shapes

3

Flexbox：如何使div无需包装即可填充容器宽度的100％？

我正在将必须使用的旧inline-block的网格模型更新为我创建的较新的Flexbox。除了一点点障碍之外，一切都运转良好，这已成为一个大问题：我有一堆CSS控制的滑块；因此，有一个宽度为100％的包含包装器，而内部是另一个div：其宽度也是100％，但将其white-space设置为nowrap。使用inline-block，这意味着内部div（也设置为100％宽度）将不受父母约束的约束，并缠绕到下一行-他们将继续进行操作。这正是我想要的。但是，我根本无法使它与flexbox一起使用。供参考，这是一张图片：作为参考，这是使用inline-block的jsFiddle：http : //jsfiddle.net/5zzvqx4b/ ...并且无法与Flexbox配合使用：http : //jsfiddle.net/5zzvqx4b/1/ 我已经试过各种与变化flex，flex-basis，flex-wrap，flex-grow，等。但对我的生活，我不能得到这个工作。请注意，我可以通过将.boxcontainerwidth设置为来强制它以一种怪异的，不灵活的方式执行我想要的操作200%。这适用于单个示例，但是在某些情况下，我事先不知道会有多少个子框，如果可能的话，我宁愿不对每个元素采用内联样式。

79 css flexbox

14

具有CSS3滤镜模糊的已定义边缘

我用这段代码模糊了一些图像 img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } 图像的边缘也会变得模糊。在保持边缘清晰的同时，是否可以使图像模糊？像插图模糊之类的？

79 css

7

Firefox中未显示边框，表格，位置：边框相对于tbody或背景色位于边框

考虑以下HTML： <html> <head> <style> TABLE.data TD.priceCell { background-color: #EEE; text-align: center; color: #000; } div.datagrid table { border-collapse: collapse; } div.datagrid table tbody { position: relative; } </style> </head> <body> <div id="contents" class="datagrid"> <table class="data" id="tableHeader"> <thead> <tr class="fixed-row"> <th>Product</th> <th class="HeaderBlueWeekDay">Price</th> <th class="HeaderBlueWeekDay">Discount</th> </tr> </thead> <tbody> <tr style="font-style: italic;"> …

79 css firefox border

3

将样式应用于第一行的单元格

它应该很简单，但我无法弄清楚。我有这样一张桌子： <table class="category_table"> <tr><td> blabla 1</td><td> blabla 2 </td></tr> <tr><td> blabla 3 </td><td> blabla 4 </td></tr> </table> 我想使td第一tr行的标签具有vertical-align。但不是第二行。 .category_table td{ vertical-align:top; }

79 html css css-selectors html-table

9

根据元素的高度和宽度转换X和Y百分比值？

将元素Y轴平移50％将使它向下移动其自身高度的50％，而不是我期望的父高度的50％。如何告诉翻译元素将其翻译百分比作为父元素的基础？还是我不明白某事？ http://jsfiddle.net/4wqEm/2/

79 css translate percentage translate3d

5

如何选择具有特定类别的元素？

我的理解是，使用element.class应该允许分配给类的特定元素接收与该类其余部分不同的“样式”。这不是关于是否应该使用它的问题，而是我正在尝试了解此选择器是如何工作的。通过查看互联网上的大量示例，我相信语法是正确的，并且不明白为什么它不起作用。这是一个例子： CSS： h2 { color: red; } .myClass { color: green; } h2.myClass { color: blue; } HTML： <h2>This header should be RED to match the h2 element selector</h2> <div class="myClass"> <h1>This header should be GREEN to match the class selector</h1> <h2>This header should be BLUE to match the …

79 html css syntax css-selectors

10

使用jquery / ajax刷新/重新加载Div中的内容

我想在单击按钮时重新加载div。我不想重新加载整个页面。这是我的代码： HTML： <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" /> </div> 单击<input type="button" id="getCameraSerialNumbers" value="Capture Again">按钮后，<div id="list">....</div>应该重新加载而不加载或刷新整个页面。以下是我尝试过但无法正常工作的Jquery：- $("#getCameraSerialNumbers").click(function () { $("#step1Content").load(); }); 请提出建议。这是我页面上的DIV，其中包含一些产品的图片和序列号...这将是第一次加载时来自数据库的信息。但是，如果用户遇到问题，他将单击“再次捕获”按钮“ <input type="button" id="getCameraSerialNumbers" value="Capture Again">”，这将再次加载这些信息。 Div的HTML代码：- <div id="step1Content" role="Step1ShowCameraCaptures" class="marginLeft"> <form> <h1>Camera …

79 javascript jquery html css ajax

Questions tagged «css»