制作网页的重要的就是布局,布局根据自己的需求和喜好去进行更改,制作令自己满意的静态网页,所以就必须掌握好css,如何运用到项目中去,那么学了css,就该自己动手去做,这样才能容易吸收和消化。我就用div+css做了个静态网页,布局是两列布局方式,来看看实例吧。
先给出html代码部分(index.html)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>定位横向布局</title> <link rel="stylesheet" type="text/css" href="position.css" /> </head> <body> <div id="wrap"> <div id="header"> <div class="logo">前端开发教程</div> <div class="nav"> <ul> <li class="current"><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </div> </div> <div id="mainbody"> <div id="sidebar"> <dl> <dt>CSS 基础教程</dt> <dd class="current"><a href="#">CSS 简介</a></dd> <dd><a href="#">CSS 基础语法</a></dd> <dd><a href="#">CSS 高级语法</a></dd> <dd><a href="#">CSS 派生选择器</a></dd> <dd><a href="#">CSS id 选择器</a></dd> <dd><a href="#">CSS 类选择器</a></dd> <dd><a href="#"&g