本篇博客实现一个HTML与CSS简单页面效果实例
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="wrapper"> 11 <div class="heading"> 12 <div class="heading_nav"> 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="img.jpg"> 26 </div> 27 <div class="heading_soptlight"> 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 45 <div class="footing"> 46 @极客学院 47 </div> 48 49 </div> 50 </body> 51 </html>
css代码：
1 *{
2 margin:0px;
3 padding:0px;
4 }
5
6 body{
7 background-color: snow;
8 }
9 .wrapper{
10 width:80%;
11 height:1000px;
12 background-color: antiquewhite;
13 margin:0px auto;
14 }
15 .heading{
16 width:100%;
17 height:160px;
18 background-color: snow;
19 margin:0px auto;
20 }
21 ul{
22 margin-left:40px;
23 float:left;
24 list-style-type:none;
25 padding-top:40px;
26 padding-bottom:6px;
27 }
28 a:link,a:visited{
29 font-weight:bold;
30 color:darkgray;
31 text-align:center;
32 padding:6px;
33 text-decoration: none;
34 }
35 a:hover,a:active{
36 color:blue;
37 }
38 .heading_title{
39 float:left;
40 font-family:Arial,Helvetica,sans-serif;
41 font-size:30px;
42 color:burlywood;
43 }
44 .heading_nav{
45 padding-bottom:30px;
46 padding-top:30px;
47 width:100%;
48 height:30px;
49 position:relative;
50 }
51 li{
52 padding-left:10px;
53 display:inline;
54 }
55
56 .heading_img img{
57 border-radius:30px;
58 display:inline;
59 width:46px;
60 height:46px;
61 box-shadow:0 1px 1px rgba(0,0,0,0.2);
62 float:right;
63 }
64
65 .heading_soptlight form{
66 float:right;
67 width:100px;
68 height:26px;
69 position:relative;
70 margin-right:82px;
71 margin-top:16px;
72 }
73 form input{
74 height:26px;
75 border-radius:30px;
76 }
77 .body{
78 width:auto;
79 height:auto;
80 padding:30px;
81 }
82 .body_title h3{
83 font-size:30px;
84 font-family:Arial,Helvetical,sans-serif;
85 color:#333333;
86 }
87 .body_title p{
88 margin-top:20px;
89 margin-bottom:20px;
90 }
91 .footing{
92 padding-top:20px;
93 text-align:center;
94 fon-size:10px;
95 color:darkgray;
96 }
效果：
时间： 2024-10-08 23:45:38