复制当前网址
上一篇： 下一篇：
相关文章：
最热文章：CSS :before 选择器
CSS :before 选择器
在每个 &p& 元素的内容之前插入新内容：
content:&台词：&;
浏览器支持
所有主流浏览器都支持 :before 选择器。
注释：对于 IE8 及更早版本中的 :before，必须声明 。
定义和用法
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
亲自试一试 - 实例
在每个 &p& 元素前面插入内容，并设置所插入内容的样式：
content:&台词：-&;
background-color:
font-weight:
CSS 教程：
CSS 选择器参考手册：17930人阅读
HTML/JS/CSS（63）
1、统一大小？
我的网页上面有许多的图片，有的大，有的小，我想如果图片大的实现缩放，所有的都是一般大。来看看没有是什么效果。
大家看的出来，非常的难看的，于是我想让有没有一种方法是把那个大的变成小的呢？
&li&&img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=400px /&&/li&
效果图如下：
但是如果图片太小了呢？就会被放大，好难看！！！有没有什么办法让大的变小，小的不被放大的方法呢？
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&base href="&%=basePath%&"&
&title&食物详情&/title&
&li&&img name="pic" src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' /&&/li&
&li&&img name="pic" src='http://baike.soso.com/p/-.jpg' /&&/li&
&li&&img name="pic" src='http://img2.3lian.com/img/005.jpg' /&&/li&
&li&&img name="pic" src='http://img.taopic.com/uploads/allimg/451-11.jpg' /&&/li&
&script type="text/javascript"&
function setImg(w, h){
alert("111");
//var imgList = document.getElementsByTagName('img');
var imgList = document.getElementsByName("pic");
for(var i=0;i&imgList.i++){
alert("222");
if(imgList[i].width&w || imgList[i].height&h){
imgList[i].width =
imgList[i].heigth =
setImg(400,400);
&/html&效果如下：
感谢论坛大牛：
文章：22篇
阅读：20458
阅读：13775
阅读：8630
阅读：1738::before和::after伪元素的用法 - 十年磨一剑_卧薪尝胆 - 博客园
随笔 - 654
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
举例：网站有些联系电话，希望在它们前加一个icon?，就可以使用:before伪元素，如下：
&!DOCTYPE html&
&meta charset="utf-8" /&
&style type="text/css"&
.phoneNumber::before {
content:'\260E';
font-size: 15
&p class="phoneNumber"&&/p&
Note:这些特殊字符的html，js和css的写法是不同的，具体可查看
二、content属性
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
content可取以下值。
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
&!DOCTYPE html&
&meta charset="utf-8" /&
&style type="text/css"&
p::before{
content: "《";
content: "》";
&p&平凡的世界&/p&
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
&style type="text/css"&
content: "(" attr(href) ")";
&a href="http://www.cnblogs.com/starof"&starof&/a&
3、url()/uri()
用于引用媒体文件。
举例：“百度”前面给出一张图片，后面给出href属性。
a::before{
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
content:"("attr(href)")";
text-decoration:
---------------------------
&a href="http://www.baidu.com"&百度&/a&
4、counter()
调用计数器，可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用：
h2:before { counter-increment:&content: "Chapter " counter(chapter) ". "&}
counter-reset:
counter-reset:
h1:before{
counter-increment:
content:counter(section) "、";
h2:before{
counter-increment:
content: counter(section) "." counter(subsection) "、";
------------------------------------------------
&h1&HTML tutorials&/h1&
&h2&HTML Tutorial&/h2&
&h2&XHTML Tutorial&/h2&
&h2&CSS Tutorial&/h2&
&h1&Scripting tutorials&/h1&
&h2&JavaScript&/h2&
&h2&VBScript&/h2&
&h1&XML tutorials&/h1&
&h2&XML&/h2&
&h2&XSL&/h2&
了解更多可参考：
1、清除浮动
方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
.cf:before,
.cf:after {
content: " ";
.cf:after {
2、模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
核心css如下：
#page-wrap { width: 60%; margin: 40 position: }
#logo { position: top: 0; left: 50%; margin-left: -125 }
#l, #r { width: 49%; }
#l { float: }
#r { float: }
#l:before, #r:before { content: ""; width: 125 height: 250 }
#l:before { float: }
#r:before { float: }
完整代码如下：
&View Code
3、做出各种图形效果
举例：一个六角星
#star-six {
height: 0;
border-left: 50
border-right: 50
border-bottom: 100
#star-six::after {
height: 0;
border-left: 50
border-right: 50
border-top: 100
content: "";
&div id="star-six"&&/div&
#star-six的div是一个正三角行，#star-six::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果。
查看更多。
4、不使用图片创建小图标
举例：比如一个电话
很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。
&style type="text/css"&
#phone{width:50height:50border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20margin-right:0position:display: inline-top: -5}
#phone:before{width:15height:15background:#EEB422;border-radius: 20%;content: "";position:left:-2top: 1}
#phone:after{width:15height:15background:#EEB422;border-radius: 20%;content: "";position:left:-3top: 34}
&div id="wraper"&
&div id="phone"&&/div&
更多图标：
&View Code
这个效果来自：
有大神用伪元素创建了84种小图标，具体可查看
5、显示打印网页的URL
@media print {
a[href]:after {
content: " (" attr(href) ") ";
&/style&&body&
&a href="http://www.baidu.com"&百度&/a&
6、给blockquote添加引号
经常用到给blockquote 引用段添加巨大的引号作为背景，可以用 ：:before 来代替 background 。好处是即可以给背景留下空间，还可以直接使用文字而非图片：
&meta charset="utf-8"/&
&style type="text/css"&
blockquote::before {
content: open-
z-index: -1;
font-size:80
&blockquote&引用一个段落,双引号用::before伪元素实现&/blockquote&
7、超链接特效
举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果
&meta charset="utf-8" /&
&style type="text/css"&
background-color: #425a6c;
display: inline-
text-decoration:
font-size: 32
padding: 5px 20
a:hover::before, a:hover::after { position: }
a:hover::before { content: "\5B"; left: -10 }
a:hover::after { content: "\5D"; right:
&a&鼠标移上去出现方括号&/a&
更多创意链接特效可参考：&&。
8、::before和::after实现多背景图片
举例：一个标签应用5张背景图
&View Code
原效果来自：
这个效果看的真的是脑洞大开，虽然多背景图用css3的很容易就能实现。但是这篇文章是10年写的，已经过去5年了，想想也正是他们这样的尝试和努力才加速了css3标准的制定，让今天的开发更easy。今天的我们又能为5年后的开发人员做些什么贡献呢？
阅读(...) 评论()
Copyright & 十年磨一剑_卧薪尝胆
Powered by:
模板提供：当前位置：
(html)css伪类content：url放图片如何改变图的大小
(html)css伪类content：url放图片如何改变图的大小
来源：网络整理&&&&&时间: 0:07:09&&&&&关键词:content
关于网友提出的“(html)css伪类content：url放图片如何改变图的大小
”问题疑问，本网通过在网上对“(html)css伪类content：url放图片如何改变图的大小
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题：(html)css伪类content：url放图片如何改变图的大小
描述:用before after 之类的伪类的content里放一个图的链接，如何去改图的大小？解决方案1:理解伪元素这篇文章也是提到用background会更好一些~解决方案2:只能修改图片的大小。因为它是直接读取的图片，并不是代入到html中再显示出来，css不能直接操纵文件夹里的图片，你可以自己写一个简单的例子，然后到控制台看看有没有相应的element就明白了，只能修改图片本身的大小以达到要求。第一次回答问题，不对的地方请指出来，哈哈解决方案3:不知道你什么需求，你可以把图片放在after伪类的background里就可以控制了
以上介绍了“(html)css伪类content：url放图片如何改变图的大小”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/1593422.html
上一篇： 下一篇：