[CSS3] 学习笔记-HTML与CSS简单页面效果实例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS3] 学习笔记-HTML与CSS简单页面效果实例相关的知识，希望对你有一定的参考价值。
一个简单的首页的设计：
html文件：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="1.css"> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="wrapper"> 11 <div class="heading"> 12 <div class="heading_div"> 13 <div class="heading_title"> 14 极客学院 15 </div> 16 <div class="heading_navbar"> 17 <ul> 18 <li><a href="#">首页</a></li> 19 <li><a href="#">职业课程</a></li> 20 <li><a href="#">技术问答</a></li> 21 <li><a href="#">VIP会员</a></li> 22 </ul> 23 </div> 24 <div class="heading_img"> 25 <!--<img src="1.jpg">--> 26 </div> 27 <div class="heading_spotlight"> 28 <form> 29 <input type="text"> 30 </form> 31 </div> 32 </div> 33 </div> 34 <div class="body"> 35 <div class="body_title"> 36 <h3>熟悉极客学院</h3> 37 <p>加入极客学院，学习最新实战教程，全面提高技术能力</p> 38 </div> 39 <hr/> 40 <hr/> 41 </div> 42 43 </div> 44 <div class="footing"> 45 @极客学院 46 </div> 47 </div> 48 </body> 49 </html>
对应的CSS文件：
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 body{ 6 background-color: snow; 7 } 8 .wrapper{ 9 background-color: antiquewhite; 10 width: 80%; 11 height: 1000px; 12 margin: 0px auto; 13 } 14 .heading{ 15 margin:0px auto; 16 width:100%; 17 height:90px; 18 background-color: snow; 19 } 20 .heading_nav{ 21 font-weight: bold; 22 padding-bottom: 30px; 23 padding-top:30px; 24 width:100%; 25 height: 30px; 26 position: relative; 27 } 28 .heading_title{ 29 float: left; 30 font-family: Arial, Helvetica,sans-serif; 31 font-size:30px; 32 color:burlywood; 33 } 34 ul{ 35 margin-left:40px ; 36 float:left; 37 list-style-type: none; 38 padding-top:6px; 39 padding-bottom: 6px; 40 } 41 li{ 42 padding-left: 10px; 43 display: inline; 44 } 45 a:link,a:visited{ 46 font-weight: bold; 47 color:darkgray; 48 text-align: center; 49 padding:6px; 50 text-decoration: none; 51 } 52 a:hover,a:active{ 53 color:dimgray; 54 55 } 56 .heading_img img{ 57 border-radius:30px; 58 display: inline; 59 width: 26px; 60 height: 26px; 61 box-shadow: 0 1px 1px rgba(0,0,0,0.2); 62 float:right; 63 } 64 .heading_spotlight form{ 65 float:right; 66 width:100px; 67 height:26px; 68 position:relative; 69 margin-right: 50px; 70 } 71 form input{ 72 height:26px; 73 border-radius:30px; 74 } 75 .body{ 76 width: auto; 77 height:auto; 78 padding:30px; 79 } 80 .body_title h3{ 81 font-size: 30px; 82 font-family: Arial,Helvetica, sans-serif; 83 color:#333333; 84 } 85 .body_title p{ 86 margin-top:20px; 87 margin-bottom:20px; 88 } 89 .footing{ 90 padding:20px; 91 text-align: center; 92 font-size:10px; 93 color:gray; 94 }
以上是关于[CSS3] 学习笔记-HTML与CSS简单页面效果实例的主要内容，如果未能解决你的问题，请参考以下文章
附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记