HTML与CSS简单页面效果实例

顺晟科技

2022-09-14 10:54:51

190

本篇博客实现一个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 }

效果：

上一篇：基于jQuery CSS3鼠标点击动下一篇：10个实用的 CSS3 按钮效果制作

网站建设

Css

HTML与CSS简单页面效果实例