<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" href="登录界面.css" rel="stylesheet "><body><!--头部,导航栏--><div class="head"> <nav> <ul id="head-1"> <li><a href="#" target="_self">开课吧首页</a></li> <li><a href="#">创业微学院</a></li> <li><a href="#">摄影微学院</a></li> <li><a href="#">微聚</a></li> <li><a href="#">论坛</a></li> </ul> <ul id="head-2"> <li><a href="登录界面.html" target="_self">登录 | 注册</a></li> <li><a href="#">播放记录</a></li> <li><a href="#">APP下载</a></li> </ul> </nav></div><div class="body"> <div class="body-1"> <ul id="ul1"> <li id="li1"></li> <li><a href="个人中心链接.html">个人中心</a></li> <li><a href="#">视频播放</a></li> </ul> <ul id="ul2"> <li></li> <li></li> <li>󰄪</li> <li></li> </ul> </div></div><!--尾部div--><div class="top-div"> <p class="div-p-top">top</p></div><footer> <p class="tail-character">Copyright[表情]2015 开课吧 kaikeba.com 版权所有</p></footer></body></html>
外链式
@charset "UTF-8";*{margin: 0; padding: 0; font-family: 微软雅黑;}.head{width: 100%; height: 46px; background-color: #0a2536;}.head nav li a{text-decoration: none; color: white; line-height: 46px; margin-right:30px;}#head-1{float: left; padding-left: 10pc;}#head-2{float: right; padding-right: 300px;}.head nav li{ display: inline-block; font-size: 20px;}.body{background:url("images/banner01.jpg")no-repeat; width: 100%; height: 675px; position: relative; font-size: 20px;}#li1{background: url("images/LOGO.png")no-repeat; width: 118px; height: 28px; margin-left: 300px; margin-right: 30px; margin-top: 10px }#ul1{float: left; color: white;}#ul1 a{text-decoration: none; color: white; line-height: 50px; margin-right:30px;}.body .body-1 ul li{display: inline-block;}.body-1{ width: 100%; height: 50px; position: absolute; background-color: rgba(250,250,250,0.5);}#ul2{float: right; line-height: 50px; margin-right:160px ;}footer{background-color: #0a2536; width: 100%; height: 100px; position: relative; top: 573px; /*margin-top: 50px;*/}footer .tail-character{color: white; text-align: center; line-height: 100px;}.top-div{background: url("images/sanjiao.png")no-repeat; background-size: cover; width: 58px; height: 32px; /*border: solid yellow;*/ margin-top: 20px; margin-left: 725px; }.top-div{background: url("images/sanjiao.png")no-repeat; background-size: cover; width: 58px; height: 32px; /*border: solid yellow;*/ position: absolute; top: 521px; }.top-div .div-p-top{text-align: center; color: white; line-height: 2;}