css中a的用法 css中a标签的使用方法详解

a标签定制是前端核心技能。

伪类选器用着色区分状态：:link蓝色，:visited灰色，:hover橙色，:active红色。
代码：a{text-decoration:none}a:link{color:006 6 cc}a:visited{color:6 6 6 }a:hover{color:ff6 6 00;text-decoration:underline}a:active{color:ff0000}
导航菜单悬停用transition：nav a{padding:1 0px1 5 px;background-color:f9 f9 f9 ;transition:background-color0.3 s}nav a:hover{background-color:e9 e9 e9 }
焦点状态用:focus：a:focus{outline:2 pxsolidff6 6 00;outline-offset:2 px}这是键盘导航的视觉反馈。

外部链接加箭头：a[href^="http"]::after{content:"↗";margin-left:4 px}
纯CSS下拉菜单：.dropdown:hover .dropdown-content{display:block}结构：
菜单
选项1

移动端hover失效加JavaScript或touch样式。

打印用@media print：@media print{a{color:000}}。

你自己掂量。

css使图片居中的方法有哪些

我记得有一次，在一个设计项目中，我们需要把一个产品图片放在网页的页眉中间，那是一个简单的图片，但是要达到居中的效果，我们却试了好几种方法。

一开始，我用了text-align:center;，这招挺管用，图片立刻就水平居中了，不过我注意到，当图片宽度小于容器宽度时，图片两侧会多出空白，这在视觉上有些不舒服。

然后，我尝试了margin:0auto;，这次图片两侧没有空白，但发现图片宽度需要预先设定，不然它不会自动填充父容器宽度。

又试了试弹性盒布局，把父容器设为display:flex;和justify-content:center;，这回图片不仅水平居中，还保持了很好的响应性。
我挺喜欢这种方法的。

后来，我还在想，要是用栅格布局呢？但我觉得栅格布局对于这么简单的居中来说可能有点大材小用了。

再说了，绝对定位对齐法，虽然也能实现居中，但我觉得在处理这种简单情况时，它有点多余。

最后，我甚至想，如果图片就是背景呢？用background属性设置背景图片居中，这样既节省了空间，又能保证图片始终居中。
不过，这方法有个缺点，就是不能为图片添加链接或alt属性。

这么一比较，我觉得对于这个项目来说，弹性盒布局是个不错的选择。
等等，还有个事，我突然想到，如果以后遇到更多样的布局需求，栅格布局或许能派上用场。
不过现在，就先简单点吧。