收藏
批改状态：不合格
老师批语：没写完
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h2>网址导航</h2> <ul style="float: left"> <li><a href="http://www.sohu.com" target="main">搜狐</a></li> <li><a href="http://www.baidu.com" target="main">百度</a></li> <li><a href="http://www.taobao.com" target="main">淘宝</a></li> <li><a href="http://www.wwzzw.com " target="main">锦润</a></li> <li><a href="http://www.PHP.cn" target="main">php中文网</a></li> </ul> <iframe src="http://www.baidu.com" frameborder="1" width="400" height="500" name="main" style="float:left;"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
2. 实例演示: css样式设置的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css"> <!--这里只做对比说明 -->
<style>
p{color: darkblue}
</style>
</head>
<body>
<p style="color: darkgoldenrod">这是一个文本</p>
<p>这是一个文本</p>
<!-- 元素的css样式优先级：内联样式 > 内部样式 > 外部样式 -->
</body>
</html>点击 "运行实例" 按钮查看在线实例
3. 实例演示: css的id, class与标签选择器的使用规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css"> <!--这里只做对比说明 -->
<style>
#blue{color:blue;}
.color{color:red;}
p{color:darkgreen}
</style>
</head>
<body>
<p id="blue">这是一个文本,使用ID设置css样式</p>
<p class="color">这是一个文本，使用class设置样式</p>
<p>这是一个文本，使用标签设置样式</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<!--这里只做对比说明 -->
<style>
.box_1 {
width: 260px;
/*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的300px */
height: 180px;
/*因为使用了padding，所以高度需要减去10*2的长度，才是真正的200px */
background: darkslateblue;
margin: 10px;
padding: 10px 20px;
}
.box_2 {
width: 220px;
/*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的260px */
height: 160px;
/*因为使用了padding，所以高度需要减去10*2的长度，才是真正的180px */
background: rgb(5, 236, 63);
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="box_1">
<div class="box_2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
