博客列表 >html/css基础知识第一课:id、class等常用选择器用法 --20180810

html/css基础知识第一课:id、class等常用选择器用法 --20180810

学先森的博客
学先森的博客原创
2018年08月14日 07:55:51767浏览

第一天作业


实例

<!doctype html> <!-- 声明 html文档-->
  <!-- 文件名: lesson01.html -->
<html>
<head>  <!-- 定义网页头部 -->
	<title>php中文网--视频教程</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/style.css">
	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
	<style type="text/css">
		/*内部样式只针对当前页*/
		/*标记选择器*/
		body{background:orange;}
		/*id选择器*/
		#box{width:200px; height:200px; background:pink;}
		/*class选择器*/
		.main{width:300px; height:300px;background:#ccc;}
		/*属性选择器*/
		a[href="http://www.baidu.com"]{color:#DDD;}
		/*派生选择器*/
		div a{color:white;}
		#box a{color:#000;}
	

	</style>
</head>
<body>
	<img src="">
	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.php.cn">php中文网</a>
	<a href="demo.html">demo</a>
	<a href="#">#</a>
	<div id="box">
		<a href="">php</a>
	</div>
	<div class="main"></div>
	<div style="width:100px; height:100px; background:#222">
		<a href="">xs</a>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码

1.jpg

2.jpg

完成

手写代码补上了

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
灭绝师太2018-08-13 15:12:541楼
作业名最好以自己当天学习的知识点命名,代码整洁规范 ps手写代码呢?