Html-DW(1)链接CSS & div基础

新建CSS样式,比如说first.css:

*{background-color:#09C}

明确样式是设置背景颜色,在Html代码中head中设置:

<head>

<meta charset="UTF-8">

<title>MyBlog</title>

<link href="css/first.css" type="text/css" rel="stylesheet">

</head>


div就是框架,容器。通常的设计规则是,一个div子集不要超过三个,前中后即可。

尝试制作第一个页面:

<head>

<meta charset="UTF-8">

<title>MyBlog</title>

<link href="css/main.css" type="text/css" rel="stylesheet">

</head>


<body>

<div id="contain">

    

    </div>

</body>

main.css代码:

*{background-color:#09C}

#contain{background-color:#634;width:400px;height:100px;}


效果:

实际上现在的网页多数都是大div套小div的

http://edu.51cto.com    来自51cto的教学

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
DW(Dreamweaver)是一个网页制作软件,可以通过使用JavaScript和jQuery等技术实现图片自动切换效果。下面是一个基于DIVCSS实现的图片自动切换效果的示例代码: HTML代码: ```html <div class="slideshow-container"> <div class="mySlides fade"> <img src="image1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="image2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="image3.jpg" style="width:100%"> </div> </div> ``` CSS代码: ```css .slideshow-container { position: relative; width: 100%; height: 400px; } .mySlides { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .mySlides img { width: 100%; height: 100%; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } ``` JavaScript代码: ```javascript var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // 切换时间间隔为2秒 } ``` 这段代码实现了每2秒钟自动切换一次图片,并且在切换时使用了淡入淡出的效果。你可以根据自己的需要修改切换时间间隔和淡入淡出的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

limaning

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值