精华内容
下载资源
问答
  • 2020-12-22 12:16:38

    CSS成功定义设置超链接a宽度与高度方法

    在DIV CSS布局中,html中a超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享解决实现A标签宽度和高度实现。

    解决方法:

    1、对a标签样式加display:block;或者display:inline-block;加后实现成块状属性

    2、float,对a样式盒子float:left让它成浮动

    3、当然以上两种方法一个弊端,第一种会让a独占一行,第二种方法会让a浮动,可能会照成与其它文字内容重叠。最后我们会介绍变通地对html a设置什么样式达到我们想要的宽度和高度效果。

    CSS+DIV实例示范对A控制宽度和高度样式

    一、使用display:block实现a宽度和高度   -   TOP

    DIVCSS5对一个div命名为".abc"里的a设置width为80px,height:30px,为了观察效果设置一黑色边框。对a设置CSS样式display:block即可让高度宽度生效。

    1、完整html源代码(DIV+CSS):

    html>

    a设置宽度和高度 DIVCSS5演示

    .abc a{ display:block;width:130px;height:30px;border:1px solid #000}

    我宽度80,高30

    更多相关内容
  • CSS代码如下: 复制代码代码如下:/* external links */ a[href^=”http://”] { padding-right: 13px; background: url(external.gif) no-repeat center right; } <p>/* emails */ a[href^=”mailto:”] { padding-...
  • a)cm:以厘米为单位设置属性值,例如:1cm等… b)px:以像素为单位设置属性值,例如:1px或者10px等… c)pt:以点为单位设置属性值,例如:1pt或者2pt等… d)norm:以初始值/默认值为单词间距。 示例1: 复制代码代码...
  • 如何css为超链接设置不同样式css设置超链接的样式可以使用伪类来实现,使用link来设置正常链接的样式,visited设置访问过的链接样式,hover设置鼠标悬浮时的样式,active设置鼠标点击时的样式。(推荐学习:CSS视频...

    e850ad83a5bd88717d0da41d3fd5eafc.png

    如何用css为超链接设置不同样式

    css设置超链接的样式可以使用伪类来实现,使用link来设置正常链接的样式,visited设置访问过的链接样式,hover设置鼠标悬浮时的样式,active设置鼠标点击时的样式。

    (推荐学习:CSS视频教程)

    比如

    a.topcs:link {

    font-size: 12px;

    color: #000000;

    text-decoration: none;

    }

    a.topcs:visited {

    font-size: 12px;

    color: #000000;

    text-decoration: none;

    }

    a.topcs:hover {

    font-size: 12px;

    color: #FF0000;

    text-decoration: none;

    }

    a.news:link {

    font-size: 12px;

    color: #000000;

    text-decoration: none;

    }

    a.news:visited {

    font-size: 12px;

    color: #000000;

    text-decoration: none;

    }

    a.news:hover {

    font-size: 12px;

    color: #FF0000;

    text-decoration: none;

    }

    调用:1

    1

    效果:

    a157ba65f0fb5850ff0116502956cbeb.png

    更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

    展开全文
  • css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover:设置对象在其鼠标悬停时的样式表属性。 (4...
  • CSS设置A4纸大小。

    2021-08-04 06:18:18
    这似乎使其他的一切都保持在原来的CSS中,并解决了Chrome的问题(在Windows、OS X和Ubuntu下测试了不同版本的Chrome)。 #2 24 CSS CSS body { background: rgb(204,204,204); } page[size="A4"] { background: white...

    I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.

    我需要在web上模拟A4纸,并允许在浏览器(特别是Chrome)上打印这个页面。我将元素大小设置为21cm x 29.7cm,但是当我发送到print(或print preview)时,它会剪切我的页面。

    看到这个生活的例子!

    HTML

    HTML

    Page 1/2
    Page 2/2

    CSS

    CSS

    body {

    margin: 0;

    padding: 0;

    background-color: #FAFAFA;

    font: 12pt "Tahoma";

    }

    * {

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    }

    .page {

    width: 21cm;

    min-height: 29.7cm;

    padding: 2cm;

    margin: 1cm auto;

    border: 1px #D3D3D3 solid;

    border-radius: 5px;

    background: white;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    }

    .subpage {

    padding: 1cm;

    border: 5px red solid;

    height: 256mm;

    outline: 2cm #FFEAEA solid;

    }

    @page {

    size: A4;

    margin: 0;

    }

    @media print {

    .page {

    margin: 0;

    border: initial;

    border-radius: initial;

    width: initial;

    min-height: initial;

    box-shadow: initial;

    background: initial;

    page-break-after: always;

    }

    }

    I think I'm forgetting something. But what would it be?

    我想我忘记什么了。但是会是什么呢?

    Chrome: clipping page, double page (it's just what I need it to work)

    Chrome:剪切页面,双页(这正是我需要的)

    Firefox: it works perfectly.

    Firefox:完美的工作。

    IE10: believe it or not, it's perfect!

    信不信由你,它太完美了!

    Opera: very buggy on print preview

    Opera:在打印预览版上很麻烦。

    3 个解决方案

    #1

    172

    I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the @page rule causes the same issue).

    我进一步研究了这个问题,实际的问题似乎是在打印媒体规则下初始化页面宽度。在Chrome width中,如果没有为父元素的宽度定义特定的长度值(width:在本例中为initial,解析为width: auto…但实际上,任何小于@page规则下定义的大小的值都会导致相同的问题)。

    So not only the content is now too long for the page (by about 2cm), but also the page padding will be slightly more than the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).

    现在不仅内容页面太长(约2厘米),而且页面填充将略高于最初的2厘米等等(这似乎呈现内容下宽度:汽车规模~ 196毫米的宽度,然后整个内容的宽度210毫米~但奇怪的是完全相同的比例因子应用于内容与任何宽度小于210毫米)。

    To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or directly to .page and in this case avoid the initial keyword.

    要解决这个问题,只需在打印媒体规则中将A4纸张宽度和高度指定为html、正文或直接指定为.page,在本例中避免初始关键字。

    @page {

    size: A4;

    margin: 0;

    }

    @media print {

    html, body {

    width: 210mm;

    height: 297mm;

    }

    /* ... the rest of the rules ... */

    }

    This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).

    这似乎使其他的一切都保持在原来的CSS中,并解决了Chrome的问题(在Windows、OS X和Ubuntu下测试了不同版本的Chrome)。

    #2

    24

    CSS

    CSS

    body {

    background: rgb(204,204,204);

    }

    page[size="A4"] {

    background: white;

    width: 21cm;

    height: 29.7cm;

    display: block;

    margin: 0 auto;

    margin-bottom: 0.5cm;

    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);

    }

    @media print {

    body, page[size="A4"] {

    margin: 0;

    box-shadow: 0;

    }

    }

    HTML

    HTML

    演示

    #3

    15

    https://github.com/cognitom/paper-css似乎解决了我所有的需求。

    Paper CSS for happy printing

    Front-end printing solution - previewable and live-reloadable!

    前端打印解决方案-预览和实时可重载!

    展开全文
  • CSS设置A4纸张大小

    千次阅读 2021-06-12 09:47:36
    CSS设置A4纸张大小我需要在网页中模拟一张A4纸,并允许打印此页面,因为它是在浏览器(特别是Chrome)上显示的。 我将元素大小设置为21厘米x 29.7厘米,但是当我发送打印(或打印预览)它剪辑我的页面。看到这个现场的...

    CSS设置A4纸张大小

    我需要在网页中模拟一张A4纸,并允许打印此页面,因为它是在浏览器(特别是Chrome)上显示的。 我将元素大小设置为21厘米x 29.7厘米,但是当我发送打印(或打印预览)它剪辑我的页面。

    看到这个现场的例子 !

    HTML

    Page 1/2
    Page 2/2

    CSS

    body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { padding: 1cm; border: 5px red solid; height: 256mm; outline: 2cm #FFEAEA solid; } @page { size: A4; margin: 0; } @media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } }

    我想我忘记了一些东西。 但是会是什么?

    Chrome :裁剪页面,双页面( 这正是我需要它的工作 )

    Firefox :它完美的工作。

    IE10 :不pipe你信不信,这是完美的!

    Opera :打印预览很麻烦

    我更深入地研究了这一点,实际的问题似乎是在print介质规则下分配initial页面width 。 它看起来像在Chrome中的width: initial的.page页面元素导致页面内容的缩放 ,如果任何父元素的width: initial没有定义特定的长度值( width: initial在这种情况下parsing为width: auto …但实际上任何小于@page规则下定义的值@page导致相同的问题)。

    因此,不仅页面的内容太长 (大约2cm ),而且页面填充将比最初的2cm略微更多,等等(似乎将内容呈现在width: auto下width: auto到宽度~196mm然后将整个内容缩放到210mm的宽度,但是对于任何宽度小于210mm内容物都应用了相同的比例因子)。

    要解决这个问题,你可以简单地在print介质规则中指定A4纸的宽度和高度为html, body或直接为.page并在这种情况下避免initial关键字。

    DEMO

    @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ }

    这似乎保持了原来的CSS,并修复了Chrome中的问题(在Windows,OS X和Ubuntu下的不同版本的Chrome中进行了testing)。

    CSS

    body { background: rgb(204,204,204); } page[size="A4"] { background: white; width: 21cm; height: 29.7cm; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } @media print { body, page[size="A4"] { margin: 0; box-shadow: 0; } }

    HTML

    DEMO

    展开全文
  • 使用css设置边框背景图片

    千次阅读 2021-08-04 07:24:15
    使用css的特有属性,给不同的盒子添加边框图片。为什么会有这一场景呢。因为,UI给我们前端的边框图片可能未必适合我们当前的内容。这里我们主要使用到的属性有:border-image-sourceborder-image-sliceborder-top-...
  • CSS3 opacity 属性的功能是用来控制网页元素的透明效果(调整不透明度),早期网页设计常常会用到许多的透明效果,通常都是透过 png 图层来制作透明的感觉,现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到...
  • 自己做点小程序的时候发现在一个标签中的不同两个类给同一属性设定了不同值的时候,最终属性取值的特点: 上面这句话有够拗口的,例子说明一切吧。...– 类 a b c d 在1.css中,类 e 在2.css中 –> ”a>aaaa
  • css设置背景图片大小Introduction: 介绍: As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role...
  • css同级元素 设置不同样式

    千次阅读 2020-04-29 15:22:07
    css同级元素 设置不同样式 <div class="shuju-div"> <span>数据A</span> <span>数据B</span> <span>模型C</span> <span>模型D</span> <span>模型...
  • 12 个答案:答案 0 :(得分:199)你总是可以通过设置max-width和溢出ellipsis来使用截断方法p {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;}对于多行截断,请查看flex解决方案。...
  • css如何设置文字加粗

    千次阅读 2021-08-04 08:09:17
    css中可使用font-weight属性设置文字加粗,只需要给元素添加“font-weight:bold|bolder”样式即可,值“bold”定义粗体字符,“bolder”定义更粗的字符;还可设置值为700、800或900来实现加粗即可。本教程操作环境:...
  • 用CSS设置颜色、背景和图像效果

    千次阅读 2022-02-08 07:51:11
    这篇文章简单介绍了用CSS设置颜色、背景和图像效果的基本知识,重要的知识点就是图文混排,尤其要注意图片的位置,为后面将相对位置、绝对位置做好铺垫。
  • css应该怎么设置超链接样式

    千次阅读 2021-08-04 08:45:03
    css设置超链接样式的方法是,给超链接添加伪类,例如【a:visited {color:#00FF00;}】。【a:visited】表示用户已经访问过的链接。本文操作环境:windows10系统、css 3、thinkpad t480电脑。如果我们要设置超链接的...
  • CSS字体样式设置CSS文本样式设置

    千次阅读 2019-10-22 18:23:54
    一、CSS字体样式设置 1.字体样式设置 字体样式大致有如下几种特征: 字体类型(风格)、字体粗细、字体大小、字体系列 (1)字体类型(风格) font-style 用于设置字体风格,可设置以下值: ① normal:普通字体 ② ...
  • 关于在css设置图片圆角的问题

    千次阅读 2021-08-05 04:43:52
    今天做了一个项目,效果图内页的产品图片都是带圆角的,于是前端的做了圆角的效果,div+css是这样的,首先div布局是:六一儿童节互动六一儿童节互动六一儿童节互动(css文件里)加入如下样式:.tiandi_item{ width:160...
  • 使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下:一、表格布局table-layout语法:table-layout : auto | fixed取值:auto : 大多数浏览器采用自动表格布局算法对表格布局;表格及单元格的宽度取...
  • Dreamweaver使用CSS规则设置超链接显示

    千次阅读 2021-06-12 10:20:00
    核心提示:默认情况下,网页的超链接都有...一、使用CSS规则设置超链接的显示1. 打开文档,然后打开“CSS样式”面板。2. 在“CSS样式”面板中,点击右下角的“新建 CSS 规则”按钮,打开“新建 CSS 规则”对话框,...
  • CSS文字样式设置

    2021-12-07 22:42:29
    而在CSS中,则使用font-family属性。 语法:font-family:字体名称 参数:字体名称按优先顺序排列,以逗号隔开。如果字体名称包括空格,则应用引号括起。 说明:font-family属性可控制显示字体。不同的操作系统,...
  • 这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题。其中定位的绝对定位和相对定位到底相对什么定位?...使用Flex只需要在父盒子设置:display: flex; justify-content: cen...
  • a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ ...在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited ...
  • css color设置字体颜色

    2021-08-04 04:51:41
    color是css1版本的属性,所有主流浏览器都支持color属性。语法:color:颜色值;颜色值是一个关键字或一个16进制的RGB值。如blue或#000000color属性值值描述color_name规定颜色值为颜色名称的颜色(比如 red)。hex_...
  • css设置字体下划线的方法:1、使用“text-decoration:underline;”设置下划线样式;2、通过“border-bottom”属性设置下划线样式。本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。在CSS中...
  • javafx css样式 渲染图表时, JavaFX默认提供某些颜色。...一些基于Java的图表API提供了Java方法来设置颜色。 JavaFX诞生于HTML5流行的年代,而是使用级联样式表 (CSS)来允许开发人员调整其图表中使...
  • CSS设置链接的样式

    千次阅读 2020-06-11 09:35:00
    下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助。 在讨论CSS属性之前,先了解链接的状态是非常重要的。链接可以存在于不同的状态,并且可以使用伪类进行样式设置。 下面给出了四种...
  • 使用css设置div等比例缩放高宽

    千次阅读 2021-06-16 13:13:00
    2018-11-19 15:02:54在响应式开发中,有一些元素需要按等比例进行显示,比如说一个...那么此时就需要在适应不同宽度的屏幕中进行等比例缩放div区域。方案一:通过媒体查询,设定在不同屏幕宽度下div的高度和宽度,如...
  • 匿名用户1级2017-12-01 回答一、只对表格table标签设置边框 - TOP只对table...案例详细如下:1、对应css代码.table-atable{border:1pxsolid#F00}/*css注释:只对table标签设置红色边框样式*/style>2、对应html代码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 206,879
精华内容 82,751
关键字:

用css设置不同的a怎么设置