您的位置：首页 > Web前端 > CSS

Web前端学习第十天·fighting_使用CSS美化文字（三）

2016-05-25 15:33 597 查看
[b]CSS3颜色渐变[/b]

　　background-image:linear-gradient(black,blue,green,red);

　　默认从上到下显示。

　　示例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body>
<ul>
<li>
<h3>颜色渐变（默认从上到下）</h3>
<div style="background-image:linear-gradient(black,blue,green,red) ;background-color:gray; height:200px;border:1px solid red;background-repeat:no-repeat;">

</div>
</li>

</ul>
</body>
</html>


[b]background-repeat背景图片平铺[/b]

　　背景填充的方式。

　　语法：background-repeat：<repeat-style>[,<repeat-style>]

　　　　repeat-style可以取的值：repeat-x（北京在横向上平铺）， repeat-y（背景在纵向上平铺），repeat（在横向上和纵向上平铺），no-repeat（背景图像不平铺），round（CSS3背景图片自动缩放直到适应并填充满整个容器），space（背景图像以相同的间距平铺且填充满整个容器或某个方向）。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body>
<ul>
<li>
<h3>背景图片默认平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;">
背景图片
</div>
</li>
<li>
<h3>背景图片no-repeat不平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:no-repeat;">
背景图片
</div>
</li>
<li>
<h3>背景图片repeat-x横向平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-x;">
背景图片
</div>
</li>
<li>
<h3>背景图片repeat-y纵向平铺</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-y;">
背景图片
</div>
</li>
<li>
<h3>背景图片round:将背景图片自动缩放知道适应并填充满整个容器</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:round;">
背景图片
</div>
</li>
<li>
<h3>背景图片space:以相同的间距平铺且填充满整个容器或某个方向</h3>
<div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:space;">
背景图片
</div>
</li>
</ul>
</body>
</html>


示例效果如下：







[b]backgroun-attachment[/b]

　　背景图像是随对象内容滚动还是固定的。（使用频率：几乎不用）

　　语法：background-attachment：<attachment>[，<attachment>]*

　　attchment：fixed（背景图像相对于窗体固定），local（背景图像相对于元素固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容，CSS3），scroll（默认方式，背景图像相对于元素固定，也就是说元素内容滚动时背景图像不会跟着动，因为背景图像总是要跟随元素本身。但会随着元素的祖先元素或窗体一起滚动）

　　

background-position（重点难点）

　　设置或者检索对象的背景图像位置，必须先指定background-image属性值。

　　使用频率非常高。

　　语法：background-position:<position>[,<position>]

　　position可以取的值有：left | center | right | top | bottom | <percentage> | <length> | 等（查看手册）

　　background-position该属性提供两个参数值。CSS3中可以提供四个值，每个percentage或length偏移前都必须跟着一个关键字（即left|right|center|bottom|top），偏移量相对关键字位置进行偏移。例如（假设要定义背景图像在容器中右下方，并且距离邮编和底部各20px）：

background:url(test1.jpg) no-repeat right 20px bottom 20px


　　也可以设置3个参数值，例如：

background:url(test1.jpg) no-repeat left bottom 20px


　　如果提供两个参数，则第一个用于横坐标，第二个用于纵坐标。

　　如果只提供一个，则该值用于横坐标，纵坐标默认为50%（即center）。　

　　不适用具体坐标的常见位置如下图所示：（这种应用并不多）

　　


　　使用坐标，显示图片中的某一位置。（向下为正方向，向上为负方向，向左为负方向，向右为正方向）。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;">
<ul>
<li>
<h3>背景图片的位置（原图）</h3>
<div style="background-image:url(../images/jd2015img.png);height:200px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
原图样式
</div>
</li>
<li>
<h3>背景图片的位置（难点）</h3>
<div style="background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
手机未选中
</div>
</li>
<li>
<h3>背景图片的位置（难点）</h3>
<div style="background-position:0 -26px;background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
手机选中
</div>
</li>

</ul>
</body>
</html>


示例效果如下：



　　　　

[b]background[/b]

　　背景设置的复合属性，可以只通过这一个属性设置背景图片，背景颜色，是否平铺等内容。使用频率非常高。

　　语法：background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

　　顺序方面内有特别的要求。

示例代码如下：　　

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景属性的设置</title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:45px;
border:2px solid red;
}
</style>
</head>
<body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;">
<ul>
<li>
<h3>背景属性的综合属性设置</h3>
<div style="background:url(../images/jd2015img.png) 0 -26px no-repeat;padding-left:20px;height:20px;">
手机选中
</div>
</li>
</ul>
</body>
</html>


[b]list-style-type [/b]

　　列表项样式，主要用在<li>标签，使用频率较低。

　　也可以通过list-style-image属性指定自己的图片作为列表项样式。

　　取值的种类较多，查看操作手册即可。

　　一般都是使用list-style-type:none，即没有列表项图标。

　　列表属性都具有继承性。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表项样式</title>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>
<h3>列表类型的样式</h3>
<ul>
<li style="list-style-type:square;">第一项（列表项图标为方块）</li>
<li style="list-style-type:none;">第二项（没有列表项图标）</li>
</ul>
</li>
<li>
<h3>列表类型的样式</h3>
<ul>
<li style="list-style-type:square;">第一项（列表项图标为方块）</li>
<li style="list-style-type:none;">第二项（没有列表项图标）</li>
</ul>
</li>
<li>
<h3>列表项都具有继承性</h3>
<ul style="list-style-type:none;">
<li>第一项（继承父标签）</li>
<li style="list-style-type:square;">第二项（不适用从父标签继承过来的样式）</li>
</ul>
</li>
</ul>
</body>
</html>


[b]list-style-image [/b]

　　自定义列表项前面的图标。使用频率几乎为0。

　　

[b]list-style[/b]

　　列表项属性的综合设置（可以综合设置上述的列表项属性），使用频率较高。

　　

[b]练习：新浪头部导航的设计与制作[/b]

需要实现的效果



代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>新浪导航条的实现</title>
<meta charset="utf-8" />
<style type="text/css">
#zong {
border:0px solid red;
}
</style>
</head>
<body>
<h3>新浪导航条的实现</h3>
<div id="zong" style="width:140px;background:url(../images/bg2.png) 135px -200px no-repeat;">
<div id="d1">
<a href="#" style="text-decoration:none;color:black;font-weight:bolder;">新闻</a>
<a href="#" style="text-decoration:none;color:black;">军事</a>
<a href="#" style="text-decoration:none;color:black;">社会</a>
</div>
<div id="d2">
<a href="#" style="text-decoration:none;color:black;font-weight:bolder;">财经</a>
<a href="#" style="text-decoration:none;color:black;">股票</a>
<a href="#" style="text-decoration:none;color:black;">基金</a>
</div>
<div id="d3">
<a href="#" style="text-decoration:none;color:black;font-weight:bolder;">科技</a>
<a href="#" style="text-decoration:none;color:black;">手机</a>
<a href="#" style="text-decoration:none;color:black;">探索</a>
</div>
</div>
</body>
</html>


方法二：



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新浪导航条的实现方法二</title>
<meta charset="utf-8" />
<style type="text/css">
.nav-mod-1 {
width:174px;
background:url(http://i0.sinaimg.cn/home/main/index2013/0719/bg2.png) no-repeat 176px -183px;
margin-left: 2px;
display: inline;
overflow: hidden;/*将多余的部分隐藏掉*/
float:left;/*左浮动*/
padding:2px 5px 18px 0;
}
.main-nav ul {
height:26px;
clear:both;
overflow:hidden;
}
ul,ol {
list-style:none;
}
ul,li{
margin:0;
padding:0;
}
.main-nav li {
float:left;/*左浮动*/
width:27px;
margin-left:13px;
line-height:26px;
text-align:center;
white-space:nowrap;
display:inline;
}

</style>
</head>
<body>
<div class="main-nav">
<div class="nav-mod-1">
<ul>
<li><a href="http://news.sina.com.cn/" target="_blank"><b>新闻</b></a></li>
<li><a href="http://mil.news.sina.com.cn/" target="_blank">军事</a></li>
<li><a href="http://news.sina.com.cn/society/" target="_blank">社会</a></li>
<li><a href="http://news.sina.com.cn/world/" target="_blank">国际</a></li>
</ul>
<ul>
<li><a href="http://finance.sina.com.cn/" target="_blank"><b>财经</b></a></li>
<li><a href="http://finance.sina.com.cn/stock/" target="_blank">股票</a></li>
<li><a href="http://finance.sina.com.cn/fund/" target="_blank">基金</a></li>
<li><a href="http://finance.sina.com.cn/futuremarket/" target="_blank">期货</a></li>
</ul>
<ul>
<li><a href="http://tech.sina.com.cn/" target="_blank"><b>科技</b></a></li>
<li><a href="http://mobile.sina.com.cn/" target="_blank">手机</a></li>
<li><a href="http://tech.sina.com.cn/discovery/" target="_blank">探索</a></li>
<li><a href="http://finance.sina.com.cn/forex/" target="_blank">外汇</a></li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航