在html中插入图片

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>* {box-sizing: border-box;}body{margin: 0;font-family: Arial;padding: 10px;background: #f1f1f1;}.clearfix {overflow: auto;}.shadow_box{box-shadow: 0px 3px 10px 1px #888888;}.up-leader {background-color: #333; list-style-type: none;text-align: center;position:sticky;margin: 0;padding: 0;}.up-leader li:not(.dropdown) {display: inline-block;font-size: 20px;padding: 20px;}.up-leader li a, .dropbtn{display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}.up-leader li.dropdown{display: inline-block;font-size: 20px;padding: 20px;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}div.dropdown-content a {color:#000000;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display:block;}div.sticky{position: sticky;top: 0;background:azure;text-align: center;}.img1{float:left;clear:both;position: relative;margin: 5px;padding: 5px;display: flex;justify-content: center;opacity: 0.8;overflow: auto;}.side-leader ul{list-style-type: 0;margin: 0;padding: 0;width: 7%;height: 100%;background-color:white ;box-shadow: 0px 0px 1px 0px #888888;position:fixed;overflow: auto;border-radius: 25px;}.side-leader ul li a{display: block;color:#000;padding: 8px 16px;text-decoration: none;font-family:"黑体";}li:hover{background-color: #555;color: white;}.leftcolumn{float: left;width: 8%;}.midcolumn {   float: left;width: 50%;}/* 右列 */.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;}/* 伪图像 */.fakeimg {/*background-color: #aaa;*/width: 852px;background: url(img/6.jpg);box-shadow:1px 3px 15px 1px #888888 ;padding: 20px;}/* 为文章添加卡片效果 */.card {background-color: white;padding: 20px;margin-top: 20px;/*box-shadow: 0px 0px 1px 0px #888888;*/}/* 清除列之后的浮动 */.row:after {content: "";display: table;clear: both;}/* 页脚 */.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;}</style><title>XR官网</title></head><body><div class=" clearfix shadow_box"><img class="img1"   src="img/4.png"   width=100px height=100px/></div><div class="sticky  "><ul class="up-leader"><li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Home</a></li><li><a href="#news">News</a></li><li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Contact</a></li><li class="dropdown"><a class="dropbtn" href="index.html">Our World</a><div class="dropdown-content"><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></li></ul><div class=" side-leader "><ul ><li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">核心科技</a></li><li><a href="index.html">党政板块</a></li><li><a href="index.html">经营情况</a></li><li><a href="index.html">未来发展</a></li><li><a href="index.html">联系我们</a></li></ul></div></div><div class=""><div class="leftcolumn"><p></p></div><div class="midcolumn"><div class="card"><h2>星锐科技</h2><h5>科技造就未来</h5><div class="fakeimg" style="height:300px;"></div></div></div></div><!--<div class="row"><div class="leftcolumn"><p></p></div><div class="midcolumn"><div class="card"><h2>TITLE HEADING</h2><h5>Title description, Dec 7, 2017</h5><div class="fakeimg" style="height:200px;">Image</div><p>Some text..</p><p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></div><div class="card"><h2>TITLE HEADING</h2><h5>Title description, Sep 2, 2017</h5><div class="fakeimg" style="height:200px;">Image</div><p>Some text..</p><p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></div></div><div class="rightcolumn"><div class="card"><h2>About Me</h2><div class="fakeimg" style="height:100px;">Image</div><p>Some text about me in culpa qui officia deserunt mollit anim..</p></div><div class="card"><h3>Popular Post</h3><div class="fakeimg"><p>Image</p></div><div class="fakeimg"><p>Image</p></div><div class="fakeimg"><p>Image</p></div></div><div class="card"><h3>Follow Me</h3><p>Some text..</p></div></div></div><div class="footer"><h2>Footer</h2></div>--></body>
</html>

在html中插入图片相关推荐

R语言ggplot2可视化在可视化的接种中插入图片、添加图片实战
R语言ggplot2可视化在可视化的接种中插入图片.添加图片实战目录 R语言ggplot2可视化在可视化的接种中插入图片.添加图片实战
PHP下使用FPDF在PDF中插入图片
Cell函数,该函数主要用于向PDF 文档中插入文本. 通常,PDF 文档是由文本和图片共同组成的. FPDF 中使用Image函数向PDF中插入图片,其语法格式如下所示: Image(string ...
图片适应窗口_在word中插入图片，如何避免失真模糊？实用文档建议收藏
插入图片在WORD文档中插入图片是一个相当常用的操作. 一般通常的做法,是使用工具截图或在其他工具中复制的图片类内容,然后在WORD文档中粘贴出来. 还有一种做法,是使用功能区"插入&qu ...
打开另外一个页面_如何在PDF页面中插入图片？
如何给PDF添加图片?有些时候为了丰富PDF的文档内容,需要添加一些图片,相比Word或PPT文档可以直接插入图片,而PDF的操作很多人可能并不熟悉,下面一起来看看如何在PDF文档中插入图片. 关于P ...
PDF编辑器哪个好，如何在PDF中插入图片背景
由于PDF文档不像Word那么容易编辑,并且具有较强的保密性,所以PDF文档的编辑需要借助其他第三方的PDF编辑器才能对PDF文件进行编辑,下面,我就教大家如何利用PDF编辑器在PDF中插入图片背景, ...
Android EditText中插入图片并响应点击事件
EditText中插入图片基本就是两种方法: 1,通过Html.fromHtml(..)来实现[mw_shl_code=java,true]eText.append(Html.fromHtml(&qu ...
使用SQL向SQL Server2005中插入图片
今天找到了用SQL向SQL Server2005中插入图片的方法,特此记录一下,免得自己忘记. update dbo.BIZ_RPTTL_PTN_M set RPTTL_M_RPT_IMG = (SE ...
Github的README中插入图片，Github仓库项目主页显示图片
Github仓库主页的 README.md 支持 MarkDown 文本,也支持图片显示.显示图片需要提供<img>标签,这个链接可以位于其他服务器上,也可以是GitHub自身的仓库文件. ...
装饰博客全攻略（如何在博客首页或博客中插入图片、音乐、视频等）
一.在博客中插入图片. 以下是代码: <img src="http://图片地址" border="0" width="344" he ...
[转载] 使用openpyxl模块向Excel中插入图片
参考链接: Python | 使用openpyxl模块在Excel工作表中绘制图表 2 使用openpyxl模块向Excel中插入图片示例Python实现结果展示示例向一个Excel表格中A1位 ...

在html中插入图片

在html中插入图片

在html中插入图片相关推荐

最新文章

热门文章