CSS网页制作实例代码:模拟新浪微博的三角图像

文章简介:CSS网页制作实例代码:新浪微博的三角图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习.</title>
<style>
.W_bgcolor_arrow * {
font-family: "SimSun";
overflow: hidden;
display: block;
height: 9px;
line-height: 17px;
}
.W_bgcolor_arrow span {
color: #F3F3F3;
}
.W_bgcolor_arrow span {
margin-top: -8px;
}
</style>
</head>
<body>
<div class="W_bgcolor_arrow">
<span>◆</span>
</div>
</body>
</html>

时间: 2024-08-30 20:21:28

CSS网页制作实例代码:模拟新浪微博的三角图像的相关文章

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

CSS网页制作实例:有条件的添加hover样式

文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div> &

DW教程之CSS网页制作实例:固定宽度布局

本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

CSS网页制作实例教程:非常酷的日期效果

LearningjQuery.com的博客日志上的日期效果非常的酷,如下图: 其中文字的样式和垂直的年份就会告诉你这不是用图片来完成的.而且在标记语言中日期信息是是以文字出现的,就像通常的那样. 通过Firebug查看,代码非常简洁漂亮! 很明显每一个日期并没有各自的图片.它们都出自同一张图片(css sprites!),图片的不同地方被放置上了不同的内容:天.月和年.也许你会记得这和一年前Joost de Valk posted about 上的技术是一样的. 来看一下这张漂亮的图片: HTM

CSS网页布局实例代码:左侧定宽右侧自适应宽网页布局

文章简介:左右布局(左侧定宽,右侧自适应宽) <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>左右布局(左侧定宽,右侧自适应宽)</title><style type="text/css">body{font:

CSS网页布局实例代码:上下两栏上下自动居中网页布局

文章简介:div上下两栏,上下自动居中. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>div上下两栏,上下自动居中</title><style type="text/css">html,body{overf

CSS网页制作实例:三列等高DIV的网页布局

文章简介:用纯CSS实现三列DIV等高布局的方法. 散列等高 <body><div id="wrap"><div id="left"><p style="height:500px">style="height:500px"</p></div><div id="center"><p style="height:

CSS网页制作实例:网页顶部绝对定位

文章简介:top绝对定位. <style>body{margin:0;padding:0;height:1500px;}.top{width:100%;height:30px;background:#ff0000;position:fixed;top:0px;  }id{    left:100px;    top:100px;    position:absolute;}</style><div class="top"></div>dk

CSS网页设计实例:商旅网首页的标签切换

文章简介:CSS网页设计实例:商旅网首页的标签切换. 上个月的项目了...标签切换有很多方法可以实现,这里贴一段我个人很喜欢用的代码: <ul class="tabmenu"><li class="menu_flt">机票</li>< li>酒店</li>< li>旅游度假</li>< /ul> 对于web标准化来讲,这种结构很清晰,当图片未显示的时候同样可以知道文本内容