IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > PHP开发 > css基本语法及css练习(第四天)

css基本语法及css练习(第四天)

时间:2017-01-18 08:29来源:未知 作者:恪己 点击:
一、CSS 1.伪类选择器 1.1 链接伪类 :link --- 正常显示的状态 :visited --- 访问过的状态 1.2 动态伪类(用户行为伪类) :hover -- 鼠标悬停状态 :active -- 激活的状态 :focus -- 获取焦点的状态 2.文本
一、CSS
1.伪类选择器
1.1 链接伪类
    :link    --- 正常显示的状态
    :visited --- 访问过的状态
1.2 动态伪类(用户行为伪类)
    :hover   -- 鼠标悬停状态
    :active  -- 激活的状态
    :focus   -- 获取焦点的状态
2.文本样式
text-decoration
描述:设置文本修饰线
语法:text-decoration:none|underline|line-through|overline;
3.图像添加链接后,在IE浏览器中将呈现边框线,如何去掉边框线?
方案1:为图像添加border="0"属性;
方案2:通过CSS样式的border属性进行控制;
4.边框样式
border-top-width
描述:设置上边框的宽度
语法:border-top-width:value;
border-top-style
描述:设置上边框的线型
语法:border-top-style:none|solid|dotted|dashed;
border-top-color
描述:设置上边框的颜色
语法:border-top-color:value;
border-top
描述:设置上边框的样式
语法:border-top:width style color;
border
描述:设置边框的样式
语法:border:width style color;
5.CSS样式的书写顺序
A. display
B. float
C. BoxModel
D. 文本
 
 练习题:
网页如图:
IT新手入门网的php网页开发平台给你介绍css快速入门的方法,带你走进css编程的世界

 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{
margin: 0;
padding: 0;
}
a{
color: #000;
text-decoration: none;
}
a img{
border: 0;
}
ul,ol{
list-style:none;
}
.clearfix:after{
display: block;
height: 0;
content: '.';
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
.top-nav{
width: 500px;
margin: 20px auto;
}
.top-nav li{
float: left;
text-align: center;
}
.top-nav a{
display: block;
width: 100px;
height: 85px;
overflow: hidden;
font: 16px/85px 微软雅黑;
}
.top-nav a:hover{
color: #fff;
background-color:#b00;
background-image:url(images/arrow.png);
background-repeat: no-repeat;

     

------分隔线----------------------------
栏目列表
推荐内容