CSS基本操作
1：导航栏制作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ font-family: 微软雅黑; text-align: center; } hgroup{ margin-bottom: 10px; } nav{ background: #ff6600; height: 48px; } a{ color: #f60; text-decoration: none; } nav li{ float:left; background: #000000; border-radius: 5px; /*圆角*/ padding :6px 10px; /*先上下 后左右*/ margin:10px; list-style:none; /*去掉前面的点*/ } footer { width:auto; margin: 50px auto; } footer a { color: red; } </style> </head> <body> <header> <hgroup> <h1>HTML视频教程</h1> <a href="/">[手机版]</a> <a href="/">[HTML5论坛]</a> </hgroup> <nav> <ul> <li> <a href=".">首页</a> </li> <li> <a href=".">手机版</a> </li> <li> <a href=".">论坛</a> </li> </ul> </nav> </header> <footer> <a href="">版权信息</a> <a href="">关于我们</a> <a href="">联系我们</a> </footer> </body> </html>
2：图片制作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 10px auto; width: 70%; height: auto; background-color: burlywood; } .image{ border: 1px solid darkgray; width: auto; height: auto; float: left; text-align: center; margin: 5px 7px ; } img{ margin: 5px; opacity: 0.9; } .text{ font-size: 12px; margin-bottom: 5px; } </style> </head> <body> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="2.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="3.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="4.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="5.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="2.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="3.jpg" width="150px" height="150px"> <div class="text">如此优美的风景</div> </a> </div> </body> </html>
3：一个简单的页面
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { background-color: snow; } .wrapper { width: 80%; height: 1000px; background-color: antiquewhite; margin: 0px auto; } .heading { width: 100%; height: 90px; background-color: snow; margin: 0px auto; } .heading_nav { padding-top: 30px; padding-bottom: 30px; width: 100%; height: 30px; position: relative; } .heading_titile { float: left; font-family: Arial Sans-Serif; font-size: 30px; color: burlywood; } ul { margin-left: 40px; float: left; padding-top: 6px; padding-bottom: 6px; } li { list-style-type: none; float: left; padding-left: 10px; display: inline; } .heading_img img { border-radius: 30px; display: inline; width: 26px; height: 26px; float: right; border-shadow: 0 1px 1px rgba(0,0,0,0.2); } .heading_soptlight form { float: right; width: 100px; height: 26px; position: relative; margin-right: 100px; } form input { height: 26px; border-radius: 30px; } a:link, a:visited { font-weight: bold; color: darkgray; text-align: center; padding: 6px; text-decoration: none; } a:link, a:visited { font-weight: bold; color: darkgray; text-align: center; padding: 6px; text-decoration: none; } .footing { padding-top: 20px; text-align:center; width: 80%; font-size:10px; color:daragray; margin:0px auto; } .body { } </style> </head> <body> <div class="container"> <div class="wrapper"> <div class="heading"> <div class="heading_nav"> <div class="heading_titile"> 李鹏的博客 </div> <div class="heading_navabar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">我的博客</a></li> <li><a href="#">随笔</a></li> <li><a href="#">文章</a></li> </ul> </div> <div class="heading_img"> <img id="img" src="1.jpg" /> </div> <div class="heading_soptlight"> <form> <input type="text" id="txt" /> </form> </div> </div> </div> <div class="body"> </div> </div> <div class="footing"> 李鹏的博客 </div> </div> </body> </html>
