html制作企业官网

文章目录

html制作企业官网

效果图显示。

首先给出代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>* {box-sizing: border-box;}body{margin: 0;}.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:#AAAAAA ;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: 7%;}.midcolumn {   float: left;width: 68%;}/* 右列 */.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;}/* 伪图像 */.fakeimg {background-color: #aaa;width: 100%;padding: 20px;}/* 为文章添加卡片效果 */.card {background-color: white;padding: 20px;margin-top: 20px;}/* 清除列之后的浮动 */.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="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li class="dropdown"><a class="dropbtn" href="index.html">Our World</a><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></li></ul><div class=" side-leader "><ul ><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><li><a href="index.html">联系我们</a></li></ul></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制作企业官网相关推荐

准备创建独立站？2022年最新制作企业官网必看的网页设计全攻略
不管你选择自行架设或是委托给网页设计公司,网站架设从主机伺服器.网域名称.网页版面设计.网站视觉呈现,再到后续网站经营的追踪工具.行销推广策略,当中有大量的选择仍需要你自行决定,就算是网页设计公司也只 ...
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
极致CMS个人博客企业官网模板
简介: 这是极致CMS的个人博客企业官网模板非常好看,您可以自由的进行二次开发,做网站.但,有一点需要特别注意,不能做形成竞争行业的系统.比如用极致CMS做一个相似的CMS建站系统而不经过官方同意, ...
企业官网建设需要多少钱
敖游之前在多家网络公司任职,接触过大量做企业品牌官网的客户,价格这块算是比较了解.写这篇文章是希望,通过敖游在互联网行业多年的从业经验,能给到企业建站负责人一些参考,避免企业在建设品牌官网的时候,多走 ...
阿里云建站云企业官网标准版、高级版和尊贵版区别对比表
阿里云建站云·企业官网标准版.高级版和尊贵版有什么区别?新手站长网分享阿里云建站定制云企业官网版本功能区别亮点及选择方法: 云企业官网标准版/高级版/尊贵版对比阿里云建站云·企业官网定制分为标准版. ...
建站案例 | 巧用科技蓝，打造有个性、高颜值的企业官网
很多企业在搭建企业网站的时候,经常会烦恼该如何设计,才能让官网看起来显得高大上. 为了实现"高大上",企业可谓是费尽心思,参考借鉴了大量不同风格的网站,看着是博采众长,可最后呈现的 ...
企业官网模板搭建网站的方法分享
近年来,企业官网的建设成为了一门艺术.企业官网模板是一个很好的展示自己公司形象和产品特色的平台,尤其是对于新成立的公司来说,企业官站是十分重要的,不仅要有足够的实用性和吸引力,还要具备一定的视觉效果 ...
阿里云企业官网建站标准版、高级版和尊贵版功能区别选择攻略
阿里云建站云·企业官网标准版.高级版和尊贵版有什么区别?不同版本在会员管理.电商及支付.绑定域名.banner及页面制作等方面有区别:续费价格方面标准版续费980元/年.高级版续费1980元/年.尊贵 ...
html期末作业代码网页设计 web网页设计实例作业 ——中国风文化传媒企业官网(6页) 简单网页设计作业静态HTML文化主题网页作业
web网页设计实例作业 --中国风文化传媒企业官网(6页) 简单个人网页设计作业静态HTML文化主题网页作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

html制作企业官网

html制作企业官网

文章目录

html制作企业官网相关推荐

最新文章

热门文章