做网站安阳,开网页死机,云南省住房和城乡建设厅官方网站,优化设计答案大全01-06 项目实战
1 代码规范 2 CSS编写顺序 3 组件化开发思想 组件化开发思路 项目整体思路 – 各个击破 07_(掌握)王者荣耀-top-整体布局完成
完整代码
01_page_top1.html
!DOCTYPE html
html langen
headmeta charsetUTF-8…01-06 项目实战
1 代码规范 2 CSS编写顺序 3 组件化开发思想 组件化开发思路 项目整体思路 – 各个击破 07_(掌握)王者荣耀-top-整体布局完成
完整代码
01_page_top1.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-top/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.top {border: 1px solid #f5f5f5;}.top .area {display: flex;justify-content: space-between;/* align-items: normal; */height: 41px;line-height: 41px;}.top .left-area {display: flex;}.top .left-area .logo a {display: block;width: 150px;text-indent: -9999px;background: url(./img/top_logo.png) no-repeat center center;}.top .right-area {display: flex;}.top .right-area .item a {position: relative;display: block;font-size: 14px;color: #464646;}.top .right-area .item a.ranking {margin-left: 20px;padding-right: 30px;}.top .right-area .item a.ranking::after {content: ;position: absolute;width: 30px;height: 30px;right: 0;top: 0;bottom: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat 0 0;opacity: 0.2;transform: rotate(90deg);}.top .right-area .item a.growth {padding-left: 30px;}.top .right-area .item a .icon-grow {position: absolute;width: 30px;height: 30px;left: 0;top: 0;bottom: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat -30px 0;}/style
/head
bodydiv classtopdiv classtop_wrapper areadiv classleft-areah2 classlogoa href#腾讯游戏/a/h2div classrecommendimg src./img/recommend_game.jpg alt/div/divul classright-areali classitema classgrowth href#i classicon-grow/i成长守护平台/a/lili classitema classranking href#腾讯游戏排行榜/a/li/ul/div/div/body
/html 逐步细节 建议思路先写html结构再去写对应的CSS效率高
另一种思路写好一个结构就去写对应的css容易理解效率低
先做边框
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-top/titlelink relstylesheet href./css/reset.cssstyle.top{height: 41px;border: 1px solid #f5f1f5;}/style
/head
bodydiv classtop/div
/body
/html 先做一个wrapper
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-top/titlelink relstylesheet href./css/reset.cssstyle.top{height: 41px;border: 1px solid #f5f1f5;}.wrapper{width: 980px;margin: 0 auto;/*把wrapper放中间*/height: 41px;background-color: orange;}/style
/head
bodydiv classtopdiv classwrapper/div/div
/body
/html 考虑复用性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-top/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.top{border: 1px solid #f5f1f5;}.top .area{height: 41px;background-color: orange;}/style
/head
bodydiv classtopdiv classtop_wrapper area/div/div
/body
/html
/* common.css公共的样式 *//* wrapper中间包裹的区域 */
.top_wrapper {width: 980px;margin: 0 auto;
}
/* reset.css样式重置文件 */
/* margin/padding重置 */
body {padding: 0;margin: 0;
} 08_(掌握)王者荣耀-top-top-left展示实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-top/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.top{border: 1px solid #f5f1f5;}.top .area{display: flex;justify-content: space-between;height: 41px;line-height: 41px;}.top .left-area{display: flex;}.top .right-area{background-color: rgb(0, 255, 217);}.top .left-area .logo a{display: block;width: 150px;text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/background: url(./img/top_logo.png) no-repeat center center;}/style
/head
bodydiv classtopdiv classtop_wrapper areadiv classleft-areah2 classlogoa href#腾讯游戏/a/h2div classrecommendimg src./img/recommend_game.jpg alt/div/divdiv classright-area2/div/div/div
/body
/html 09_(掌握)王者荣耀-top-top-right展示实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-top/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.top{border: 1px solid #f5f1f5;}.top .area{display: flex;justify-content: space-between;height: 41px;line-height: 41px;}.top .left-area{display: flex;}.top .left-area .logo a{display: block;width: 150px;text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/background: url(./img/top_logo.png) no-repeat center center;}.top .right-area{display: flex;}.top .right-area .item a{position: relative;display: block;font-size:14px;color: #464646;}.top .right-area .item a.ranking{margin-left: 20px;padding-right: 30px;}.top .right-area .item a.ranking::after{content: ;position: absolute;width: 30px;height: 30px;top: 0;bottom: 0;right: 0;margin:auto 0;background: url(./img/top_sprite.png) no-repeat 0 0;opacity: 0.2;transform: rotate(90deg);}.top .right-area .item a.growth{padding-left: 30px;}.top .right-area .item a .icon-grow{position: absolute;width: 30px;height: 30px;top: 0;bottom: 0;left: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat -30px 0;}/style
/head
bodydiv classtopdiv classtop_wrapper areadiv classleft-areah2 classlogoa href#腾讯游戏/a/h2div classrecommendimg src./img/recommend_game.jpg alt/div/divul classright-areali classitema classgrowth href#i classicon-grow/i成长守护平台/a/lili classitema classranking href#腾讯游戏排行榜/a/li/ul/div/div
/body
/html 10_(掌握)王者荣耀-header-整体布局实现 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-header/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.header {background-color: rgba(0,0,0,.8);}.header .area {display: flex;justify-content: space-between;height: 84px;}.header .left-area {display: flex;}.header .left-area .logo a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 200px;height: 54px;text-indent: -9999px;background: url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list {display: flex;margin-left: 30px;}.header .left-area .nav-list .item {width: 110px;padding-right: 5px;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active {background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item a {display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a {color: #e4b653;}.header .left-area .nav-list .item a .desc {display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc {color: #91763f;}.header .left-area .search {margin-left: 10px;}.header .left-area .search a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 27px;height: 26px;background: url(./img/nav_search.png);}.header .right-area {display: flex;align-items: center;}.header .right-area .image img {border: 1px solid #d9ad50;border-radius: 50%;}.header .right-area .info {margin-left: 12px;}.header .right-area .info a {color: #fff;}.header .right-area .info p {font-size: 14px;color: #858792;margin-top: 5px;}/style
/head
bodydiv classheaderdiv classarea header_wrapperdiv classleft-areah1 classlogoa href#王者荣耀/a/h1ul classnav-listli classitem activea href#游戏资料span classdescDATA/span/a/lili classitema href#内容中心span classdescCONTENTS/span/a/lili classitema href#赛事中心span classdescMATCH/span/a/lili classitema href#百态王者span classdescCULTURE/span/a/lili classitema href#社区互动span classdescCOMMUNITY/span/a/lili classitema href#玩家支持span classdescPLAYER/span/a/lili classitema href#IP新游span classdescNEW GAMES/span/a/li/uldiv classsearcha href#/a/div/divdiv classright-areaa classimage href#img src./img/header_login.png alt/adiv classinfoa href#欢迎登录/ap登录后查看游戏战绩/p/div/div/div/div/body
/html
逐步细节 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-header/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;line-height: 84px;background-color: orange;}.header .left-area{background-color: red;}.header .right-area{background-color: green;}/style
/head
bodydiv classheaderdiv classarea header_wrapperdiv classleft-area1/divdiv classright-area2/div/div/div/body
/html 11_(掌握)王者荣耀-header-logo展示实现
注意网站的logo一半我们用h1包裹来做网站搜索优化并且h1里面包裹一个a超链接。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-header/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;margin-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .right-area{background-color: green;}/style
/head
bodydiv classheaderdiv classarea header_wrapperdiv classleft-areah1 classlogoa href#王者荣耀/a/h1ul classnav-listli classitem activea href#游戏资料span classdescDATA/span/a/lili classitema href#内容中心span classdescCONTENTS/span/a/lili classitema href#赛事中心span classdescMATCH/span/a/lili classitema href#百态王者span classdescCULTURE/span/a/lili classitema href#社区互动span classdescCOMMUNITY/span/a/lili classitema href#玩家支持span classdescPLAYER/span/a/lili classitema href#IP新游span classdescNEW GAMES/span/a/li/ul/divdiv classright-area2/div/div/div/body
/html 12_(掌握)王者荣耀-header-导航展示实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-header/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;padding-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .right-area{background-color: green;}/style
/head
bodydiv classheaderdiv classarea header_wrapperdiv classleft-areah1 classlogoa href#王者荣耀/a/h1ul classnav-listli classitem activea href#游戏资料span classdescDATA/span/a/lili classitema href#内容中心span classdescCONTENTS/span/a/lili classitema href#赛事中心span classdescMATCH/span/a/lili classitema href#百态王者span classdescCULTURE/span/a/lili classitema href#社区互动span classdescCOMMUNITY/span/a/lili classitema href#玩家支持span classdescPLAYER/span/a/lili classitema href#IP新游span classdescNEW GAMES/span/a/li/ul/divdiv classright-area2/div/div/div/body
/html 13_(掌握)王者荣耀-header-搜索和登录展示实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-header/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;padding-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .left-area .search{margin-left: 10px;}.header .left-area .search a{position: relative;top:50%;transform: translate(0,-50%);display: block;width: 27px;height: 26px;background: url(./img/nav_search.png);}.header .right-area{display: flex;align-items: center;}.header .right-area .image img{border:1px solid #d9ad50;border-radius: 50%;}.header .right-area .info{margin-left: 12px;}.header .right-area .info a{color: #fff;}.header .right-area .info p{font-size: 14px;color: #858792;math-depth: 5px;}/style
/head
bodydiv classheaderdiv classarea header_wrapperdiv classleft-areah1 classlogoa href#王者荣耀/a/h1ul classnav-listli classitem activea href#游戏资料span classdescDATA/span/a/lili classitema href#内容中心span classdescCONTENTS/span/a/lili classitema href#赛事中心span classdescMATCH/span/a/lili classitema href#百态王者span classdescCULTURE/span/a/lili classitema href#社区互动span classdescCOMMUNITY/span/a/lili classitema href#玩家支持span classdescPLAYER/span/a/lili classitema href#IP新游span classdescNEW GAMES/span/a/li/uldiv classsearcha href#/a/div/divdiv classright-areaa classimage href#img src./img/header_login.png alt/adiv classinfoa href#欢迎登陆/ap登陆后查看游戏战绩/p/div/div/div/div/body
/html 14_(掌握)王者荣耀-main-news区域整体布局
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-main-news/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.main {height: 100px;}.news-section {display: flex;height: 342px;}.news-section .banner {width: 605px;background-color: orange;}.news-section .news {flex: 1;background-color: purple;}.news-section .download {width: 236px;background-color: skyblue;}.news-section .download a {display: block;background: url(./img/main_sprite.png) no-repeat;}.news-section .download a.download-btn {height: 128px;background-position: 0 -219px;}.news-section .download a.guard-btn {height: 106px;background-position: 0 -350px;}.news-section .download a.experience-btn {height: 108px;background-position: 0 -461px;}/style
/head
bodydiv classmain main_wrapperdiv classnews-sectiondiv classbanner/divdiv classnews/divdiv classdownloada classdownload-btn href#/aa classguard-btn href#/aa classexperience-btn href#/a/div/divdiv classcontent-section/divdiv classmatch-section/div/div/body
/html
逐步细节 建议这样做两边给一个固定的宽度中间给一个flex 1让中间新闻的宽度是弹性的 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-main-news/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.main{height: 100px;}.news-section{display: flex;height: 342px;}.news-section .banner{width: 605px;background-color: #0f0;}.news-section .news{flex: 1;background-color: purple;}.news-section .download{width: 236px;background-color: skyblue;}/style
/head
bodydiv classmain main_wrapperdiv classnews-sectiondiv classbanner/divdiv classnews/divdiv classdownload/div/divdiv classcontent-section/divdiv classmatch-section/div/div/body
/html 15_(掌握)王者荣耀-main-news下载区域实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-main-news/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.main{height: 100px;}.news-section{display: flex;height: 342px;}.news-section .banner{width: 605px;background-color: #0f0;}.news-section .news{flex: 1;background-color: purple;}.news-section .download{width: 236px;background-color: skyblue;}.news-section .download a{display: block;background:url(./img/main_sprite.png) no-repeat;}.news-section .download a.download-btn{height: 128px;background-position: 0 -219px;}.news-section .download a.guard-btn{height: 106px;background-position: 0 -350px;}.news-section .download a.experience-btn{height: 108px;background-position: 0 -461px;}/style
/head
bodydiv classmain main_wrapperdiv classnews-sectiondiv classbanner/divdiv classnews/divdiv classdownloada classdownload-btn href#/aa classguard-btn href#/aa classexperience-btn href#/a/div/divdiv classcontent-section/divdiv classmatch-section/div/div/body
/html 总结内容回顾
一. vertical-align(了解)
1.1. vertical-align其他值 给行内级元素设置 middle 基线x高度的一半 1.2. 行内块级元素其他现象 二. CSS整体内容回顾 三. 项目实战
3.1. 代码规范(重要) 3.2. CSS编写顺序 定位/浮动/flex display/visibility box model 文本/文字 background 其他 四. 王者荣耀
4.1. top区域 4.2. header区域 4.3. main-news区域(正在进行ing) 练习
自己往后做(王者荣耀) news(必须做) banner news-list
