小编VXp*_*VXp的帖子

CSS中的@import和链接之间的区别

我正在学习一些CSS来调整我的项目模板.我遇到了这个问题,并没有在网上找到明确的答案.在CSS中使用@import或链接有区别吗?

使用@import

<style>@import url(Path To stylesheet.css)</style>
Run Code Online (Sandbox Code Playgroud)

使用链接

<link rel="stylesheet" href="Path To stylesheet.css">
Run Code Online (Sandbox Code Playgroud)

最好的方法是什么?为什么?谢谢!

css import hyperlink

108
推荐指数
4
解决办法
4万
查看次数

<table>,带有固定的<thead>和可滚动的<tbody>

我通过互联网查看了这里的问题和文章,但还没有找到满足我要求的解决方案.所以现在在2017年,是否有一种优雅的方式来实现<table>:

  1. 用html + css编写(没有js)
  2. 有固定的标题(不可滚动;不粘)
  3. 具有可滚动性<tbody>(滚动条可能始终可见)
  4. 标题和正文将正确处理调整大小并且不会使<thead>列和<tbody>列的对齐混乱
  5. 不会使用嵌套表或单独的表作为标题

html css html-table scrollbar fixed-header-tables

16
推荐指数
3
解决办法
3万
查看次数

具有固定页眉和页脚以及可滚动内容的Flexbox

我正在努力使Flexbox设计工作.我不是HTML/css专家.:(

我有一个固定页眉和页脚的Flexbox设计和内容占据了页面的其余可用空间.

当我将数据放入比该可用空间更长的内容区域时,内容将滚动.但我希望实现另一件事.

我想在内容区域中有几个div(彼此之下),每个div应该与内容区域一样高(即使内容很小),所以我在内容区域内有一种分页.

有几天我尝试了很多并且阅读了很多但却无法使用它.如何在可滚动内容区域内创建div占据整个空间(高度)?

html css css3 flexbox

10
推荐指数
1
解决办法
9158
查看次数

我的 CSS 过渡有问题,它在第一次运行时不起作用

我是 CSS 新手,我的过渡代码有问题,它只在我第一次单击它后才起作用,第一次单击它时,它会立即更改而没有效果( transition )。

这是我的代码可以帮助我(解释),谢谢。

这是我的 CSS 代码:

.holder {
  width: 400px;
  height: 400px;
  margin: auto;
  background-color: red;
  overflow: hidden;
  text-align: center;
}

.image-holder {
  width: 1200px;
  height: 400px;
  background-color: yellow;
  clear: both;
  position: relative;
  -o-transition: 5s;
  transition: 5s;
}

.button-holder {
  position: relative;
  top: -20px;
}

.button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: brown;
}

.slider-image {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

#change1:target~.image-holder {
  right: 0;
}

#change2:target~.image-holder {
  right: …
Run Code Online (Sandbox Code Playgroud)

html css css-transitions

8
推荐指数
1
解决办法
2228
查看次数

CSS:如何隐藏文件输入但保留文件名?

我想隐藏文件输入“选择文件”按钮,但我想保留文件名。我怎样才能做到这一点?

在此输入图像描述

<input
  name="upload"
  id="upload-input"
  placeholder="Select a file"
  ref="fileInput"
  type="file"
  required>
Run Code Online (Sandbox Code Playgroud)

html css

7
推荐指数
1
解决办法
4950
查看次数

加入 3 个表 Oracle SQL

我在下面列出了 3 个表:

表_A:

order_number | header_id
        123  | 80001
Run Code Online (Sandbox Code Playgroud)

表_B

   header_id | line_id | quantity
       80001 | 10001   | 1
       80001 | 10002   | 3
       80001 | 10003   | 5
Run Code Online (Sandbox Code Playgroud)

表_C

   header_id | line_id | hold_price_id | released_flag
       80001 |   10001 | 2001          | Y
       80001 |   10002 | 2002          | Y
       80001 |   10003 | 2003          | N
Run Code Online (Sandbox Code Playgroud)

我写了一个查询,如下所示:

SELECT A.order_number, A.header_id, B.line_id, B.quantity, C.hold_price_id, C.released_flag
FROM Table_A a,
     Table_B b,
     Table_C c
WHERE a.header_id = b.header_id
AND …
Run Code Online (Sandbox Code Playgroud)

sql oracle join

5
推荐指数
2
解决办法
5万
查看次数

如何使h1标签以其实际宽度居中

我需要使 h1 标签居中,还需要在其周围制作边框。为了防止占用更多宽度,我给出了display: inline-block 但标签没有响应text-align: center

h1 {
  text-align: center;
  border: 1px solid;
  display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <h1>This is the Title</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
2
解决办法
3751
查看次数

css - 如何更改输入占位符的位置

我想将输入占位符放在输入边框上。

在此处输入图片说明

我设法改变颜色但不是位置。

.filter::placeholder {
   color: gray;
}
Run Code Online (Sandbox Code Playgroud)
<input type="text" class="filter">
Run Code Online (Sandbox Code Playgroud)

有没有办法做到这一点?

html css

5
推荐指数
2
解决办法
2万
查看次数

用不变形的图像填充一个圆圈

我有一个网站,用户可以上传未知尺寸的照片。我正在尝试找出如何使图像成为固定大小的圆圈。我可以创建圆圈并创建圆形图像,但我不知道如何防止图像在放入圆圈时变形。有没有办法用任何图像填充固定大小的圆圈而不扭曲图像(最好居中)?我在这里做了一个小提琴。非常感谢。

#circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
}
Run Code Online (Sandbox Code Playgroud)
<div><img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"></div>
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
1677
查看次数

溢出隐藏在绝对定位的 SVG 上

想要使阴影容器外溢出的圆圈部分消失。我正在使用 bootstrap-4。

body {
  overflow: hidden;
}

.container {
  margin-top: 5%;
  width: 1200px;
  height: 625px;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.bg {
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 20px;
  width: 30vw;
  height: 30vw;
  overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container shadow-lg">
  <div class="bg">
    <svg class="head_bg1" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#614385;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:#516395;stop-opacity:1"/>
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
    </svg>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/djaspar/zr8eqL8j/

结果:

结果图像

css svg bootstrap-4

5
推荐指数
1
解决办法
2110
查看次数