HTML与CSS简单页面效果实例

 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>

 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 }