天道酬勤,学无止境

css

CSS borders not appearing

问题 我正在尝试设置导航菜单设计的样式以反映 timeanddate.com 上的样式,如下图所示: 为了创建颜色,他们在 CSS 中使用了一个简单的底部和左侧边框。 我正在尝试在我的网站沙箱 http://www.escapetech.com:8080 上为我的<li>标签添加边框。 我正在使用以下 CSS: .anylinkcss li { list-style-type: none; } .participate li { list-style-type: square; border-left-color: #fa514d; } #navigation_bar { height: 31px; list-style: none; width: 1000px; margin-top: 15px; } #navigation_bar li { float: left; padding-right: 35px; padding-left: 10px; margin: auto 0px; vertical-align: middle; } #anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 { position: absolute; line-height: 18px; z-index

2022-07-11 09:39:04    分类:技术分享    html   css

Jquery autocomplete suggestions - small font list

问题 <!DOCTYPE> <html> <head> <title>Auto Complete in JSP Java</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <STYLE TYPE="text/css" media="all"> .ui-autocomplete { position: absolute; cursor: default; height: 200px; overflow-y: scroll; overflow-x: hidden;} </STYLE> <script> $(function() { $("#names").autocomplete({ source: function(request, response) { $.ajax({ url: "searchName.jsp", type: "POST", dataType

2022-07-11 09:36:40    分类:技术分享    javascript   jquery   css   jquery-ui-autocomplete

how do I keep a nav bar at the top of the page?

问题 我正在尝试让我的导航栏保持在页面顶部,就像在 forbes.com 上一样 我知道我能做到 nav { position: fixed; top: 0; } 但是导航栏不在页面顶部,它位于徽标之后...但是当您向下滚动时,我希望导航栏粘在屏幕顶部.. 这是我的网站 回答1 nav { position: fixed; top: 0px; } 回答2 您可以像这样在 JQuery 中尝试: HTML: <div id="wrapper"> <header> <h1>Floater Navigation</h1> </header> <nav> <p>Navigation Content</p> </nav> <div id="content"> <p>Lorem Ipsum.</p> </div> </div> CSS: #wrapper { width:940px; margin: 0 auto; } header { text-align:center; padding:70px 0; } nav { background: #000000; height: 60px; width: 960px; margin-left: -10px; line-height:50px; position: relative; } #content { background: #fff

2022-07-11 09:33:36    分类:技术分享    html   css   navigation   fixed

Padding within inputs breaks width 100%

问题 好的,所以我们知道为对象设置填充会导致其宽度发生变化,即使它是显式设置的。 虽然人们可以争论这背后的逻辑,但它会导致某些元素出现一些问题。 在大多数情况下,您只需添加一个子元素并将填充添加到该元素而不是设置为 100% 的元素,但对于表单输入,这不是一个可能的步骤。 看看这个: body { font-size: 14px; margin: 0px; padding: 0px; } DIV.formfield { clear: both; margin: 0px; padding: 10px; } DIV.formlabel { margin-top: 20px; padding: 5px; font-weight: bold; text-align: left; } DIV.formvalue { background-color: #eee; border: 1px solid red; padding: 10px; margin: 0px; } DIV.formvalue.correct { border: 1px solid green; } textarea.textarea { width: 100%; min-height: 80px; } input.input { width: 100%; padding: 5px; } input.input2 {

2022-07-11 09:33:17    分类:技术分享    css   input   padding

How to prevent the click event using CSS?

问题 如何使用 CSS 防止点击事件? 我已经创建了表单页面,那么我需要防止仅使用 CSS 的点击事件吗? 我已经尝试过这个 css 属性,但没有奏效。 <div>Content</div> div { display: none; } 回答1 .noClick { pointer-events: none; }

2022-05-17 05:39:03    分类:技术分享    html   css

Angular2: Update all color assignments in CSS dynamically

问题 我有一个 Angular 2 应用程序,我想在其中实现用户从预定调色板列表中选择他们的颜色主题的能力。 当他们选择主题时,颜色、背景颜色等的所有相关实例都将更改为主题调色板中相应的新颜色。 有什么方法可以从 Angular 控制器实现这一点? 我知道您可以使用 [class.className] 或 [ngClass] 有条件地将类添加到特定元素,但显然在大型应用程序中必须单独更改每个属性的样式是不切实际的。 具体用例:(单击)附加到“更新主题”按钮的侦听器由用于更改 .css 文件中的 css 颜色值的控制器函数处理。 有没有人在 Angular2 中实现了动态/用户控制的主题/颜色? 关于如何解决这个问题的任何建议? 回答1 兄弟,Angular Material 团队开发了一个非常酷的功能。 https://github.com/angular/material2/blob/master/guides/theming.md 如果您想查看一个工作示例 https://material.angular.io/ 在导航栏中有一个主题选择器。

2022-05-17 05:29:30    分类:技术分享    css   angular   themes   angular2-template

Making the Cursor Disappear

问题 回答1 你的意思是鼠标光标消失了? 如果是这样,您可以使用 css 将任何 gif 用作鼠标光标,甚至是透明的。 因为形象,我想你会说德语? 如果您在此处回答了所有问题,请查看此处。 编辑:我想我用 JQuery 做了你想要的 - 快速而肮脏,虽然......用 IE6 和 FF 3 测试。在这里下载一个例子

2022-05-17 05:18:04    分类:技术分享    php   jquery   css   cursor

How can make/embed my own product display design in wooCommerce plugin

问题 我正在创建一个 wordpress 网站,我在其中使用 wooCommerce 产品插件。 我的问题是我想使用 woocommerce 制作自己的产品展示块设计,如何制作自己的产品展示设计并替换默认设置。 我已经搜索了很多来解决问题,但无法解决,请在这个问题上帮助我。 回答1 转到 woocommerce 插件文件夹。 在里面找到一个文件夹“模板”。 将此文件夹复制到您的主题文件夹并重命名文件夹“woocommerce”。 现在每个模板都在那里,您可以根据需要修改这些文件。 从您提供的屏幕截图中,我可以建议您编辑名为“content-product.php”的页面,该页面为您提供产品块的输出。 列表页面是“archive-product.php”。

2022-05-17 04:50:04    分类:技术分享    php   html   css   wordpress   woocommerce

fix elements to the bottom of a flex container

问题 我正在使用 flexbox 创建页面的一部分,并且我有 2 个按钮可以在其中一个 flexbox 项目中打开模式。 如果可能的话,我想将按钮像页脚一样固定在项目的底部。 我创建了一个 CodePen 来演示这个问题。 我尝试了几种解决方案,但似乎无法让按钮在底部对齐。 我对 HTML 和 CSS 比较陌生,所以我很可能错过了一些琐碎的事情。 #container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: center; margin-top: 20px; } .one { background-color: black; color: white; font-size: 30px; padding: 10px; width: 450px; flex-grow: 1; height: 600px; } .two { background-color: grey; color: white; font-size: 30px; padding: 10px; flex-grow: 1.2; width: 524px; height: 600px; } button {

2022-05-17 04:33:04    分类:技术分享    html   css   flexbox

Circular progress bar in angular 2

问题 我正在尝试在角度 2 中创建一个百分比加载器。加载器应该加载给定百分比的数量并且它应该是动态的。 HTML <div class="col-lg-3 col-md-3 bar"> <div class="c100 p50 small"> <span>50%</span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> <div class="textP"> <h3>Statistic 1</h3> </div> </div> 我用 50% 的 CSS 创建了一个,但它不是动态的。 当我更改百分比时,它仅加载前一个值 50%。 我是否必须使用 ngModel 或任何东西。 回答1 假设您有一个包含在父组件中的组件循环百分比加载器,例如, <circular-percent-loader [percent]="percent"></circular-percent-loader> 这里百分比是您的子组件的输入。在子组件中,您可以取这个并设置这样的百分比。我假设您从这个跨度中取 50%。 <div class="col-lg-3 col-md-3 bar"> <div class="c100 p50 small"> <span>{{percent}}</span>

2022-05-17 04:11:03    分类:技术分享    html   css   typescript   angular2-template