<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 100px;
}
#box1>div{
width: 500px;
height: 400px;
background-color: lightgreen;
margin: 10px;
}
div:nth-child(2){
color: blue;
}
a.aaa{
color: yellow;
}
/* a:nth-child(4){
font-size: 30px;
} */
/* [href *= 'b22']{
font-size: 30px;
} */
a.aaa+a{
font-size: 30px;
}
/* img:nth-child(4){
width: 200px;
} */
img[src $= '.png']{
width: 200px;
}
p:nth-child(2){
background-color: yellow;
}
/* h1:nth-child(4){
font-size: 50px;
} */
h1.aaa+h1{
font-size: 50px;
}
/* a:nth-child(even){
color: orange;
} */
[href *= '2']{
color: orange;
}
</style>
</head>
<body>
<!-- 作业要求：
1.设置 box1 的子代div元素 属性（宽500px 高300px 背景颜色 浅绿色 外边距10px）
2.将处于第二个子元素的div 字体颜色变成蓝色
3.将类名为 'aaa'的 a标签设置成 黄色
4.将 内容为 a-4的a标签 文本大小设置成30px
5.将png格式的图片宽度设置成200px
6.将位于第二个子元素的p标签背景颜色设置成黄色
7.将文本 h1-4设置成50px
8.将 文本a-2 和a-4 对应的超链接标签设置成 橙色
-->
<div id="box1">
<div class="inner1">
<p>p-1</p>
<p>p-2</p>
<p class="aaa">p-3</p>
<p>p-4</p>
<p>p-5</p>
</div>
<div class="inner2">
<h1>h1-1</h1>
<h1>h1-2</h1>
<h1 class="aaa">h1-3</h1>
<h1>h1-4</h1>
<h1>h1-5</h1>
</div>
<div class="inner3">
<a href="http://www.a01.com">a-1</a>
<a href="http://www.a21.com">a-2</a>
<a href="http://www.a03.com" class="aaa">a-3</a>
<a href="http://www.b22.com">a-4</a>
<a href="http://www.a31.com">a-5</a>
</div>
<div class="inner4">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.png" alt="">
<img src="./images/5.jpg" alt="">
</div>
</div>
</body>
</html>
HTML+CSS.zip
需积分: 0 77 浏览量
2023-11-06
00:23:27
上传
评论
收藏 18.06MB ZIP 举报
HTML+CSS.zip （129个子文件） 
style.css 69B style2.css 66B style.css 58B style.css 58B style2.css 29B style2.css 28B
index.html 3KB photos.html 3KB 1.盒模型.html 2KB 1.overflow.html 2KB 1.盒模型.html 2KB 4.CSS3新增选择器.html 2KB 伪类选择器.html 2KB 4.属性选择器.html 2KB 2.文本样式2.html 1KB 属性选择器.html 1KB 6.伪类选择器2.html 1KB 3.复合选择器.html 1KB 02.html 1KB test.html 1KB 3.复合选择器.html 1KB 布局.html 1KB display应用.html 1KB 2.html 1KB 5.position-absolute.html 1KB 7.position-fixed.html 1KB 1.文本样式.html 1KB 8.position3-absolute.html 1KB 4.position-absolute.html 1KB 6.position-relative2.html 1KB 7.position-fixed.html 1KB ex.html 1KB test.html 1KB 1.文本样式.html 1KB 01.html 1KB ex.html 1KB 5.CSS3新增选择器2.html 1KB 10.postion-fixed.html 1KB float应用.html 1KB 2.盒模型简介.html 1KB 3.CSS复合选择器.html 1KB test.html 1KB 4.html 1KB float3.html 1002B 6.positon.html 989B 2.html 969B display1.html 955B 9.position-relative.html 936B 4.position.html 935B 1.html 928B 7.position2.html 922B 3.盒模型的类型.html 920B 5.伪类选择器1.html 907B 5.position-relative.html 905B 6.position-reletive.html 903B 4.属性选择器.html 889B 重要.html 886B 1.CSS选择器.html 875B 3.html 872B 2.背景样式.html 872B 6.CSS3新增选择器3.html 857B 3.position.html 839B 5.伪类选择器.html 831B 1.选择器.html 829B test.html 824B 3.box-shadow.html 815B 2.html 815B 2.尺寸类型.html 812B float2.html 812B 3.背景样式.html 804B 1.html 792B 1.html 780B 2.CSS引入方式.html 767B 2.CSS的引入方式.html 763B 重要.html 762B border.html 748B 5.box-sizing.html 745B 7.CSS3新增选择器4.html 737B 2.尺寸类型.html 713B float1.html 695B 5.border.html 690B 1.选择器.html 683B 2.CSS引入方式.html 671B 4.border.html 657B 7.伪类选择器.html 647B 4.box-shaow.html 645B 6.伪类选择器2.html 607B 7.伪类选择器3.html 592B 伪类选择器2.html 588B welcome.html 561B 8.CSS3新增选择器5.html 558B welcome.html 544B 圆角.html 536B display2.html 531B 3.圆角.html 514B 4.圆角.html 506B 3.html 464B 复习.html 383B
04.jpg 1.9MB 07.jpg 569KB共 129 条
- 1
- 2
资源评论
2303_80754412
- 粉丝: 0
- 资源: 1
最新资源
- 用户研究系列之Persona介绍（用户画像）
- Image_1715110604427.jpg
- mYzh..trashed-1716951334-.jpg
- Alibaba SpringCloud集成nacos实现配置中心
- 那些好的不像话的心流体验
- 基于pytorch的卷积神经网络识别是否为奥特曼的项目python源码+文档说明+数据集(课程设计)
- 基于卷积神经网络的图像风格迁移python源码+文档说明+界面图片(课程设计)
- 河北地质大学毕业设计-基于卷积神经网络的垃圾分类研究代码python源码+文档说明
- 菜鸟网络运营模式的浅析
- Alibaba SpringCloud集成nacos实现注册中心-源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
