2.6 CSS高级_HTML视频教程

- 灬无言 - 阅 4,696

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

2.6.1 导航栏

导航栏就是一个列表(ul标签),它的每一列(li标签)都是一个链接(a标签)。

例1:

<ul>

<li><a href=”#”>主页</a></li>

<li><a href=”#”>新闻</a></li>

<li><a href=”#”>体育</a></li>

<li><a href=”#”>视频</a></li>

<li><a href=”#”>音乐</a></li>

</ul>

例1效果比平时见得导航多了圆点、边距及下划线,下面我们要用CSS去掉圆点,将所有的边距设置为0,去掉下划线。

例2:

CSS代码:

ul.none {

list-style-type:none;

margin:0px;

padding:0px;

}

ul a:link{

text-decoration:none;

}

HTML代码:

<ul class=”none”>

例2的效果和平时所见的导航栏还是有所不同,我们需要把链接显示为块元素,可使整个区域可点击(不仅仅是文本),同时固定块元素宽度(块元素默认占整行),同时给导航背景添加颜色(当然这里也可以添加背景图片)。

例3:

ul a {

display:block;

width:50px;

background-color:#f1f1f1;

}

例3的效果,可以看到文字没有居中很难看,我们可以再来一个居中效果。

例4:

ul li {

text-align:center;

}

例4的效果,还是和平时不同,我们可以设置鼠标移动至导航时,链接文字和背景颜色变色,及文字加粗效果。

例5:

ul a:hover {

text-decoration:none;

color:red;

background-color:pink;

}

例5给我们呈现出来的基本是平时我们见到的垂直导航栏。那么水平导航如何设置呢?使用float将li的元素块全部向一个方向浮动。

例6:

ul li {

float:left;

}

例6,一个比较完整的导航栏到此为止吧。当然还有一些其他的效果添加,自行尝试吧。

下面来介绍导航栏下拉菜单效果。

第一步:用DIV给导航栏的li标签用div括起来,方便写CSS样式,写好二级导航列表

<ul class=”none”>

<li><a href=”#”>主页</a></li>

<div class=”menu”>

<li>

<a href=”#”>新闻</a>

<ul>

        <li><a href=”#”>国内</a></li>

        <li><a href=”#”>国外</a></li>

        <li><a href=”#”>热点</a></li>

</ul>

</li>

</div>

<li><a href=”#”>体育</a></li>

<li><a href=”#”>视频</a></li>

<li><a href=”#”>音乐</a></li>

</ul>

第二步,去除二级导航的列表样式(圆点)

.menu ul {

margin: 0;

padding: 0;

list-style: none;

}

第三步,将二级导航设置为不可见。

.menu ul {

margin: 0;

padding: 0;

list-style: none;

visibility:hidden;

}

第四步,我们利用li:hover ul来实现,当鼠标移动到一级导航li上时,ul属性为可见。

.menu li:hover ul {

visibility:visible;

}

第五步,二级导航的列表占用了一级导航的位置,这里设置二级导航的ul的position为绝对位置,使它脱离文档流。二级ul的绝对位置就是相对一级导航li的。

.menu ul {

position:absolute;

}

第六步,此时,我们得到的是二级导航时横向的,如果把它变成垂直方向呢?这里是因为我们之前写过一个

ul li {

text-align:center;

float:left;

}

导致现在的二级导航的li向左浮动,那么我们直接清除浮动效果。

.menu li ul li {

         clear:both;

}

到此呢,导航菜单基本就结束了,更多细节,自行尝试吧!

2.6.2 图片库

CSS图片库,作用很多,比如我们后面简单商品演示,也要用到,再比如淘宝的店铺首页,很多平铺的宝贝效果,通过图片库的制作也是可以实现的。

第一步,我们来写HTML部分,一行三张图片,也就是三个div块,然后里面插入图像和编辑文字。

<div class=”images”>

<a href=”1.png” target=”_blank”><img src=”1.png” alt=”图1″ width=”200″ height=”200″ ></a>

<div class=”text”>图片描述:图1</div>

</div>

<div class=”images”>

<a href=”2.png” target=”_blank”><img src=”2.png” alt=”图1″ width=”200″ height=”200″ ></a>

<div class=”text”>图片描述:图2</div>

</div>

<div class=”images”>

<a href=”3.png” target=”_blank”><img src=”3.png” alt=”图1″ width=”200″ height=”200″ ></a>

<div class=”text”>图片描述:图3</div>

</div>

第二步,开始CSS,首先写一个浮动

div.images{

float:left;

}

第三步,给三个div块加边框

div.images{

float:left;

border:1px solid red;

}

第四步,给三个div块加内边距和外边距

div.images{

width:auto;

height:auto;

float:left;

border:1px solid red;

margin:10px;

padding:10px;

}

第五步,设置鼠标移动至图片时,图片显示边框效果。下面代码的意思,鼠标移动到div的images时,div的images下的图片会显示边框效果。

div.images a:hover img{

border:2px solid red;

}

第六步,我们可以对图片也进行样式编辑。大家随意吧。

div.images img{

声明;

}

当然上述的<a>标签中的href属性可以是任何链接,如淘宝店铺链接、其他网页链接等。

2.6.3 图片透明

图片透明opacity(不透明),opacity为0时为透明,为1时为不透明,中间值半透明。

第一步,插入图片

<div class=”image”><img src=”3.png” alt=”图片3″ width=”200″ height=”200″ >

第二步,设置CSS透明效果,鼠标未在图片时,透明度为0.3

div.image img{

opacity:0.3;

}

第三步,鼠标放上去的,透明度改变,如何实现呢,img:hover来实现。

div.image img:hover{

opacity:0.8;

}

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

41

本文转载 " https://www.xxkt.org/1609 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注