效果如下
滚动条可滑动,代码可直接使用
简易电子书.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.baidu.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%E8%AF%BE%E7%A8%8B/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.baidu.com/it/u=2044188042,3077327654&fm=253&fmt=auto&app=120&f=JPEG?w=575&h=594" height="200px"> <img src="https://img1.baidu.com/it/u=3937883021,1882300844&fm=253&fmt=auto&app=138&f=JPG?w=362&h=300" height="200px"> <img src="https://img2.baidu.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>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)