时间:2023-08-31 16:48:01 | 来源:网站运营
时间:2023-08-31 16:48:01 来源:网站运营
制作一个企业网站——html华为官网购物商城项目的设计与实现:常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>华为-构筑万物互联的智能世界</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/top-nav.css"> <link rel="stylesheet" href="css/nav-con.css"> <link rel="stylesheet" href="css/slideshow.css"> <link rel="stylesheet" href="css/recommend.css"> <link rel="stylesheet" href="css/img-show.css"> <link rel="stylesheet" href="css/news-activity.css"> <link rel="stylesheet" href="css/link-btn.css"> <link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/corner.css"> <link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650896299792/font-awesome/css/all.css"> <link rel="stylesheet" href="css/iconfont1.css"> <script src="js/top-nav.js"></script></head><body> <!-- 上侧导航区域 --> <div class="top-nav"> <!-- 最上面个导航栏 --> <div class="top-bar"> <ul> <li class="login"> <a href="login.html"> <i class="fas fa-user"></i> 登录 </a> </li> <li class="pull"> <i class="fas fa-globe"></i> <span>选择区域/语言</span> <i class="fas fa-angle-down"></i> </li> <li class="pull"> <i class="fas fa-border-all"></i> <span>集团网站</span> <i class="fas fa-angle-down"></i> </li> </ul> </div> <!-- 集团网站下拉框 --> <div class="net"> <ul class="brief"> <li class="title"> <i class="fas fa-chevron-right"></i> <span>集团网站</span> </li> <li class="intro"> 公司介绍、新闻动态、展会活动等信息 </li> </ul> <ul> <li class="link"> <a href="javascript:;"> 消费者业务网站 <i class="fas fa-angle-right"></i> </a> </li> <li class="intro"> 手机,PC和平板等智慧生活产品 </li> </ul> <ul> <li class="link"> <a href="javascript:;"> 企业业务网站 <i class="fas fa-angle-right"></i> </a> </li> <li class="intro"> 企业商用产品、解决方案和云服务 </li> </ul> <ul> <li class="link"> <a href="javascript:;"> 运营商网络业务网站 <i class="fas fa-angle-right"></i> </a> </li> <li class="intro"> 运营商网络解决方案、产品及服务 </li> </ul> <ul> <li class="link"> <a href="javascript:;"> 华为云网站 <i class="fas fa-angle-right"></i> </a> </li> <li class="intro"> 华为云服务及解决方案 </li> </ul> </div> <!-- 语言区域下拉框 --> <div class="region"> <h3>选择地区/语言</h3> <ul class="first"> <li> <span> Japan - <a href="javascript:;">日本語</a> </span> </li> <li> <span> Myanmar - <a href="javascript:;">ျမန္မာ</a> </span> </li> <li> <span> Spain - <a href="javascript:;">Español</a> </span> </li> <li> <span> United Kingdom - <a href="javascript:;">English</a> </span> </li> <li> <span> Global- <a href="javascript:;">English</a> </span> </li> </ul> <ul> <li> <span class="zhong"> <i class="fas fa-angle-right"></i> China - <a href="javascript:;">简体中文</a> </span> </li> <li> <span> Kazakstan - <a href="javascript:;">русский</a> </span> </li> <li> <span> New Zealand - <a href="javascript:;">English</a> </span> </li> <li> <span> Switzerland - <a href="javascript:;">English</a> </span> </li> <li> <span> United States - <a href="javascript:;">English</a> </span> </li> </ul> </div> </div> <!-- 导航栏 --> <div class="nav-con"> <div class="nav"> <!-- 最左侧logo --> <a href=""> <img src="picture/huawei_logo.png"> </a> <!-- 中间选项卡 --> <ul class="center"> <li class="product"> <span>个人及家庭产品</span> <!-- 个人及家庭产品下拉框 --> <li> <a href="javascript:;">隐私保护</a> </li> <li> <a href="javascript:;">除名查询</a> </li> </ul> </div> </div> <!-- 流动客服及回到顶部 --> <div class="corner"> <div class="to-serve"> <i class="iconfont"></i> </div> <div class="to-top"> <i class="fas fa-chevron-up"></i> </div> </div></body></html>
.news-activity{ width: 85%; margin: 0 auto; overflow: hidden; margin-bottom: 60px;}.exhibition1{ width: 31%; overflow: hidden; float: left; height: 435px;}.exhibition2{ width: 31%; height: 435px; overflow: hidden; float: left; margin-left: 3.5%;}.exhi .tip{ width: 92px; height: 32px; background: #999999; text-align: center; line-height: 32px;}.exhi .tip span{ font-size: 14px; color: #fff;}.exhi img{ width: 100%; height: 170px; transition: all 0.5s;}.exhi .message{ width: 100%; background: #F8F8F7; margin-top: -5px; overflow: hidden; line-height: 2;}.message h3{ margin-left: 25px; margin-top: 30px; color: #333333; font-size: 16px;}.message .location{ margin-left: 25px; color: #333333; font-size: 14px; margin-right: 20px;}.location i{ margin-right: 10px;}.message .date{ color: #333333; font-size: 14px;}.date i{ margin-right: 10px;}.message p{ margin-left: 25px; margin-top: 20px; color: #333333; font-size: 14px; margin-bottom: 60px;}.exhi:hover img{ transform: scale(1.03);}.exhi:hover .message{ background: #F3F2F1;}.news-activity .news3{ width: 31%; height: 432px; overflow: auto; float: right; background: #F8F8F7; position: relative;}.news3 .tip3{ width: 65px; height: 32px; background: #999999; text-align: center; line-height: 32px; color: #fff; font-size: 14px; position: absolute; top: 0;}.news3 ul{ margin-top: 62px; margin-left: 30px; margin-right: 30px; line-height: 1.6;}.news3 ul li{ margin-bottom: 30px;}.news3 ul li p{ color: #333333; font-size: 16px; font-weight: bolder;}.news3 ul li span{ color: #666666; font-size: 14px;}.news3 li a:hover p,.news3 li a:hover span{ color: #F70000;}.news3 .fog{ width: 100%; height: 60px; position: absolute; bottom: 0; background: rgba(248, 248, 248, 0.9); box-shadow: 0 20px 20px 30px rgba(248, 248, 248, 0.9);}/* 设置滚动条样式 */.news3::-webkit-scrollbar{ width: 4px;}.news3::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);}.news3::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1);}
请 “ 点赞” “✍️评论” “ 收藏”
一键三连哦!❤️【关注我| 获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!关键词:项目,商城,实现,设计,企业