赤水网站建设,深圳网站seo设计,cms免费企业网站,老闵行的房子值得买吗目录
项目介绍
需求分析
页面布局及样式实现
1.引入css文件及初始化
2.实现顶部广告
3.黑色导航栏
4.白色导航 5.banner
6.广告
7.手机
8.家电 9.视频
10.页脚
11.icon
网页总体效果图
总结
源码 项目介绍
学习HTML和CSS有一段时间了#xff0c;笔者做了一个…目录
项目介绍
需求分析
页面布局及样式实现
1.引入css文件及初始化
2.实现顶部广告
3.黑色导航栏
4.白色导航 5.banner
6.广告
7.手机
8.家电 9.视频
10.页脚
11.icon
网页总体效果图
总结
源码 项目介绍
学习HTML和CSS有一段时间了笔者做了一个相对练习而言较为复杂的网页某米的官网首页上一下最终效果图 这个网页相对来说还是比较有练习意义的包含导航栏大量的浮动和弹性布局以及一些细小却重要的知识点。
需求分析
自顶而下先整体再局部我们慢慢分析。
1.Header
头部比较简单顶部有一个广告图下面紧挨着一个黑色横向导航栏以及最右侧的字体图标购物车标签。在往下就是一个白色导航栏。
2.Body
主体部分分为四大部分主页面框架广告页面框架手机页面框架家电页面框架以及视频列表。
3.Footer
页脚左侧有导航栏右侧为一些常规信息。
页面布局及样式实现
1.引入css文件及初始化
这里我们先引入一个自己设置的初始化文件关于初始化文件大家可以去自行搜索每一个大型网页都有自己的初始化文件其次我们再创建一个我们网页的主css文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title小米/titlelink relstylesheet href../css/reset.csslink relstylesheet href../css/mi.css
/head
其中初始化reset.css为
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}
2.实现顶部广告
首先先写我们的html框架
!-- 头部开始 --div classheadera href#img src../media/top.jpg alt/a
/div
!-- 头部结束 --
接着写我们的css
/* 头部样式开始 */
.header{width: 100%;height: 120px;overflow: hidden;position: relative;
}.header img{height: 120px;/* 图片以中间开始渲染 */position: absolute;left: 50%;transform: translateX(-50%);
}
/* 头部样式结束 */
overflow:hiddeb 清除浮动
这里因为我们图片有点过长我们要稍微做点调整用到位置摆放巧妙使用left和transform参数使我们的图片摆放在页面正中间。
初步完成后的网页效果 看着还不错继续
3.黑色导航栏
首先先写我们的HTML框架 !-- 黑色导航栏部分开始 --!-- 黑色导航栏实现步骤1.主容器背景黑色2.内容部分居中显示容器处理3.做导航和右导航4.动画--div classblack-navdiv classwrapul classblack-nav-leftlia href#小米商城span丨/span/a/lilia href#MIUIspan丨/span/a/lilia href#loTspan丨/span/a/lilia href#云服务span丨/span/a/lilia href#天星数科span丨/span/a/lilia href#有品span丨/span/a/lilia href#小爱开放平台span丨/span/a/lilia href#企业团购span丨/span/a/lilia href#资质证照span丨/span/a/lilia href#协议规则span丨/span/a/lilia href#下载APP/aspan丨/spandiv classdownloadimg src../media/download.png altp小米商城APP/p/divdiv classstri/div/lilia href#智能生活span丨/span/a/lilia href#SelectLocationspan丨/span/a/li/ulul classblack-nav-rightlia href#登录span丨/span/a/lilia href#注册span丨/span/a/lilia href#消息通知span丨/span/a/lili classcarta href#i classiconfont#xe607;/ii购物车(0)/i/adiv classcart-list购物车中还没有商品赶紧选购吧/div/li/ul/div/div!-- 黑色导航栏部分结束 --
接着写我们的css样式
/* 黑色导航栏样式开始 */
.black-nav{width: 100%;height: 40px;line-height: 40px;background-color: #333;font-size: 12px;
}
.wrap{width: 1224px;margin: 0 auto;
}
.black-nav-right{float: right;
}
.black-nav-left{float: left;
}
.black-nav li{float: left;position: relative;
}
.black-nav a{color: #b0b0b0;
}
.black-nav span{color: #424242;margin: 0 3.6px;
}
.download{width: 115px;height: 0;background-color: #fff;box-shadow: 0 1px 5px #aaa;position: absolute;top: 40px;left: 50%;margin-left: -70px;overflow: hidden;transition: all 0.3s;
}
.download p{color: #333;font-size: 14px;line-height: 14px;
}
.download img{width: 90px;margin: 18px auto 0;
}
.black-nav-left li:hover.download{height: 148px;
}
.stri{width: 0;height: 0;border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;bottom: 0;left: 25%;margin-right: -8px;display: none;
}
.black-nav-leftli:hover.stri{display: block;
}
.cart{width: 120px;height: 40px;background-color: #424242;margin-left: 25px;position: relative;
}
.cart:hover{background-color: #fff;
}
.cart:hovera{color: #ff6700;
}
.cart i{font-style: normal;margin-right: 8px;
}
.cart-list{width: 316px;height: 0;background: #fff;box-shadow: 0 2px 10px rgba(0,0,0,.15);position: absolute;right: 0;top: 40px;color: #424242;overflow: hidden;transition: all 0.3s;line-height: 100px;
}
.cart:hover.cart-list{height: 100px;
}
/* 黑色导航栏样式结束 */
其中我们用到了字体图标中的购物车样式然后我们在下载APP和购物车图标那加了一个动画效果主要用到transition在下载APP那加了.stri,这个是画一个白色的三角形。动画效果如下 好了看一下最终效果 还不错继续
4.白色导航
先分析一些我们我们要的最终效果是什么样的首先这个白色导航栏与上面的黑色导航栏以及后面的部分宽度是一样的你可以共用一个属性样式白色导航栏的最左边是一个小米的logo和一个小房子两个图片组成的一个动画接着是一个列表里面有一个动态的图片和几个文字标签当鼠标滑动到标签上将内容展示出来最右边是一个搜索框和一个字体图标。我这里只给小米手机加了内容其他的标签原理都一样。
首先写我们的HTML框架 !-- 白色导航栏部分开始 --div classwhite-navdiv classwrapdiv classlogoimg src../media/mi-home.png classmi-homeimg src../media/mi-logo.png classmi-logo/divdiv classnav-barullia href#img src../media/zzxsh.gif alt/a/lilia href#小米手机/adiv classnav-bar-listdiv classwrapullidiv classimg-boximg src../media/phone.png alt/divp classname小米10至尊纪念版/pp classprice5200元/p/lilidiv classimg-boximg src../media/phone.png alt/divp classname小米10至尊纪念版/pp classprice5200元/p/lilidiv classimg-boximg src../media/phone.png alt/divp classname小米10至尊纪念版/pp classprice5200元/p/lilidiv classimg-boximg src../media/phone.png alt/divp classname小米10至尊纪念版/pp classprice5200元/p/li/ul/div/div/lilia href#电视/a/lilia href#笔记本/a/lilia href#家电/a/lilia href#路由器/a/lilia href#智能硬件/a/lilia href#服务/a/lilia href#社区/a/li/ul/divdiv classsearchinput typetext placeholder元宇宙button classiconfont#xe63d;/button/div/div/div!-- 白色导航栏部分结束 --
接着写css样式
/* 白色导航栏样式开始 */
.white-nav{width: 100%;height: 100px;background-color: #fff;position: relative;
}
.logo{width: 55px;height: 55px;background-color: #ff6700;float: left;margin-top: 22.5px;overflow: hidden;position: relative;border-radius: 20px;
}
.logo img{width: 100%;height: 100%;position: absolute;top: 0;
}
.mi-home{left: -55px;
}
.mi-logo{left: 0;
}
.logo:hover.mi-home{left: 0;
}.logo:hover.mi-logo{left: 55px;
}
.nav-bar{width: 875px;height: 100px;line-height: 100px;float: left;
}
.search{width: 296px;height: 100px;float: right;
}
.nav-bar li{float: left;
}
.nav-barullia{color: #333;padding: 0 10px;
}
.nav-barullia:hover{color: #ff6700;
}
.nav-barulli:first-child img{margin-top: 22.5px;
}
.search input{width: 244px;height: 50px;border: 1px solid #e0e0e0;margin-top: 25px;/* 去掉选中的边框 */outline: none;padding: 0 10px;box-sizing: border-box;
}
.search button{width: 52px;height: 50px;background-color: #fff;border: 1px solid #e0e0e0;float: right;margin-top: 25px;
}
.search button:hover{background-color: #ff6700;color: #fff;
}
.nav-bar-list{width: 100%;height: 229px;background-color: #fff;border: 1px solid #eee;box-shadow: 0 3px 4px rgba(0,0,0,.1);position: absolute;/* top: 100px; */left: 0;display: none;z-index: 10;
}
.nav-bar li:hover .nav-bar-list{display: block;
}
.img-box{width: 100%;height: 110px;margin-top: 35px;border-right: 1px solid #eee;box-sizing: border-box;margin-bottom: 16px;
}
.nav-bar-list li:last-child .img-box{border-right: 0;
}
.nav-bar-list p{font-size: 12px;line-height: 20px;
}
.name{color: #333;
}
.price{color: #ff6700;
}
/* 白色导航栏样式结束 */
看一下最后效果 看着还不错继续 5.banner
主要框架是左边一个列表当鼠标移到到列表选项使会出现具体的详细信息右边是一个大大图片。笔者这里只完善了第一个手机选项的内容。
先写我们的HTML框架 !-- banner部分开始 --div classbannerdiv classwrapimg classbannner-img src../media/banner.jpg altdiv classslideullia href#手机 i classiconfont#xe621/i/adiv classslide-listullia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/lilia href#img src../media/phone.png altspan小米手机至尊版/span/a/li/ul/div/lilia href#电视 i classiconfont#xe621/i/a/lilia href#电脑 i classiconfont#xe621/i/a/lilia href#笔记本 i classiconfont#xe621/i/a/lilia href#显卡 i classiconfont#xe621/i/a/lilia href#台式机 i classiconfont#xe621/i/a/lilia href#手机 i classiconfont#xe621/i/a/lilia href#手机 i classiconfont#xe621/i/a/lilia href#手机 i classiconfont#xe621/i/a/lilia href#手机 i classiconfont#xe621/i/a/li/ul/div/div/div!-- banner部分结束 --
接着写css样式
/* banner样式开始 */
.banner{width: 100%;height: 460px;/* position: relative; */
}
.bannner-img{width: 100%;
}
.banner.wrap{position: relative;
}
.slide{width: 234px;height: 420px;padding: 22.5px 0;background-color: rgba(105,101,101,.6);position: absolute;left: 0;top: 0;
}
.slideulli{height: 42px;line-height: 42px;text-align: left;padding-left: 30px;font-size: 14px;
}
.slideulli:hover{background-color: #ff6700;
}
.slideullia{color: #fff;
}
.slide i{float: right;padding-right: 20px;
}
.slide-list{width: 1006px;height: 465.5px;background-color: #fff;border: 1px solid #e0e0e0;border-left: none;box-sizing: border-box;box-shadow: 0 8px 16px rgba(0,0,0,.18);padding-top: 2px;position: absolute;top: 0;left: 234px;display: none;
}
.slide-list ul{float: left;width: 100%;
}
.slide-list ul li{width: 247.75px;height: 76px;padding: 18px 0 18px 20px;box-sizing: border-box;line-height: 40px;float: left;
}
.slide-list img{width: 40px;margin-right: 14px;
}
.slide-list span{color: #333;font-size: 14px;/* 一行宽度不够的时候用...代替 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/* 一行宽度不够的时候用...代替 */position: relative;top: -14px;
}
.slide-list li:hover span{color: #ff6700;
}
.slide li:hover .slide-list{display: block;
}
/* banner样式结束 */
来看一下最后效果 不错大体内容已经出来了继续
6.广告
这里主要是字体图标和三个广告图片
先写我们的HTML框架 !-- 广告部分开始 --div classaddiv classwrapdiv classad-asideullia href#i classiconfont#xe733/ip米粉卡/p/a/lilia href#i classiconfont#xe733/ip米粉卡/p/a/lilia href#i classiconfont#xe733/ip米粉卡/p/a/lilia href#i classiconfont#xe733/ip米粉卡/p/a/lilia href#i classiconfont#xe733/ip米粉卡/p/a/lilia href#i classiconfont#xe733/ip米粉卡/p/a/li/ul/divdiv classad-imga href#img src../media/ad.jpg alt/a/divdiv classad-imga href#img src../media/ad.jpg alt/a/divdiv classad-imga href#img src../media/ad.jpg alt/a/div/div/div!-- 广告部分结束 --
接着写css样式
/* 广告样式开始 */
.ad{width: 100%;height: 170px;padding: 14px 0 26px;background-color: #fff;margin-top: 10px;
}
.ad-aside{width: 234px;height: 170px;background-color: #5f5750;padding: 3px;box-sizing: border-box;font-size: 12px;float: left;
}
.ad-aside li{float: left;width: 76px;height: 82px;padding-top: 18px;box-sizing: border-box;opacity: 0.7;
}
.ad-aside a{color: #fff;
}
.ad-aside i{font-size: 24px;margin-bottom: 4px;display: block;
}
.ad-aside li:hover{opacity: 1;
}
.ad-img{width: 316px;height: 170px;float: left;margin-left: 19.2px;
}
.ad-img img{height: 100%;
}
/* 广告样式结束 */
来看一下最后效果 还可以比较简单。继续
7.手机
从这里开始到最后的页脚都属于主体内容
先写我们的HTML框架 !-- 主体部分开始 --div classcontentdiv classwrap!-- 手机部分开始 --div classphoneh3 classtitle手机/h3div classphone-boxdiv classphone-box-lefta href#img src../media/phone_left.jpg alt/a/divdiv classphone-box-rightdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/divdiv classitema href#img classitem-img src../media/phone-right.jpg altp classitem-name小米10至尊纪念版/pp classitem-desc120X 变焦/120W秒充/120Hz屏幕/pp classitem-price5299元起/p/a/div/div/divdiv classbig-imga href#img src../media/phone_ad.jpg alt/a/div/div!-- 手机部分结束 --/div/div!-- 主体部分结束 --
接着写css样式
/* 主体部分样式开始 */
.content{width: 100%;background-color: #f5f5f5;overflow: hidden;padding: 4px 0 12px;
}
/* 主体部分样式结束 */
/* 手机部分样式开始 */
.title{text-align: left;color: #333;font-size: 22px;font-weight: 200;line-height: 58px;
}
.phone-box{width: 100%;height: 614px;
}
.phone-box-left{width: 234px;height: 100%;float: left;
}
.phone-box-right{width: 1006px;height: 614px;float: left;
}
.item{width: 234px;height: 298px;background-color: #fff;padding: 20px 0;margin: 0 0 17.5px 17.5px;float: left;box-sizing: border-box;transition: all 0.2s linear;
}
.item:hover{transform: translateY(-3px);box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.item-img{width: 160px;margin-bottom: 18px;
}
.item-name{width: 214px;height: 21px;color: #333;font-size: 14px;line-height: 21px;margin: 0 auto 2px;
}
.item-desc{width: 214px;height: 18px;color: #b0b0b0;font-size: 12px;line-height: 18px;margin: 0 auto 10px;
}
.item-price{color: #ff6700;font-size: 14px;
}
.big-img{margin-top: 20px;
}
/* 手机部分样式结束 */看一下最后效果 效果还不错继续
8.家电
这个部分跟上面手机部分大部分相似可直接用上面的css样式再稍作修改留下的空白部分自由发挥
先写我们的HTML框架 !-- 家电部分开始 --div classelch3 classtitle家电/h3div classelc-boxdiv classitem elc-itema href#img src../media/elc-left.jpg alt/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitem elc-itema href#img src../media/elc-left.jpg alt/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitema href#img classitem-img src../media/elc-right.jpg altp classitem-nameRedmi 红米电视 70英寸 /pp classitem-desc70英寸震撼巨屏4K画质细腻如真/pp classitem-price3199元 del3799元/del/p/a/divdiv classitem-lastdiv/divdiv/div/div/divdiv classbig-imga href#img src../media/phone_ad.jpg alt/a/div/div!-- 家电部分结束 --
接着写css样式
/* 家电部分样式开始 */
.elc-box{width: 100%;height: 614px;
}
.elc-item{margin-left: 0;padding: 0;
}
.item-pricedel{color: #b0b0b0;
}
.item-last{width: 234px;height: 300px;float: left;margin-left: 14px;
}
.item-lastdiv{width: 234px;height: 143px;background-color: #fff;transition: all 0.2s linear;
}
.item-lastdiv:first-child{margin-bottom: 13px;
}
.item-lastdiv:hover{transform: translateY(-2px);box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
/* 家电部分样式结束 */
看一下最后效果 9.视频
先写我们的HTML框架 !-- 视频部分开始 --div classvideoh3 classtitle视频/h3div classvideo-boxdivdiv classvideo-imgimg src../media/video.jpg altdiv classbtndiv classsanjiao/div/div/divp classvideo-nameRedmi 10X系列发布会/pp classvideo-descRedmi 10X系列发布会/p/divdivdiv classvideo-imgimg src../media/video.jpg altdiv classbtndiv classsanjiao/div/div/divp classvideo-nameRedmi 10X系列发布会/pp classvideo-descRedmi 10X系列发布会/p/divdivdiv classvideo-imgimg src../media/video.jpg altdiv classbtndiv classsanjiao/div/div/divp classvideo-nameRedmi 10X系列发布会/pp classvideo-descRedmi 10X系列发布会/p/divdivdiv classvideo-imgimg src../media/video.jpg altdiv classbtndiv classsanjiao/div/div/divp classvideo-nameRedmi 10X系列发布会/pp classvideo-descRedmi 10X系列发布会/p/div/div/div!-- 视频部分结束 --
接着写我们的css样式
/* 视频部分样式开始 */
.video-box{width: 100%;height: 299px;
}
.video-boxdiv{width: 296px;height: 285px;background-color: #fff;float: left;margin-bottom: 14px;margin-right: 14.9px;transition: all 0.2s linear;
}
.video-boxdiv:hover{transform: translateY(-2px);box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.video-boxdiv:nth-child(4){margin-right: 0;
}
.video-img{width: 100%;height: 180px;margin-bottom: 28px;position: relative;
}
.btn{width: 32px;height: 20px;border-radius: 12px;border: 2px solid #fff;position: absolute;left: 20px;bottom: 10px;
}
.sanjiao{border-left: 8px solid #fff;border-top: 6px solid transparent;border-bottom: 6px solid transparent;width: 0;height: 0;margin: 3px auto;
}
.video-img:hover.btn{background-color: #ff6700;border-color: #ff6700;
}
.video-name{color: #333;font-size: 16px;height: 286px;height: 21px;margin: 0 auto 6px;
}
.video-desc{color: #b0b0b0;width: 286px;height: 18px;margin: 0 auto;font-size: 14px;
}
/* 视频部分样式结束 */
看一下最后效果 效果可以继续干
10.页脚
写到页脚的时候HTML框架要与上面的主体内容分离开
先写我们的HTML框架
!-- 页脚部分开始 --div classfooterdiv classwrapdiv classfooter-serviceullia href#i classiconfont#xe629;/ispan预约维修服务/span/a/lilia href#i classiconfont#xe60e;/ispan7天无理由退货/span/a/lilia href#i classiconfont#xe606;/ispan15天无理由退货/span/a/lilia href#i classiconfont#xe624;/ispan满69包邮/span/a/lilia href#i classiconfont#xe617;/ispan520余家售后网点/span/a/li/ul/divdiv classfooter-linkdl classlink-listdt classlink-title帮助中心/dtdd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dd/dldl classlink-listdt classlink-title帮助中心/dtdd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dd/dldl classlink-listdt classlink-title帮助中心/dtdd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dd/dldl classlink-listdt classlink-title帮助中心/dtdd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dd/dldl classlink-listdt classlink-title帮助中心/dtdd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dd/dldl classlink-listdt classlink-title帮助中心/dtdd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dddd classlink-itema href#账户管理/a/dd/dldiv classfooter-asidep classtel400-100-5678/pp classtime8:00-18:00仅收市话费/pa href# classkefui classiconfont#xe710;/i 人工客服/adiv classfollow关注小米img src../media/wb.png altimg src../media/wx.png alt/div/div/div/div/div!-- 页脚部分结束 --
接着写css样式
/* 页脚部分开始 */
.footer-service{width: 100%;height: 25px;line-height: 25px;padding: 27px 0;border-bottom: 1px solid #e0e0e0;
}
.footer-service li{float: left;width: 19.8%;border-right: 1px solid #e0e0e0;
}
.footer-service li:last-child{border-right: none;
}
.footer-service i{font-size: 24px;margin-right: 6px;
}
.footer-service a{color: #616161;
}
.footer-service a:hover{color: #ff6700;
}
.footer-link{width: 100%;height: 172px;padding: 40px 0;
}
.link-list{float: left;width: 160px;text-align: left;color: #424242;font-size: 14px;line-height: 20px;
}
.link-title{margin: 0 0 26px;font-size: 16px;color: #424242;
}
.link-item{margin-top: 15px;font-size: 14px;color: #757575;
}
.link-item a{color: #757575;
}
.link-item a:hover{color: #ff6700;
}
.footer-aside{width: 251px;height: 111px;border-left: 1px solid #e0e0e0;float: right;color: #616161;
}
.tel{font-size: 22px;line-height: 22px;color: #ff6700;margin-bottom: 5px;
}
.time{font-size: 12px;margin-bottom: 5px;
}
.kefu{font-size: 13px;display: block;width: 120px;height: 30px;line-height: 25px;border: 1px solid #ff6700;box-sizing: border-box;margin: 0 auto;color: #ff6700;transition: all 0.4s;
}
.kefui{color: #ff6700;
}
.footer-link .kefu:hover{background: #f25807;border-color: #f25807;color: #fff;
}
.footer-link .kefu:hoveri{color: #fff;
}
.follow{font-size: 12px;margin-top: 10px;
}
.follow img{width: 24px;margin-left: 6px;position: relative;top: 7px;
}
/* 页脚部分结束 */
看一下最后效果 写到这里基本上已经大功告成了就剩最后一步
11.icon
这里只需要在head标签下加一个link标签
link relshortcut icon href../media/favicon.ico typeimage/x-icon 这样我们的网页图标就显示出来了 网页总体效果图 总结
笔者只是完成了网页的大致效果其中里面还有很多内容没有具体完善 布局也不是最美观的与官网比还相差甚远。但是此次制作过程中让笔者收益颇丰。最后希望笔者的制作过程可以帮助到刚刚入门HTML以及CSS的小伙伴不足之处也请大家多多评判指正今日的网页界面制作分享到此结束感谢
源码
链接https://pan.baidu.com/s/1wq3ODSX4VF1jzCbeSc_xgg 提取码4jdc
如果觉得还不错请点个赞吧~
