28第二部分综合实例

最新推荐文章于 2024-06-10 14:11:10 发布
最新推荐文章于 2024-06-10 14:11:10 发布
阅读量129 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23666533/article/details/75174489
版权
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>综合实例</title>
<meta charset="utf-8" >
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,
width=device-width,initial-scale=1.0">
<!--最大最小缩放比例为1，其实就是不允许点击缩放，设定内容和设备的屏幕等宽，等高-->
<style type="text/css">
header{width:100%;height:80px;background:green}
aside{width:20%;height:540px;background:red;float:left}
section{width:80%;height:540px;background:gray;float:left;overflow:auto}
footer{width:100%;height:50px;background:yellow;clear:left}
figure{padding:0px}
h4{display:inline}
img{max-width:70%}
ul{list-style-type:none}
li{display:inline}
a{text-decoration:none}
</style>
</head>
<body>
<header>
<hgroup>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<h4>移动端页面练习</h4>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt=""></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
</ul>
</nav>
</aside>
<section>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img  src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
</section>
<footer>
<ul>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>

</ul>
</footer>
</body>
</html>
qq_23666533
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第八章 综合案例
weixin_51670063的博客
11-27 611
kettle第八章作业
综合案例。
qq_51483414的博客
06-07 310
无
Multisim仿真实例（综合）
wqsdqw的博客
04-21 2379
Multisim仿真实例打包分享，看你想要
Java GUI 综合应用实例
热门推荐
宇智波Akali的博客
05-01 1万+
Java GUI 综合应用实例 其实是一次Java上机实验，题目包含：按钮，文本框、文本域、复选框、单选按钮组、面板、弹窗JDialog，列表JList，下拉列表JComboBox，滚动条JScrollPane, 以及以上所有组件对应的常用监听器方法的使用。码这做备...
C#实验 综合实例：生命游戏 game of life
最新发布
一枚射手座的程序媛
06-10 1190
面向对象C#实验综合实例：生命游戏 game of life。完整代码，可以运行。
第10章嵌入式Linux综合项目实例.ppt
11-21
第二节：基于蓝牙技术的嵌入式点菜系统 系统功能框图：本系统采用C/S结构，以上述模型为原型，实现了简单的基于蓝牙技术的点菜系统。将嵌入式开发板ARM2410S作为无线点菜器，即客户端；PC机作为后台管理端，即...
创新思维综合教程第二册Unit2,PowerPoint演示
11-06
【创新思维综合教程第二册Unit2 PowerPoint演示】是针对创新思维教育的一份教学材料，旨在帮助学习者理解和掌握创新思维的原理与实践方法。在这一单元中，我们可能将深入探讨创新思维的重要性和它在现代生活及工作中...
台达plc第8章PLCde综合应用实例2022优秀文档.ppt
11-16
在第8章中，我们将深入探讨PLC的综合运用实例，学习如何设计并实现有效的控制程序。 编程是PLC控制系统设计的核心部分。编写程序时，需遵循三个基本原则： 1. **符合PLC技术要求**：理解并正确使用PLC的指令集，...
CAXA数控车自动编程综合实例ppt课件.ppt
11-13
第二个实例则关注凹凸圆弧的加工，通过绘制加工轮廓图，演示了粗车轮廓的过程，包括毛坯拾取和刀具轨迹的生成，最后进行了轨迹仿真的步骤，以确保加工的准确无误。 这两个实例充分展示了CAXA数控车XP在实际操作中的...
第十二章 综合实例(photoshop 滤镜）.doc
06-29
本章节主要介绍了 Photoshop 滤镜的应用实例，其中包括两部分的实践操作：银币图案制作和爆炸效果制作。 银币图案制作 在制作银币图案时，需要使用 Photoshop 的滤镜功能，包括增加杂色、模糊、动感模糊等效果。...
38video视频播放
qq_23666533的博客
07-21 950
1video视频播放 不支持 autoplay（autoplay/空）自动播放；loop（loop/空）循环播放; preload（auto/none/metadata）是否自动进行加载-->
12特殊符号的使用
qq_23666533的博客
07-18 597
特殊符号的使用 空格&#160&#160&#160&#160&#160&nbsp&nbsp&nbsp&nbsp&nbsp的使用 小于大于号&lthtml&gt的使用
16table布局和综合实例
qq_23666533的博客
07-15 507
table布局和综合实例
20header和footer
qq_23666533的博客
07-19 447
header和footer body{height:708px;} header{width:100%;height:10%;background:green;} footer{width:100%;height:10%;background:blue;} #div0{width:100%;height:80%;} #div3{width:20%;height:100%;backgr
3左右居中对齐
qq_23666533的博客
07-15 321
例2改进 八阵图 作者：杜甫 功盖三分国，名成八阵图。 江流石不转，遗恨失吞吴。
37progress和meter元素
qq_23666533的博客
07-21 303
9progress和meter元素
2换行标题分割线
qq_23666533的博客
07-15 284
例2换行标题分割线 八阵图 作者：杜甫 功盖三分国，名成八阵图。 江流石不转，遗恨失吞吴。
30select元素
qq_23666533的博客
07-20 280
2select元素 请选择你的性别 男 女 伪娘 请选择你的性别 男 女 伪娘
5超链接上
qq_23666533的博客
07-15 266
***超链接 1. 百度 2. 本地 3. 4.联系我 5.下载
"CoreIDRAW X4综合实例设计与制作教程PPT课件
在项目的第二个任务中，学习者将进一步学习包装设计与制作的艺术构思和方法。包装设计是重要的营销手段，能够吸引消费者的注意力并传达产品的特点和品牌形象。学习者将了解如何通过设计创意和艺术构思来实现包装设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值