css层叠样式表基础学习笔记--第三章 伪类和伪元素

第三章 伪类和伪元素

    • 3-01 静态伪类
    • 3-02 动态伪类
    • 3-03 实战我要自学网导航hover伪类
    • 3-04 伪元素1
    • 3-05 伪元素2
    • 3-06 实战after伪元素

3-01 静态伪类


<html>
	<head>
		<meta charset="UTF-8">
		<title>静态伪类title>
		<style type="text/css">
			a:link{
				color: green;
			}
			
			a:visited{
				color: yellow;
			}
			
		style>
		
	head>
	<body>
		
		
		
		    
		    
		
		
		
		<a href="http://www.baidu.com">百度a>
		
		
	body>
html>

3-02 动态伪类


<html>
	<head>
		<meta charset="UTF-8">
		<title>动态伪类title>
		<style type="text/css">
			div:hover{
				color: green;
				font-weight: 600;
				font-size: 30px;
			}
			
			div:active{
				color: red;
			}
			
			input:focus{
				color:plum;
			}
		style>
		
	head>
	<body>
		
		
		
		
		
		
		
		<div>我要自学网div>
		
		<input type="text" value="请输入....." />
		
		
	body>
html>

3-03 实战我要自学网导航hover伪类


<html>
	<head>
		<meta charset="UTF-8">
		<title>实战我要自学网导航hover伪类title>
		<style type="text/css">
			nav{
				width: 1000px;height: 40px;background: black;margin: 100px;auto;
			}
			nav div{width:100px;height:40px;line-height:40px;float:left;color: #ffffff;text-align: center;}
			
			nav div:hover{
				font-size: 20px;
				color: deepskyblue;
			}
		style>
	head>
	<body>
		
		<nav>
			<div>电脑办公div>
			<div>平面设计div>
			<div>室外设计div>
			<div>机械设计div>
			<div>影视动画div>
			<div>室外设计div>
			<div>程序设计div>
			<div>网页设计div>
			<div>会计课程div>
			<div>工业自动div>
		nav>
		
		
	body>
html>

3-04 伪元素1


<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素1title>
		<style type="text/css">
			div::first-letter{
				color: red;
			}
			
			div::first-line{
				color:blue;
			}
		style>
	head>
	<body>
		
		
		
		
		
		
		
		
		<div>
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
			我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网
		div>
		
		
		
		
	body>
html>

3-05 伪元素2


<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素1title>
		<style type="text/css">
            /*div::before{
            	content: "www.51zxw.net";
            }*/
            div::after{
            	content: "www.51zxw.net";
            	color: red;
            	font-size: 12px;
            	display: block;
            }
            
		style>
	head>
	<body>
		

        
        
        

              

		<div>
			我要自学网
		div>
		
		
		
		
	body>
html>

3-06 实战after伪元素


<html>
	<head>
		<meta charset="UTF-8">
		<title>实战after伪元素title>
		<style type="text/css">
			ul{
				width:200px;margin: 0 auto;
			}
			
			ul li{
				width: 200px;height: 50px;line-height: 50px;text-align: center;
			}
			
			ul li::after{
				content: ""; /*添加空的内容*/
				display: block;
				border-bottom: 1px solid red;
			}
			
			ul li div{
				border-bottom: 1px solid red;
			}
		style>
		
	head>
	<body>
		
		
		<ul>
			<li>我要自学网1li>
			<li>我要自学网2li>
			<li>我要自学网3li>
			<li>我要自学网4li>
			<li>我要自学网5li>
		ul>
		
		
		
		<ul>
			<li>我要自学网1<div>div>li>
			<li>我要自学网2<div>div>li>
			<li>我要自学网3<div>div>li>
			<li>我要自学网4<div>div>li>
			<li>我要自学网5<div>div>li>
		ul>
	body>
html>

你可能感兴趣的:(css层叠样式表基础)