HTML与CSS简单页面效果实例

来源：互联网发布：云课堂软件编辑：程序博客网时间：2024/04/28 23:50

.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>敏敏的web页</title>    <link rel="stylesheet" type="text/css" href="style.css" /></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="#">VIP选项</a></li>                        </ul>                    </div>                    <div class="heading_img">                        <img src="miao.jpg">                    </div>                    <div class="heading_spotlight">                        <form>                            <input type="text" />                        </form>                    </div>                </div>            </div>            <div class="body">                <div class="body_title">                    <h3>fighting</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: black;}.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: darkgrey;    text-align: center;    padding: 6px;    text-decoration: none;}a:hover,a:active{    color: red;}.heading_img img{    border-radius: 30px;    display: inline;    width: 30px;    height: 30px;    box-shadow: 0 1px 1px rgba(0,0,0,0.2);    float: right;}.heading_spotlight form{    float: right;    width: 100px;    height: 26px;    position: relative;    margin-right: 50px;}form input{    height: 26px;    border-radius: 30px;}.body{    height: auto;    width: auto;    padding: 30px;}.body_title h3{    font-size: 30px;    font-family: Arial, Helvetica, sans-serif;    width: auto;    color: #333333;}.body_title p{    margin-top: 20px;    margin-bottom: 20px;}.footing{    padding-top: 20px;    text-align: center;    font-size: 10px;    color: darkgrey;}

0 0