網易云課堂（頁面布局）

效果圖

html

<!-- header --><header><div class="wrap"><img src="logo.png" alt="logo"><nav><a href="#" class="active">首頁</a><a href="#" class="active">課程分類</a><a href="#" class="active">微專業</a><a href="#" class="active">我的學習</a><a href="#" class="active">后臺管路</a></nav></div></header><!-- banner --><section class="banner"><ul><li class="center"></li><li class="left"></li><li class="right"></li></ul></section><section class="main"><div class="bg-center"><aside><h1>系列 <span>課程</span></h1><dl><dt><img src="../網易云課堂頁面/Course/02_09.png" alt=""></dt><dd>從Java后端到全棧</dd><dd>掌握兩大微服務框架。沒有天生的全棧，全棧也有</dd></dl><dl><dt><img src="../網易云課堂頁面/Course/02_09.png" alt=""></dt><dd>Python爬蟲工程師</dd><dd>3個月成為網絡爬蟲工程師。入行爬蟲工程師平均年薪30w+，未來可發展數據工程師或者全棧工作室等高新職業，就業前景廣，金融、互聯網等行業都急需爬蟲技能收集信息，提高效率。</dd></dl><dl><dt><img src="../網易云課堂頁面/Course/02_09.png" alt=""></dt><dd>專業搞定OFFICE</dd><dd>用不好Office辦公軟件還敢混職場？Word/Excel/PPT商務辦公一次全部搞定！由易到難，帶你從菜鳥輕松晉級Office高手。碰到問題還有老師答疑哦 。穩扎穩打，練就白領必備基本功</dd></dl><dl><dt><img src="../網易云課堂頁面/Course/02_09.png" alt=""></dt><dd>決勝AI數據之旅</dd><dd>本課程帶你輕松玩轉數據分析與機器學習/深度學習經典算法，結合項目實戰步步為營。開啟一場Python數據科學之旅！ 課程風格通俗易懂，原理推導，形象解讀，案例實戰缺一不可！</dd></dl></aside><article><h1>系統化 <span>學習路徑</span></h1><p>網易云課堂六大課程體系，讓學習有張有序</p><img src="./article.png"><p class="choose"><a href="#">點擊選擇</a></p></article></div></section><footer><a href="#">https://study.163.com</a><span class="icon"><img src="./icon/qq.png"><img src="./icon/sina.png"><img src="./icon/qq.png"></span></footer>

CSS部分

* {padding: 0;margin: 0;border: 0;font-family: "Microsoft Yahei"; }ul {list-style: none; }a {text-decoration: none;color: #000; }header {width: 1899px;height: 80px;background: #64986c;position: relative; }header::after {width: 100%;height: 7px;background: #c1e9ed;content: "";position: absolute;bottom: 0;left: 0; }header .wrap {margin: 0 auto;width: 1200px;height: 73px;position: relative;z-index: 1; }header .wrap img {margin-top: 15px; }header .wrap nav {float: right; }header .wrap nav a {display: block;font-weight: 800;float: left;width: 167px;height: 73px;line-height: 73px;text-align: center;font-size: 26px;color: #fff; }header .wrap nav a:nth-of-type(1) {widows: 113px;background: #517d66; }header .wrap nav a:nth-of-type(2) {background: #76988e; }header .wrap nav a:nth-of-type(3) {background: #6a8daa; }header .wrap nav a:nth-of-type(4) {background: #90ad70; }header .wrap nav a:nth-of-type(5) {background: #60a092; }header nav a:hover, .active {padding-bottom: 7px; }/* */ .banner {width: 100%;height: 537px;background-color: #8fc0af; }.banner ul {width: 1400px;height: 454px;margin: 0 auto;position: relative;top: 43px; }.banner ul li {width: 640px;height: 300px;text-align: center;position: absolute; }.banner .right {top: 80px;right: 0;background: url(../banner/banner3.jpg) no-repeat;background-size: 100% 100%;box-shadow: 3px 2px 3px 0px rgba(16, 5, 10, 0.48); }.banner .left {left: 0;top: 80px;background: url(../banner/banner2.jpg) no-repeat;background-size: 100% 100%;box-shadow: 3px 2px 3px 0px rgba(16, 5, 10, 0.45); }.banner .center {width: 950px;height: 450px;margin-left: 50%;transform: translateX(-50%);/*移動自身的一半*/box-shadow: 4px 2px 4px 0px rgba(16, 5, 10, 0.57);border: solid 3px #ffffff;background: url(../banner/banner1.jpg) no-repeat;background-size: 100% 100%;z-index: 1; }.banner ul li img {position: absolute;height: 100%;left: -30%;}/* // */ .main {height: 500px;background: #f6f6f7; }.main .bg-center {width: 1200px;margin: 0 auto; }.main aside {float: left;width: 538px; }.main h1 {font-size: 24px;margin-bottom: 24px;height: 58px;line-height: 58px; }.mian h1 span {color: #2c714f; }.main dl {width: 474px;height: 87px;margin-bottom: 14px; }.main dl dt {width: 52px;float: left;margin-right: 14px;margin-top: 14px; }.main dl dd {float: left;width: 389px; }.main dl dd:first-of-type {margin-left: 8px;font-weight: 700;font-size: 18px;margin-bottom: 10px;font-family: "Microsoft Yahei"; }.main dl dd:last-of-type {font-size: 13px; }.main article {float: left;width: 662px; }.main article .choose {margin-top: 62px; }.main article .choose a:hover {color: #64986c; }footer {height: 72px;background: #6a9766; }footer a {color: #fff;display: block;float: left;margin-left: 60px;height: 72px;line-height: 72px;font-size: 15px; }footer .icon {margin-right: 278px;float: right;width: 189px; }footer .icon img {opacity: 0.8;/*透明度*/margin: 18px 9px; }

源代&碼素材下載地址

總結

以上是生活随笔為你收集整理的网易云课堂（页面布局）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。