用HTML和CSS制作简单的静态网页
2024-05-12 08:19:56
用HTML和CSS制作简单的静态网页（小米商城）
网页效果如下：
代码如下
（第一次写静态网页，中间css代码和html代码没有分离，所以代码可能有点乱还请见谅）
1、css代码
/*--------------------------------------------01-----------------------------------------------------------*/*{margin: 0;padding: 0;}/*清除标志*/li{list-style: none;}/*清除下划线*/a{text-decoration: none;}.tp{height: 120px;width: 1360px;}/*把li向左浮动，然后设置一个右边的外边距（就是空格）*/.ul li{float: left;padding-right: 15px;}.ul li a{color: rgb(176,176,176);}.ul li a:hover{color: white;}/*------------------------------------------02-------------------------------------------------------------*/.shopping{float: right;}/*a是内联元素，先改成块元素，然后设置外边距*/.shopping a{display: block;padding: 0px 50px;color: rgb(176,176,176);}.shopping a:hover{background-color: saddlebrown;}.right{ float: right; }.right a{padding-right: 10px;color: rgb(176,176,176);}.right a:hover{color: white;}.all{width: 90%;/* 只占父标签的百分之90的宽度 */margin: 0 auto;overflow: hidden;/*清除浮动*/}.top-boss{background-color: black;line-height: 40px;}/*-------------------------------------------03------------------------------------------------------------*/.img{float: left;margin: 23px 190px 0 0;}.second-ul li{float: left;padding-right: 25px;}.second-ul li a:hover{color: coral;}.input{float: right;}.input input{width: 249px;height: 45px;border:1px solid #dfdfdf;}.input input:focus{background-color: whitesmoke;}.ss{float: right;margin: 27px 0 0 0;}.all2{/*解决高度塌陷*/overflow: hidden;background-color: white;height: 100px;/*li高度居中*/line-height: 100px;width: 90%;/*宽度居中*/margin: 0 auto;}/*---------------------------------------------04----------------------------------------------------------*/.center-img{float: right;}.left0 ul{margin: 20px 0 ;}.left0 li a {display: block;line-height: 42px;background-color: rgb(114,135,157);color: white;}.left0 li a:hover{background-color: rgb(255,103,0);}.center-boss{overflow: hidden;width: 90%;height: 460px;/*宽度居中*/margin: 0 auto;background-color: rgb(114,135,157);}/*----------------------------------------------05---------------------------------------------------------*/.center-two{background-color: rgb(95,87,80);height: 170px;width: 220px;margin: 15px 15px 15px 0;}.center-two ul div li{font-size: 12px;}.center-two ul div {float: left;margin: 5px;}.center-two ul{overflow: hidden;margin: 0 0 0 15px;}.center-two-one ul li{float: right;margin: 15px 0 0 15px;}.center-two-one ul li img{height: 170px;width: 317px;}#a{overflow: hidden;width: 90%;/*height: 170px;*/margin: 0 auto;}#a{background-color: white;}/*----------------------------------------------小米闪购---------------------------------------------------------*/.zifu{height: 58px;background-color: rgb(245,245,245);overflow: hidden;}.zifu h2{float: left;line-height: 58px;font-size: 22px;font-weight: 200;}.zifu a{line-height: 58px;display: block;float: right;background-color: rgb(245,245,245);}.sangou-one{float: left;/*margin: 0 0 15 0px;*/width: 100px;}.sangou-two ul li{float: right;margin: 0 0 10px 10px;}.sangou{overflow: hidden;background-color: rgb(245,245,245);width: 90%;margin: 0 auto;}#q a img{margin: 0 0 10px 0;}/*----------------------------------------------手机---------------------------------------------------------*/.phone-one{height: 58px;background-color: rgb(245,245,245);overflow: hidden;}.phone-one h2{float: left;line-height: 58px;font-size: 22px;font-weight: 200;}.phone-one a{display: block;color: black;float: right;line-height: 58px;}.phone-one a:hover{color: orangered;}.phone-two{float: left;}.phone-three a img{padding: 0 0 10px 9px;float: right;}.phone{overflow: hidden;background-color: rgb(245,245,245);width: 90%;margin: 0 auto;}.phone-bottom{margin-bottom: 9px;}/*----------------------------------------------家电-搭配--智能-----------------------------------------------------*/.jiadian-top{background-color: rgb(245,245,245);overflow: hidden;}.jiadian-top h2{float: left;line-height: 58px;font-size: 22px;font-weight: 200;}.jiadian-top a{/*display: block;*/color: black;float: right;line-height: 58px;}.jiadian-top a:hover{color: orange;text-decoration: underline;}.jiadian{overflow: hidden;background-color: rgb(245,245,245);width: 90%;margin: 0 auto;}.jiadian-left{float: left;}.jiadian-left a img{margin-bottom: 9px;}.jiadian-right a img{float: right;margin: 0 0 9px 9px;}.much{float: right;margin: 0 0 9px 9px;}.jiadian-buttom{margin-bottom: 9px;}/*--------------------------------------------底部导航条----------------------------------------*/.last-top{overflow: hidden;background-color: white;width: 90%;margin: 0 auto;}.last-top ul li {float: left; height: 80px;line-height: 80px;margin: 0 70px;}.last-top ul li a{color: rgb(97,97,97);}.last-top ul li a:hover{color: orange;}.last-center .dl dt{margin: 40px 0 26px;font-size: 14px;}.last-center .dl{float: left;width: 160px;}.last-center .dl dd{font-size: 12px;margin: 10px 0 0 0;}.last-center{overflow: hidden;width: 90%;margin: 0 auto;background-color: white;margin-bottom: 45px;}.last-center .dl a dd{color: rgb(97,97,97);}.last-center .dl a dd:hover{color: orange;}/*--------------------------------------最底部----------------------------------------*/.img{float: left;margin: 30px 13px 0 0;}.list{margin: 30px 0 0 0 ;float: left;}.p a{font-size:11px ;color: rgb(97,97,97);}.p a:hover{color: orange;}.p1 a{font-size:11px ;color: rgb(97,97,97);}.p1 a:hover{color: orange;}.p2 a{font-size:11px ;color: rgb(176,176,176);}.p2 a:hover{color: orange;}.p2 span{font-size:11px ;color: rgb(176,176,176);}.last-last{overflow: hidden;/*background-color: deepskyblue;*/width: 90%;margin: 0 auto;}
2、HTML代码
<!--/*----------------------------------------1---------------------------------------------------------------*/--><div class="tp"><img src="img/tp.png"/></div><!--/*----------------------------------------2---------------------------------------------------------------*/--><div class="top-boss"><div class="all"><div class="left"><ul class="ul"><li><a href="">小米商城</a></li><li><a href="">MIUI</a></li><li><a href="">loT</a></li><li><a href="">云服务</a></li><li><a href="">天星科技</a></li><li><a href="">有品</a></li><li><a href="">小爱开放平台</a></li><li><a href="">企业团购</a></li><li><a href="">资质订照</a></li><li><a href="">协议规划</a></li><li><a href="">下载app</a></li><li><a href="">智能生活</a></li></ul></div><div class="shopping"><a href="" >购物车</a></div><div class="right"><a href="">登录</a><a href="">注册</a><a href="">消息通知</a></div></div></div><!--/*--------------------------------------------3-----------------------------------------------------------*/--><div class="top-boss-2"><div class="all2"><div class="img"><a href=""><img src="img/logo-footer.png"/></a></div> <div class="second-ul"><ul><li><a href="">小米手机</a></li><li><a href="">红米</a></li><li><a href="">电视</a></li><li><a href="">笔记本</a></li><li><a href="">空调</a></li><li><a href="">新品</a></li><li><a href="">路由器</a></li><li><a href="">智能配件</a></li><li><a href="">服务</a></li><li><a href="">社区</a></li></ul> </div><div class="ss"><a href=""><img src="img/ss.png" style="display: block;"/></a></div><div class="input"><form action="" method="post"><input type="text" size="1"/></form></div></div></div><!--/*------------------------------------------4-------------------------------------------------------------*/--><div ><div class="center-boss"><div class="center-img"><img src="img/cen.png"/></div><div class="left0"><ul><li><a href=""><span class="li"> 手机 电话卡</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 电视 盒子</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 笔记本 平板</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 家电 插线板</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 出行 穿戴</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 智能 路由器</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 电源 配件</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 健康 儿童</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 耳机 音响</span><span id="litwo"> ></span></a></li><li><a href=""><span class="li"> 生活 箱包</span><span id="litwo"> ></span></a></li></ul></div></div></div><!--/*----------------------------------------------5---------------------------------------------------------*/--><div ><div id="a"><div class="center-two-one"><ul><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340"/></a></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340"/></a></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340"/></a></li></ul></div><div class="center-two""><ul><div > <li><a href="" id="lia"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"/></a></li><li><a href=""style=" color: rgb(207,204,202);;"id="lia">企业团购</a></li></div><div><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"/></a></li><li><a href=""style="color: rgb(207,204,202);">小米秒杀</a></li></div><div><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"/></a></li><li><a href=""style="color: rgb(207,204,202);">F码通道</a></li></div><div><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"/></a></li><li><a href=""style="color: rgb(207,204,202);">米粉卡</a></li></div><div><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"/></a></li><li><a href=""style="color: rgb(207,204,202);">以旧换新</a></li></div><div><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"/></a></li><li><a href=""style="color: rgb(207,204,202);">话费充值</a></li></div></ul></div></div> </div><!--/*----------------------------------------------小米闪购--------------------------------------------------------*/--><div style="background-color: rgb(245,245,245);"><div class="sangou"><div class="zifu"><h2>小米闪购</h2><a href="">< ></a></div><div class="sangou-one"><img src="img/5.png"/></div><div class="sangou-two"><ul><li><a href=""><img src="img/1.png"/></a></li><li><a href=""><img src="img/2.png"/></a></li><li><a href=""><img src="img/3.png"/></a></li><li><a href=""><img src="img/4.png"/></a></li></ul></div><div id="q"><a href=""><img src="img/1.1.png"/></a></div></div></div><!--/*----------------------------------------------手机--------------------------------------------------------*/--><div style="background-color: rgb(245,245,245);" ><div class="phone"><div class="phone-one"><h2>手机</h2><a href="">查看全部</a></div><div class="phone-two"><a href=""><img src="img/phone-left.png"/></a></div><div class="phone-three"><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a><a href=""><img src="img/phone1.png"/></a></div><div class="phone-bottom"><a href=""><img src="img/phont-bottom.png"/></a></div></div></div><!--/*----------------------------------------------家电--------------------------------------------------------*/--><div style="background-color: rgb(245,245,245);"><div class="jiadian"><div class="jiadian-top"><h2>家电</h2><a href="">热门影音</a><a href="" style="margin: 0 20px 0 0 ;">家电</a> </div><div class="jiadian-left" style="width: 235px;"><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c4de5f15f6dc9946e5d0827fd96d71.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e03c0fe4af4d613603f22aaa8e0ea00.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a></div><div class="jiadian-right"><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><div class="much" style="width: 235px;"><a href=""><img src="img/jia.png"/></a><a href=""><img src="img/much.png"/></a></div><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a></div><div class="jiadian-buttom"><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a></div></div></div><!--/*----------------------------------------------智能--------------------------------------------------------*/--><div style="background-color: rgb(245,245,245);"><div class="jiadian"><div class="jiadian-top"><h2>智能</h2><a href="">安防</a><a href="" style="margin: 0 20px 0 0;">出行</a><a href="" style="margin: 0 20px 0 0 ;">热门</a> </div><div class="jiadian-left" style="width: 235px;"><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a></div><div class="jiadian-right"><a href=""><img src="img/zhi.png"/></a><a href=""><img src="img/zhi.png"/></a><a href=""><img src="img/zhi.png"/></a><a href=""><img src="img/zhi.png"/></a><div class="much" style="width: 235px;"><a href=""><img src="img/zhin.png"/></a><a href=""><img src="img/much.png"/></a></div><a href=""><img src="img/zhi.png"/></a><a href=""><img src="img/zhi.png"/></a><a href=""><img src="img/zhi.png"/></a></div><div class="jiadian-buttom"><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45207e414f661234bfc3909d11ad2bab.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a></div></div></div><!--/*----------------------------------------------搭配--------------------------------------------------------*/--><div style="background-color: rgb(245,245,245);"><div class="jiadian"><div class="jiadian-top"><h2>搭配</h2><a href="">耳机音箱</a><a href="" style="margin: 0 20px 0 0 ;">热门</a> </div><div class="jiadian-left" style="width: 235px;"><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a00bdd568dbc2b02f8fe0fa8d1b46f28.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a></div><div class="jiadian-right"><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><div class="much" style="width: 235px;"><a href=""><img src="img/jia.png"/></a><a href=""><img src="img/much.png"/></a></div><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a><a href=""><img src="img/jiadian.png"/></a></div><div class="jiadian-buttom"><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1615d1842fe85914a545297836a44271.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a></div></div></div> <!-----------------------------------------------------------底部导航条-----------------------------------------><div ><div class="last"><div class="last-top"><ul><li><a href="">预约维修服务</a></li><li><a href="">7天无理由退货</a></li><li><a href="">15天免费换新</a></li><li><a href="">满99包邮</a></li><li><a href="">520余家售后网点</a></li></ul></div><hr /><div class="last-center"><dl class="dl"><dt>帮助中心</dt><a href=""><dd>账户管理</dd></a><a href=""><dd>购物指南</dd></a><a href=""><dd>订单操作</dd></a></dl ><dl class="dl"><dt>服务支持</dt><a href=""><dd>售后政策</dd></a><a href=""><dd>自动服务</dd></a><a href=""><dd>相关下载</dd></a> </dl><dl class="dl"><dt>线下门店</dt><a href=""><dd>小米之家</dd></a><a href=""><dd>服务网点</dd></a><a href=""><dd>授权体验店</dd></a> </dl><dl class="dl"><dt>关于小米</dt><a href=""><dd>加入小米</dd></a><a href=""><dd>了解小米</dd></a><a href=""><dd>投资者关系</dd></a><a href=""><dd>企业社会责任</dd></a><a href=""><dd>廉洁举报</dd></a> </dl><dl class="dl"><dt>关注我们</dt><a href=""><dd>新浪微博</dd></a><a href=""><dd>官方微信</dd></a><a href=""><dd>联系我们</dd></a><a href=""><dd>公益基金会</dd></a> </dl><dl class="dl"><dt>特色服务</dt><a href=""><dd>F码通道</dd></a><a href=""><dd>礼物码</dd></a><a href=""><dd>防伪查询</dd></a></dl></div></div></div><!---------------------------------------------------最底部----------------------------------------------------------------------------><div style="background-color: rgb(245,245,245); "><div class="last-last"><div class="img"><img src="img/logo-footer.png"/></div><div class="list"><p class="p"><a href="">小米商城</a><a href="">MIUI</a><a href="">米家</a><a href="">米聊</a><a href="">多看</a><a href="">游戏</a><a href="">政企服务</a><a href="">小米天猫店</a><a href="">小米集团隐私政策</a><a href="">小米公司儿童信息保护规则</a><a href="">小米商城隐私政策</a><a href="">小米商城用户协议</a><a href="">问题反馈</a></p><p class="p1"><a href="">北京互联网法院法律服务工作站</a><a href="">中国消费者协会</a><a href="">北京市消费者协会</a></p><p class="p2"><a href="">Mi.com</a><span>京ICP证110507号</span><a href="">京icp备10046444号</a><a href="">京公网安备11010802020134号</a><a href="">京网文[2020]0276-042号</a><br /><a href="">（京）网械平台备字（2018）第00005号</a><a href="">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a><a href="">营业执照</a><a href="">医疗器械质量公告</a><br /><a href="">增值电信业务许可证</a><a href=""> 网络食品经营备案 京食药网食备202010048 </a><a href="">食品经营许可证</a><br /><span>违法和不良信息举报电话：171-5104-4404</span> <a href="">知识产权侵权投诉</a><a href="">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a></p></div></div> </div></body>用HTML和CSS制作简单的静态网页相关推荐
- 大一可能用到的使用HTML+CSS做成简单的静态网页
大一可能用到的使用HTML+CSS做成简单的静态网页 不知道你们大一学html和css没有,哈哈.要是老师负责还好,要是不负责就jj了,期末,期中可能就要交课程报告了,希望能帮到你.! 我就做了一个简 ...
- 用html和css构建简单的静态网页
目录 一.效果展示 1.首页 2.剧情简介 3.主要人物 4.悬赏金海报 5.经典语录 二.具体实现 1.首页 2.剧情简介 3.主要人物 4.悬赏金海报 5.简单语录 三.主要问题 四.总结 只用h ...
- HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- html和css制作简单的个人网页
/ 01 / 主题 <Jasmine> / 02 / 图摘 / 03 /
- html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面 这是效果图 这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
- 使用html和css制作简单的网页
使用html和css制作简单的网页 创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 09/26 10:23 * / <html><he ...
- 如何用一简单的CSS制作响应式HTML网页
如何用简单的CSS制作响应式HTML网页 #故事前端开发 在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量. 最赞的一点就是:这个响应式效果只需要添加 ...
- 使用HTML和css制作简单的公司介绍网页
使用HTML和css制作简单的公司介绍网页 创作不易,可否给作者点个赞再走 HTML部分: /** * author 阿木木 * date 09/23 14:32 * / <html>&l ...
- HTML+CSS+JS电影网页设计 DW个人网页制作 Hbuilder制作简单的电影网页 在线电影网页设计与制作 web前端大作业
一.制作介绍 网页作品代码简单html+css制作,可使用任意HTML编辑软件(如:Dreamweaver.HBuilder.Vscode .Sublime .Webstorm.Text .Notep ...
- HTML CSS JS电影网页设计 DW个人网页制作 Hbuilder制作简单的电影网页 在线电影网页设计与制作 web前端大作业
制作介绍 网页作品代码简单html+css制作,可使用任意HTML编辑软件(如:Dreamweaver.HBuilder.Vscode .Sublime .Webstorm.Text .Notepad ...
最新文章
- 中国中医药产业未来投资规划与前景风险预测报告2022-2027年版
- Tomcat源码解析系列二：Tomcat总体架构
- 启动Cognos时报0106错误
- python 模块 包 库_模块（包、库）
- LeetCode算法入门- 3Sum -day9
- 玩抖音，你喜欢的，都是对自身没好处的
- 一位70后的感叹：下半辈子我会陷入贫困吗？
- Alex 的 Hadoop 菜鸟教程: 第15课 Impala 安装使用教程
- ppt转html5原理,如何实现PPT转成H5？
- android project build with ant
- 人工智能——特征工程思维导图
- 以debug模式启动PostgreSQL服务
- 友盟统计 H5 vue 隐藏友盟图标
- 微信公众号接入百度机器人
- java实现日历打印
- 2022年数学建模国赛c题论文+代码(附详解)
- Android 获取 OAID ，替换 IMEI （兼容 Android 10获取IMEI问题）
- 数据结构与算法38-鸭棋
- 二维数组与指向指针的指针
- PostgreSQL 源码解读（212）- 后台进程#11（checkpointer-SyncOneBuffer）