摘要：<html><head><link rel="stylesheet" href="http://ipnx.cn/static/layui/css/layui.css"><style>* { margin: 0; padding: 0;}a:link{&n
<html>
<head>
<link rel="stylesheet" href="http://ipnx.cn/static/layui/css/layui.css">
<style>
* {
margin: 0;
padding: 0;
}
a:link{
text-decoration: none;
}
.header-index {
min-width: 1200px;
background-color: #000;
border: none;
box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
}
.layui-header {
z-index: 1000;
height: 60px;
}
.layui-header {
position: relative;
}
.php-logo {
height: 60px;
}
.php-logo a {
display: block;
height: 60px;
width: 140px;
background: url(http://ipnx.cn/static/images/logo.png) no-repeat center center;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 100%;
}
.header .layui-nav {
position: absolute;
left: 160px;
top: 0;
padding: 0;
background: none;
}
.layui-nav {
position: relative;
padding: 0 20px;
background-color: #393D49;
color: #fff;
border-radius: 2px;
font-size: 0;
box-sizing: border-box;
}
.header .layui-nav .layui-nav-item {
margin: 0 10px;
}
.header .php-user li {
float: left;
line-height: 60px;
width: 60px;
}
.header .php-user li span{
color: rgba(255,255,255,.7);
text-align: center;
display: block;
font-weight: bold;
}
.php-user {
position: absolute;
right: 0;
top: 0;
}
.layui-nav-bar{left: 262px; top: 55px; width: 0px; opacity: 0;}
.dropmenu:hover .layui-nav-child{display:block}
</style>
</head>
<div class="layui-header header header-index">
<div class="layui-col-md3 php-logo">
<a href="javascript:;" target="_self" class="hide-text"></a>
</div>
<ul class="layui-nav php-nav">
<li class="layui-nav-item layui-header-this">
<a href="javascript:;">首頁</a>
</li><li class="layui-nav-item ">
<a href="javascript:;" >視頻教程</a>
</li>
<li class="layui-nav-item ">
<a href="javascript:;">社區(qū)問答</a>
</li>
<li class="layui-nav-item dropmenu">
<a href="javascript:;">編程詞典<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child layui-anim layui-anim-upbit">
<dd><a href="javascript:;">php詞典</a></dd>
<dd class="layui-show-xs"><a href="javascript:;">技術(shù)文章<span class="layui-badge-dot"></span></a></dd>
<dd><a href="javascript:;">jquery詞典</a></dd>
<dd><a href="javascript:;">PHP教程</a></dd>
<dd><a href="javascript:;">html詞典</a></dd>
<dd><a href="javascript:;">小程序開發(fā)</a></dd>
<dd><a href="javascript:;">javascript詞典</a></dd>
<dd><a href="javascript:;">HTML教程</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">手冊下載</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">工具下載</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">類庫下載</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">特色課程<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item ">
<a href="javascript:;" >菜鳥學(xué)堂</a>
</li>
<span class="layui-nav-bar"></span></ul>
<ul class="php-user">
<li><a href="javascript:;"><span id="login">登錄</span></a></li>
<li class="php-reg"><a href="javascript:;"><span id="reg">注冊</span></a></li>
</ul>
</div>
</html>
總結(jié)：html+css 較為簡單易學(xué)，但是如何把網(wǎng)站做的好看又不會(huì)有太多的代碼冗余，還是需要不斷的參考案例和練習(xí)編寫。查看php.cn的源代碼，發(fā)現(xiàn)她用的是layui的框架，非常的簡潔，外觀也非常的清新。這是個(gè)牛逼的網(wǎng)站（扯遠(yuǎn)了）。
HTML是網(wǎng)站的底層框架，猶如地基，而CSS樣式?jīng)Q定了網(wǎng)站的外觀。對(duì)于css的幾個(gè)重要點(diǎn)我覺得有如下幾個(gè)：
盒子模型。有外邊距magin,內(nèi)邊距padding,以及border邊框，幾乎每個(gè)元素都可以看作是一個(gè)盒子。
float浮動(dòng)。很多時(shí)間都會(huì)用到浮動(dòng)，比如菜單欄，或者把幾個(gè)塊級(jí)元素并列排。但是它是脫離文檔流的，所以需要用clear來清除浮動(dòng)影響
position定位。相對(duì)定位是對(duì)于元素本身，絕對(duì)定位是對(duì)于父元素。
批改老師：天蓬老師批改時(shí)間：2019-02-02 11:53:37
老師總結(jié)：頁面中的一切可視元素, 都是可以定義的, 也都可以看成一個(gè)盒子,或框