收藏
批改状态：合格
老师批语：这些标签 比较常用, 特别是容器的概念要理解
内联标签使用
<ul> <li><a href="http://www.baidu.com" target="main">百度</a></li> <li><a href="https://www.sogou.com/" target="main">搜狗</a></li> <li><a href="https://www.so.com/" target="main">360</a></li> </ul> <iframe srcdoc="<h1> 欢迎使用搜索 </h1>" name="main" width="1200" height="800"></iframe>
点击 "运行实例" 按钮查看在线实例
2.css 优先级
内联样式 > 内部样式 >外部样式
<style>
li{
color:yellow;
}
.test{
color:green;
}
#test1{
color: #0d3f6f;
}
</style>
</head>
<body>
<ul>
<li class="test" id="test1">css层级优先实例演示1</li>
<li class="test">css层级优先实例演示2</li>
<li class="test">css层级优先实例演示3</li>
<li class="test">css层级优先实例演示4</li>
<li class="test">css层级优先实例演示5</li>
<li class="test" style="color: red">css层级优先实例演示6</li>
</ul>点击 "运行实例" 按钮查看在线实例
盒子模型
<style>
div{
width: 150px;
height: 150px;
}
#box1{
background-color: red;
margin: 10px 20px 30px 40px; /*外边距*/
}
#box2{
border: 15px solid ;
background-color: yellow;
padding: 10px 20px 30px 40px; /*内边距*/
}
#box3{
margin-top: 20px;
border: 15px solid ; /*边框*/
background-color: blue;
margin-bottom: 20px;
}
#box4{
background-color: green;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
<div id="box4">盒子4</div>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
