CSS页面效果实例

更新时间：2022-02-17 09:34:12 来源：极悦浏览551次

效果展示：

HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>标题</title>
     <link href="style.css" type="text/css" rel="stylesheet">
 </head>
 <body>
     <div class="container">
         <div class="wrapper">
             <div class="heading">
                 <div class="heading_nav">
                     <div class="heading_title">
                         新闻实战
                     </div>
                     <div class="heading_navbar">
                         <ul>
                             <li><a href="#">首页</a></li>
                             <li><a href="#">推荐</a></li>
                             <li><a href="#">军事</a></li>
                             <li><a href="#">财经</a></li>
                             <li><a href="#">娱乐</a></li>
                             <li><a href="#">体育</a></li>
                             <li><a href="#">科技</a></li>
                             <li><a href="#">游戏</a></li>
                             <li><a href="#">汽车</a></li>
                             <li><a href="#">房产</a></li>
                         </ul>
                     </div>
                     <div class="heading_image">
                         <img src="image.jpg">
                     </div>
                     <div class="heading_spotlight">
                         <form>
                             <input type="text">
                         </form>
                     </div>
                 </div>
             </div>
             <div class="body">
                 <div class="body_title">
                     <h3>热点要闻</h3>
                     <p>每天关注全球发生的新鲜事</p>
                 </div>
                 <hr/>
                 <hr/>
             </div>
         </div>
         <div class="footing">
             @新闻实战
         </div>
     </div>
 </body>
 </html>

CSS

 *{
     margin: 0px;
     padding: 0px;
 }
 body{
     background-color: snow;
 }
 .wrapper{
     width: 80%;
     height: 1000px;
     background-color: antiquewhite;
     margin: 0px auto;
 }
 .heading{
     margin: 0px auto;
     width: 100%;
     height: 90px;
     background-color: snow;
 }
 .heading_title{
     float: left;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 30px;
     color: burlywood;
 }
 .heading_nav{
     padding-bottom: 30px;
     padding-top: 30px;
     width: 100%;
     height: 30px;
     position: relative;
 }
 ul{
     margin-left: 40px;
     float: left;
     list-style-type: none;
     padding-top: 6px;
     padding-bottom: 6px;
 }
 li{
     padding-left: 10px;
     display: inline;
 }
 a:link,a:visited{
     font-weight: bold;
     color: darkgray;
     text-align: center;
     padding: 6px;
     text-decoration: none;
 }
 a:hover,a:active{
     color: dimgray;
 }
 .heading_image img{
     border-radius: 30px;
     display: inline;
     width: 26px;
     height: 26px;
     box-shadow: 0 1px 1px rgba(0,0,0,0.2);
     float: right;
 }
 .heading_spotlight form{
     float: right;
     width: 150px;
     height: 26px;
     position: relative;
     margin-right: 50px;
 }
 form input{
     height: 26px;
     border-radius: 30px;
 }
 .body{
     padding: 30px;
     height: auto;
     width: auto;
 }
 .body_title h3{
     font-size: 30px;
     font-family: Arial, Helvetica, sans-serif;
     color: dimgray;
 }
 .body_title p{
     margin-top: 20px;
     margin-bottom: 20px;
 }
 .footing{
     padding-top: 20px;
     text-align: center;
     font-size: 10px;
     color: darkgray;
 }

CSS教程