HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第二章课后习题(图文混排效果-web前端工程师-效果)

黑马程序员编著的教材  HTML+CSS+JavaScript网页制作案例教程

第二章:图文混排-课后习题参考代码

。。。。。。。。

记得 关注,收藏,评论哦,作者将持续更新。。。。

我自己做的效果如下:

参考代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排实践案例</title>
</head>
<body>
<img src="images/1.jpg" align="left"  alt="传智播客设计学院学网页、平面、UI设计" hspace="30" width="350">
<h2><font size="5" color="#836958" face="微软雅黑">Web前端开发工程师</font></h2>
<p><font size="3" color="#00659a" face="微软雅黑">技术要求:</font></p>
<p><font size="3" >&nbsp;&nbsp;&nbsp;&nbsp;了解常用的一些JS框架,如jQuery、YUI等;掌握最基本的JavaScript计算方法编写;对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有较多的了解;基本掌握前沿技术(HTML5+CSS3)。<font color="#00659a"><ins><em>&nbsp;Web前端技术&nbsp;</em></ins></font>你究竟掌握了多少...</font></p>
<p><font size="3" color="#00659a" face="微软雅黑">更新时间:2020年05月19日20点(已有<font size="5" color="#f00"><strong>&nbsp;323&nbsp;</strong></font>人点赞)</font></p>
<hr size="1" color="#ddd" />
<p><font color="#836958" size="5" face="微软雅黑">相关技术文章<strong><font size="5" color="#f00">&nbsp;8&nbsp;</strong></font>篇</font></p>
</body>
</html>

如上用到的图片如下:

记得把图片放到images文件夹里边,否则会提示找不到图片。 

  • 6
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
好的,下面是一个简单的HTML5、CSS3、JavaScript制作的关于杭州土特产品的网页代码,包含了图文混排和一些动画效果: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>杭州土特产品</title> <style> body { background-color: #e6e6e6; margin: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; } .product { width: 30%; margin-bottom: 30px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.3); transition: transform 0.3s ease-in-out; cursor: pointer; } .product:hover { transform: scale(1.05); } .product img { width: 100%; height: auto; object-fit: cover; } .product h3 { font-size: 24px; margin: 20px; text-align: center; } .product p { font-size: 16px; margin: 0 20px 20px 20px; text-align: justify; line-height: 1.5; height: 100px; overflow: hidden; } .product:hover p { height: auto; } .product-info { position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.8); color: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease-in-out; } .product:hover .product-info { opacity: 1; } .product-info h3 { font-size: 32px; margin-bottom: 10px; } .product-info p { font-size: 16px; margin: 0 20px 20px 20px; text-align: center; line-height: 1.5; } @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } .header { background-color: #fff; padding: 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1; } .logo { font-size: 24px; font-weight: bold; text-transform: uppercase; color: #333; } .menu { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: -200px; height: 100vh; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); transition: left 0.3s ease-in-out; z-index: 1; } .menu.open { left: 0; } .menu a { font-size: 24px; font-weight: bold; color: #333; margin: 10px; transition: color 0.3s ease-in-out; } .menu a:hover { color: #f00; } .menu .close { font-size: 36px; position: absolute; top: 20px; right: 20px; cursor: pointer; } @media (max-width: 768px) { .product { width: 45%; } .header { padding: 10px; } .logo { font-size: 16px; } .menu { left: -100%; } .menu.open { left: 0; } } </style> </head> <body> <header class="header"> <div class="logo">杭州土特产品</div> <div class="menu-toggle">☰</div> <nav class="menu"> <div class="close">×</div> <a href="#">首页</a> <a href="#">产品介绍</a> <a href="#">联系我们</a> </nav> </header> <div class="container"> <div class="product"> <img src="https://picsum.photos/id/237/300/200" alt=""> <div class="product-info"> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <div class="product"> <img src="https://picsum.photos/id/238/300/200" alt=""> <div class="product-info"> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <div class="product"> <img src="https://picsum.photos/id/239/300/200" alt=""> <div class="product-info"> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <div class="product"> <img src="https://picsum.photos/id/240/300/200" alt=""> <div class="product-info"> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <div class="product"> <img src="https://picsum.photos/id/241/300/200" alt=""> <div class="product-info"> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <div class="product"> <img src="https://picsum.photos/id/242/300/200" alt=""> <div class="product-info"> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> <h3>产品名称</h3> <p>这是一段产品描述</p> </div> </div> <script> const menuToggle = document.querySelector('.menu-toggle'); const menu = document.querySelector('.menu'); const close = document.querySelector('.close'); menuToggle.addEventListener('click', function() { menu.classList.add('open'); }); close.addEventListener('click', function() { menu.classList.remove('open'); }); </script> </body> </html> ``` 你可以在此基础上进行调整和修改,以符合你的实际需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

xiaozhima-dun

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

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

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

打赏作者

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

抵扣说明:

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

余额充值