1．在文件夹“ MyWeb+学号”下新建一个SyntheticOption.html文件。在SyntheticOption.html中新建一个div,id名为“d1”,在d1中对应的div标签下添加一个子类div,id名为d2,在d2下放一个a标签,a标签包含的内容为“网页设计”四个字(4分)。 2．在d1的div中设计宽度为300px,高度为200px,边框为1px实线红色边框,并使用外边距居中d1对应的div,然后添加背景图，图片为images中的t2.jpg，修改背景图尺寸同div尺寸，然后调整d1距离浏览器上方30px（8分)。 3．设置d2对应的div宽为100px,高为100px,背景颜色为黄色(yellow),然后让其在d1居中,效果如下图-2所示（8分）。 4．在d2下的a标签中添加超链接跳转到这个地址https://www.baidu.com/，去掉a标签中的样式效果（如下下划线），字体加粗，字体颜色设置为红色，鼠标悬停到“网页设计”字样的时候显示蓝色（8分）。

时间: 2024-02-12 10:03:11 浏览: 81

以下是SyntheticOption.html的代码，包括要求的所有功能： ```html <!DOCTYPE html> <html> <head> <title>Synthetic Option Example</title> <style> #d1 { width: 300px; height: 200px; border: 1px solid red; margin: 0 auto; background-image: url(images/t2.jpg); background-size: 300px 200px; background-position: center; position: relative; top: 30px; } #d2 { width: 100px; height: 100px; background-color: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #d2 a { text-decoration: none; font-weight: bold; color: red; } #d2 a:hover { color: blue; } </style> </head> <body> <div id="d1"> <div id="d2"> <a href="https://www.baidu.com/">网页设计</a> </div> </div> </body> </html> ``` 在这个例子中，我们首先在SyntheticOption.html中新建了一个div，id名为“d1”，并在d1中添加了一个子类div，id名为“d2”，和一个a标签。接着，我们设置了d1对应的div的宽度为300px，高度为200px，并使用了1px实线红色边框。我们还使用了外边距将d1居中，并添加了背景图。接着，我们设置d2对应的div的宽度为100px，高度为100px，并将其在d1中居中。我们还设置了d2的背景颜色为黄色。最后，我们在d2下的a标签中添加了一个超链接，去掉了下划线，加粗了字体，并将字体颜色设置为红色。当鼠标悬停到“网页设计”字样时，字体颜色显示为蓝色。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通