css

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量707 收藏
点赞数
分类专栏： CSS HTML 文章标签： filter class border div table button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytbada/article/details/1471941
版权
<style>
.a
{
BORDER:#bfceff 1px solid;
height:18;FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddecfb',endColorStr='#ffffff');
width:180;
}
.b
{
BORDER: #bfceff 1px solid;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 12px;
HEIGHT: 100px;
width:180;
border-top:0;
}

</style>
<div class="a">&nbsp;</div>
<div class="b">&nbsp;</div>

<p>
<style >
.biaoti{
FONT-SIZE: 18pt; FILTER: glow(color=000000,strength=2) dropshadow(color=#3333FF,offx=1, offy=1, positive=2); MARGIN: 0px; COLOR: #ffffff; HEIGHT: 20px; TEXT-DECORATION: none
}
</style>

<div class=biaoti>中华人民广播电台</div>
</p>

<p>

<table border=1 style="border-style: solid; border-width: 1;font-size=12px" width="520">
<tr>
<td width="510">
<span style="font-size:30pt;display:block;
text-align:center;color:blue;
filter:glow(color=red,strength=10);height:1">西部E网 </span></td>
</tr>
<tr>
<td width="510">
<span style="font-size:30pt;display:block;
text-align:center;color:darkblue;
filter:blur(add=t,direction=135,strength=10);height:1">西部E网</span></td>
</tr>
<tr>
<td width="510">
<div style="color:red;font-size:25pt;height:1;display:block;
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)">
<p align="center"> 西部E网</div></td>
</tr>
<tr>
<td width="510">
<div style="height:1;width:100%;
font-family:impact;font-size:30pt;color:navy;display:block;
filter:progid:DXImageTransform.Microsoft.wave(Strength=3)">
<p align="center"> 西部E网</div></td>
</tr>
<tr>
<td width="510">
<div style="height:1;width:100%;
font-family:impact;font-size:30pt;color:navy;display:block;
filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)">
<p align="center"> 西部E网</div></td>
</tr>
<tr>
<td width="510">
<span style="font-size:30pt;display:block;
text-align:center;color:darkblue;
filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);
height:1">西部E网</span></td>
</tr>
<tr>
<td width="510">
<span style="font-size:30pt;display:block;
text-align:center;color:darkblue;
filter:shadow(color=blue);height:1">西部E网</span></td>
</tr>
<tr>
<td width="510">
<div align="center" style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=1);">西部E网</div></td>
</tr>
<tr>
<td width="510">
<div align="center" style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=0);">西部E网</div></td>
</tr>
<tr>
<td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5);
height:1;font-size:20pt;font-family:impact;background-color:blue">
<p align="center">SUNNY</div></td>
</tr>
<tr>
<td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);
height:1;font-family:impact;font-size:20pt;background-color:blue">
<p align="center">SUNNY</div></td>
</tr>
<tr>
<td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>西部E网</b></font></td>
</tr>
<tr>
<td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>西部E网</b></font></td>
</tr>
<tr>
<td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>西部E网</b></font></td>
</tr>
<tr>
<td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font color=#E1E4EC size=6><b>西部E网</b></font></td>
</tr>
<tr>
<td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font
color=#8C96B5 size=6><b>西部E网</b></font></td>
</tr>
<tr>
<td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font color=#8C96B5 size=6><b>西部E网</b></font></td>
</tr>
<tr>
<td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">西部E网</span></td>
</tr>
<tr>
<td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">西部E网</span></td>
</tr>
</table>
<table align=center border=0>
<tr>
<td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font size="7"> <b>西部E网</b></font></td>
</tr>
</table>

</p>

<p>
<style>
<!--
.font { font-family: 隶书; font-size: 36pt; color: #000000; font-weight: bold;
background-color: #FF0000 }
.font1 { font-family: 隶书; font-size: 36pt; color: #000000; font-weight: bold }
-->
</style>
<div style="position: absolute; top: -1; left: 184; width: 85; height: 103; font-size: 64pt;

color: red">◆</div>
<div style="position: absolute; top: 12; left: 198; width: 43; height: 43;filter:flipv"

class=font1>福</div>
<div style="position: absolute; top: -2; left: 498; width: 85; height: 103; font-size: 64pt;

color: red">◆</div>
<div style="position: absolute; top: 12; left: 513; width: 49; height: 48;filter:flipv"

class=font1>福</div>
<div style="position: absolute; top: 80; left: 217; width: 320; height: 386; font-size:

240pt; color: red">◆</div>
<div style="position: absolute; top: 152; left: 292; width: 160; height: 160; font-size:

120pt; font-family: 隶书">春</div>
<div style="position: absolute; top: 10; left: 120; width: 527; height: 388">
<table border="0" cellpadding="0" cellspacing="0" width="527" height="231">
<tr>
<td height="21" width="46"></td>
<td height="21" width="449">
<p align="center"><span class=font>金贵特曲</span></td>
<td height="21" width="51"></td>
</tr>
<tr>
<td height="211" width="46" align="center" class="font">
<p align="center">高<br/>
山<br/>
流<br/>
水<br/>
遇<br/>
知<br/>
音</td>
<td height="211" width="449" align="center"></td>
<td height="211" width="51" align="center" class="font">琴<br/>
声<br/>
美<br/>
酒<br/>
迎<br/>
贵<br/>
客</td>
</tr>
</table>

</div>

</p>

<p>
<STYLE>TABLE,td,div {
FONT-SIZE: 9pt; CURSOR: hand; FONT-FAMILY: 宋体
}
.yellow {
BORDER-RIGHT: #8a6100 2px solid; BORDER-TOP: #ffe3a4 2px solid; BORDER-LEFT: #ffe3a4

2px solid; COLOR: #ffff00; BORDER-BOTTOM: #8a6100 2px solid; BACKGROUND-COLOR: #e19d00
}
.blue {
BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #a6c1df 2px solid; BORDER-LEFT: #a6c1df

2px solid; COLOR: #ffffff; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #3a6ea5
}
.green {
BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #b9ffb9 2px solid; BORDER-LEFT: #b9ffb9

2px solid; COLOR: #ffff00; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #008000
}
.menu {
BORDER-RIGHT: #FFFFFF 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000

2px solid; COLOR: #000080; BORDER-BOTTOM: #FFFFFF 2px solid; BACKGROUND-COLOR: #d8d8d0
}
.menu1 {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #adbac9 2px solid; BORDER-LEFT: #adbac9

2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #637994
}
.blue1 {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0ecff 2px solid; BORDER-LEFT: #d0ecff

2px solid; COLOR: #ffff00; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #0099ff
}
.black {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0d0d0 2px solid; BORDER-LEFT: #d0d0d0

2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #000000
}
</STYLE>
<DIV class=yellow id=up
style="left: 548px; width: 196; position: absolute; top: 544px; height: 72">
<P align=center><br/>
<br/>
有立体效果的层 </P></DIV>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=400 border=0>
<TBODY>
<TR>
<TD class=menu οnclick='c("menu")' align=middle width=50>灰</TD>
<TD class=green οnclick='c("green")' align=middle width=50>绿</TD>
<TD class=blue οnclick='c("blue")' align=middle width=50>蓝</TD>
<TD class=yellow οnclick='c("yellow")' align=middle width=50>黄</TD>
<TD class=menu1 οnclick='c("menu1")' align=middle width=50>灰1</TD>
<TD class=blue1 οnclick='c("blue1")' align=middle width=50>浅蓝</TD>
<TD class=black οnclick='c("black")' align=middle width=50>黑</TD>
<TD align=middle
width=50></TD></TR></TBODY></TABLE></CENTER></DIV>
<SCRIPT>
function c(css)
{up.className=css;
}
</SCRIPT>

</p>

<p>
<style>
.formclass {
margin: 0px;
padding: 0px;
height: auto;
width: auto;
border: 1px solid #3159bd;
background-color: #f7f7f7;
}
.formclass_show2 {
background-color: #dee7ff;
height: auto;
width: auto;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #3159bd;
border-right-color: #3159bd;
border-bottom-color: #3159bd;
border-left-color: #3159bd;
}
</style>
<table>
<tr>
<td><input size="10" type="text" style="width:100%" value="2005/03/31 " class="formclass_show2" readonly></td>
<td><input size="10" type="text" style="width:100%" value="2005/03/31 " class="formclass" readonly></td>
</tr>
</table>

</p>

<p>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>

<button class=btn title="这是CSDN的官方按钮"> 好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'"
title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog: http://www.cnblogs.com/thinhunan/archive/2005/03/31/<a%20target="> http://blog.csdn.net/juwuyi"
> 好看的Green Button</button> &nbsp;
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'" DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button>
<P>
<button class=btn3_mouseout οnmοuseοver="this.className='btn3_mouseover'"
οnmοuseοut="this.className='btn3_mouseout'"
οnmοusedοwn="this.className='btn3_mousedown'"
οnmοuseup="this.className='btn3_mouseup'"
title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog: http://www.cnblogs.com/thinhunan/archive/2005/03/31/<a%20target="> http://blog.csdn.net/juwuyi"
> 好看的QQ Button</button>
<P>
<button class=btn_2k3 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog: http://www.cnblogs.com/thinhunan/archive/2005/03/31/<a%20target="> http://blog.csdn.net/juwuyi"> 好看的 2k3 Button</button>

</p>

<p>
<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD bgColor=#908a47></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR>
<TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=1 bgColor=#908a47></TD>
<TD id=oINNER bgColor=#f7f8f9> </TD>
<TD width=1 bgColor=#908a47></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD colSpan=3></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>

</p>

<p>
<style>
v/:* {behavior: url(#default#VML);}
</style>
<v:RoundRect style="position:relative;width:160;height:120px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">
Hello
</v:textbox>
</v:RoundRect>
<table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
<tr>
<td id="msviRegionIdGraphic" bgcolor="#FFFFFF"></td>
<td id="msviRegionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
<td id="msviRegionGradient2" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#98B2E6', endColorStr='#3568CC', gradientType='1')"></td>
</tr>
</table>

</p>

<style>
.hr{
width:100%;
height:1;
filter : progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#0033ff,endColorStr=#ffffff);
}
.empty
{
height:15px;
}
.title
{
font-weight: bold;
font-size: 14px;
filter: dropshadow(color=gray,offx=1,offy=1);
color: black;
padding-top: 6px;
padding-left: 10px;
}
</style>
<table width="100%" cellpadding=0 cellspace=0 border=0>
<tr><td class="title">TITLE</td></tr>
<tr><td class="hr"></td></tr>
<tr><td class="empty"></td></tr>
</table>
 
ytbada
关注
专栏目录
CSS 3D效果
weixin_68485297的博客
04-11 7610
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
精典的CSS样式
陈华江(HuaChiang Chen) 陈泉冰专栏
02-28 3054
例注：gradientType 可以是 1或是0startcolorstr 開始的顏色endcolorstr 結束時的顏色顏色是Alpha+color所得Alpha=00|20|50|a0|c0|ff顏色動態的變化在head前加上var m=250;var s=-5;var mycol;var timeID=0;function aa(){ m=m+s; mycol=m.toString(
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
css圆角
xjj19999272的博客
05-25 4082
圆角 border-radius属性 border-radius属性的值通常为px单位，表示圆角的半径。示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
CSS中 设置( 单行、多行 )超出显示省略号
明天也要努力的博客
12-05 14万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
css多种布局方式
最新发布
博哥的二进制世界
05-14 3380
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
css div 斜角
yheartbeats的博客
03-29 2788
线形渐变，为盒子绘制斜角【linear-gradient】 1、语法：linear-gradient(角度, 颜色1 长度1, 颜色2 长度2,…) 区块; 角度：确定渐变方向（向上为0deg，向右为90deg） 长度值：0%~100%；可以使用具体的值px; 区块：如把盒子平均分成四份（左上【left top】、右上、右下、左下）。 2、如【linear-gradient(135deg, transparent 30px, blue 0) left top;】 把盒子分成四块【background-si
纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小
知无涯
06-15 2万+
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。 实现原理 CSS中有一个resize属性，如果一个元素的overflow属性值不是visible，则通过设置resize属性可以拉伸这...
css悬浮显示元素
pscool的博客
04-19 5691
现在才明白hover悬浮时，显示元素的用法：hover表示状态，那.location:hover .city-list连起来写的意思就是选择类名是location的元素，并且这个元素正在处于鼠标悬浮状态 的 后代 且类名是city-list的元素，将这个元素的display改成block。 .location .city-list{ display: none; } /* 当鼠标移入到location时，让city-list显示 */ .location:hover .city-list{
关于css类名
weixin_51332774的博客
03-22 2753
CSS选择器： 类名为什么要一层一层写：直接.class也是可以的，但如果有一个项目中出现两个一样的类名就会出现样式覆盖的问题。按层级写就可以保证样式的唯一性以及结构清晰。 css样式表中的样式覆盖顺序，两个class同时存在会怎样？ id和class的区别 Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名 而且class(类)在同一个html网页页面可以无数次的调用相同的class类。这也说明class一般是用来调用css中的预配制属性的，比如说有
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
Table样式集
YTFUNLOVE的BLOG
01-15 9115
   Table样式集  songsu» 2006-7-12 22:09:00
選項卡　十
YTFUNLOVE的BLOG
04-13 1846
function TabPage(width, height, tabTitleArray, tabPageArray){    var ids = new Array();    var id = document.uniqueID;    var tabTitleHtml = "";    var index = 0;    for (var i = 0; i     {        t
Code：CSS竖直导航菜单 - CSS Menu Vertical
YTFUNLOVE的BLOG
02-27 1403
CSS Menu - Verticalbody {margin: 0;padding: 30px;background: #FFF;color: #666;}h1 {font: bold 16px Arial, Helvetica, sans-serif;}p {font: 11px Arial, Helvetica, sans-serif;}a {color: #900;text-decorat
动太显示图片
YTFUNLOVE的BLOG
03-29 1305
 无忧脚本论坛 新手求助 
CSS编程完全参考手册
资源摘要信息:"CSS完全参考手册.chm是一个包含了大量关于CSS(层叠样式表)信息的电子文档。CSS是一种用于控制网页表现和布局的样式表语言。它由W3C制定标准，是网页设计和开发中不可或缺的一部分。CSS完全参考手册....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值