简易电子书html+css
西柚与蓝莓
帮助1人
效果如下
滚动条可滑动,代码可直接使用
简易电子书.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>简易电子书</title>
-
</head>
-
<style type="text/css">
-
article{display: inline-block;border-style: solid;border-width: 3px;margin:auto;height: 520px;}
-
article article{width: 0px;height: 500px;border:none;}
-
article img{width: 200px;height: 200px;margin-left: 20px;margin-right: 50px;margin-top: 0px;}
-
article div{width: 245px;background-color: #C0C0C0;margin:5px;}
-
article div a{margin:auto;text-decoration: none;color:#000000;padding: 10px; font:1.2em/40px microsoft yahei;}
-
div:hover{background-color: #808080;}
-
iframe{margin-left: 255px;margin-top: 0px;}
-
</style>
-
<body>
-
<article>
-
<article>
-
<img src="https://img2.百度.com/it/u=2117023534,1834717210&fm=253&fmt=auto&app=138&f=JPEG?w=719&h=500" alt="图片路径不正确">
-
-
<div><a href="招标法.html#p1" target="win">第一章 </a></div>
-
<div><a href="招标法.html#p2" target="win">第二章 </a></div>
-
<div><a href="招标法.html#p3" target="win">第三章 </a></div>
-
<div><a href="招标法.html#p4" target="win">第四章 </a></div>
-
<div><a href="招标法.html#p5" target="win">第五章 </a></div>
-
<div><a href="招标法.html#p6" target="win">image标签</a></div>
-
<div><a href="招标法.html#p8" target="win"> 列表</a></div>
-
<!-- <iframe name="my-iframe" id="my-iframe" src="img/KVE.jpg" frameborder="2px" width="500px" height="600px" scrolling="yes"></iframe> -->
-
<!-- <a href="http://127.0.0.1:8848/web课程/index.html" target="my-iframe" class="aa1">点击我子网页可以跳转到你需要的地方</a> -->
-
-
</article>
-
<iframe src="招标法.html" frameborder="1" width="800px" height="500px" name="win"></iframe>
-
</article>
-
</body>
-
</html>
招标法.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>66666</title>
-
</head>
-
<style type="text/css">
-
article{margin:auto;}
-
article p{text-indent: 2em;}
-
.h1{
-
text-align: center;
-
text-decoration: inherit;
-
}
-
.mz{
-
text-align: right;
-
color: blue;
-
}
-
</style>
-
<body>
-
<h1 class="h1">一个电子书</h1>
-
<h5 class="mz">193080204</h2>
-
<article>
-
<h3 id="p1">第一章 </h3>
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
-
<h3 id="p2">第二章 </h3>
-
-
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
<h3 id="p3">第三章 </h3>
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
<h3 id="p4">第四章 </h3>
-
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
<h3 id="p5">第五章 评标</h3>
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
<h3 id="p6">img标签</h3>
-
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<img src="https://img1.百度.com/it/u=2044188042,3077327654&fm=253&fmt=auto&app=120&f=JPEG?w=575&h=594" height="200px">
-
<img src="https://img1.百度.com/it/u=3937883021,1882300844&fm=253&fmt=auto&app=138&f=JPG?w=362&h=300" height="200px">
-
<img src="https://img2.百度.com/it/u=2147728552,948143809&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" width="300px" height="200px">
-
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
<h3 id="p7">列表</h3>
-
-
<p> <i>Lorem</i> <del>ipsum dolor sit</del> amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi molestias corrupti veniam enim laboriosam soluta porro vero ratione repellendus accusantium praesentium omnis, blanditiis rem maxime esse mollitia? Voluptate, eaque iste!</p>
-
<strong> <p>x<sup>2</sup> y<sup>2</sup> =z<sup>2</sup> </p></strong>
-
-
</article>
-
<div class="lab" id="p8">
-
<ul style="list-style: none;">
-
<li>
-
问题1：你的性别是什么？
-
<ol type="A">
-
<li>男</li>
-
<li>女</li>
-
</ol>
-
</li>
-
<li>
-
问题2：你的年龄是？
-
<ol type="A">
-
<li><10</li>
-
<li>10-20</li>
-
<li>>20</li>
-
</ol>
-
</li>
-
</ul>
-
-
</div>
-
</body>
-
</html>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhhafhjc
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
