HTML与CSS简单页面效果实例

效果展示：

HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6     <link href="style.css" type="text/css" rel="stylesheet">
 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="#">财经</a></li>
22                             <li><a href="#">娱乐</a></li>
23                             <li><a href="#">体育</a></li>
24                             <li><a href="#">科技</a></li>
25                             <li><a href="#">游戏</a></li>
26                             <li><a href="#">汽车</a></li>
27                             <li><a href="#">房产</a></li>
28                         </ul>
29                     </div>
30                     <div class="heading_image">
31                         <img src="image.jpg">
32                     </div>
33                     <div class="heading_spotlight">
34                         <form>
35                             <input type="text">
36                         </form>
37                     </div>
38                 </div>
39             </div>
40             <div class="body">
41                 <div class="body_title">
42                     <h3>热点要闻</h3>
43                     <p>每天关注全球发生的新鲜事</p>
44                 </div>
45                 <hr/>
46                 <hr/>
47             </div>
48         </div>
49         <div class="footing">
50             @新闻实战
51         </div>
52     </div>
53 </body>
54 </html>

CSS

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 body{
 6     background-color: snow;
 7 }
 8 .wrapper{
 9     width: 80%;
10     height: 1000px;
11     background-color: antiquewhite;
12     margin: 0px auto;
13 }
14 .heading{
15     margin: 0px auto;
16     width: 100%;
17     height: 90px;
18     background-color: snow;
19 }
20 .heading_title{
21     float: left;
22     font-family: Arial, Helvetica, sans-serif;
23     font-size: 30px;
24     color: burlywood;
25 }
26 .heading_nav{
27     padding-bottom: 30px;
28     padding-top: 30px;
29     width: 100%;
30     height: 30px;
31     position: relative;
32 }
33 ul{
34     margin-left: 40px;
35     float: left;
36     list-style-type: none;
37     padding-top: 6px;
38     padding-bottom: 6px;
39 }
40 li{
41     padding-left: 10px;
42     display: inline;
43 }
44 a:link,a:visited{
45     font-weight: bold;
46     color: darkgray;
47     text-align: center;
48     padding: 6px;
49     text-decoration: none;
50 }
51 a:hover,a:active{
52     color: dimgray;
53 }
54 .heading_image img{
55     border-radius: 30px;
56     display: inline;
57     width: 26px;
58     height: 26px;
59     box-shadow: 0 1px 1px rgba(0,0,0,0.2);
60     float: right;
61 }
62 .heading_spotlight form{
63     float: right;
64     width: 150px;
65     height: 26px;
66     position: relative;
67     margin-right: 50px;
68 }
69 form input{
70     height: 26px;
71     border-radius: 30px;
72 }
73 .body{
74     padding: 30px;
75     height: auto;
76     width: auto;
77 }
78 .body_title h3{
79     font-size: 30px;
80     font-family: Arial, Helvetica, sans-serif;
81     color: dimgray;
82 }
83 .body_title p{
84     margin-top: 20px;
85     margin-bottom: 20px;
86 }
87 .footing{
88     padding-top: 20px;
89     text-align: center;
90     font-size: 10px;
91     color: darkgray;
92 }

 

posted @ 2020-03-21 17:33  组装梦想  阅读(603)  评论(0)  编辑  收藏  举报