CSS基础-37HTML与CSS简单页面效果实例

来源：互联网发布：经济学最优化编辑：程序博客网时间：2024/04/28 19:59
<!DOCTYPE html><!--HTML与CSS简单页面效果实例--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="css16.css" type="text/css" rel="stylesheet"></head><body>    <div class="rongqi">        <!--主体-->        <div class="shangbu">            <div class="head">                <div class="head_rongqi">                    <!--导航的题目-->                    <div class="head_timu">导航题目</div>                    <!--导航-->                    <div class="head_daohang">                        <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="head_img">                        <img src="images/item1.jpg">                    </div>                    <div class="head_form">                        <form>                            <input type="text">                        </form>                    </div>                </div>            </div>            <div class="body">                <div class="body_tiyle">                    <h3>极客学院</h3>                    <p>APICloud是中国领先的“云端一体”的移动应用云服务提供商。                        [1] APICloud为开发者从“云”和“端”两个方向提供API，                        简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。                        基于APICloud提供的“云API”和“端API”，                    </p>                    <hr/>                    <hr/>                </div>            </div>        </div>        <!--脚部-->        <div class="foot">            @极客学院        </div>    </div></body></html>
css:
*{    margin: 0px;    padding: 0px;}body{    background-color: #cccccc;}.shangbu{    width: 80%;    height: 1000px ;    background-color: #b3d4fc;    /*上下边距是0 左右自适应 就是居中*/    margin: 0px auto;}.head{    width: 100%;    height: 100px;    margin: 0px auto;    background-color: aquamarine;}.head_timu{    float: left;    font-size: 30px;    padding: 6px;    color: #222222;    font-family: cursive;    display: inline;}.head_rongqi{    padding-top: 30px;    padding-bottom: 30px;    width: 100%;    height: 30px;    position: relative;}li{    padding-left: 10px;    display: inline;}ul{    margin-left: 40px;    float: left;    /*去掉列表前面的点*/    list-style-type: none;    padding-top: 6px;    padding-bottom: 6px;}a:link,a:visited{    /*字体加粗*/    font-weight: bold;    color: #222222;    text-align: center;    /*去掉下划线*/    text-decoration: none;    padding: 6px;}/*鼠标放上去效果，点击时的效果*/a:hover,a:active{    color: #ff0000;}.head_img img{    border-radius: 30px;    display: inline;    width: 26px;    height: 26px;    box-shadow: 0px 1px 1px rgba(0,0,0,0.2);    float: right;}/*设置表单*/.head_form form{    float: right;    width: 100px;    height: 26px;    position: relative;    margin-right: 100px;}/*设置表单中的东西*/.head_form form input{    height: 26px;    border-radius: 30px;}.foot{    padding-top: 10px;    text-align: center;    color: #999999;    font-size: 20px;}.body_tiyle h3{    color: cornflowerblue;    font-size: 30px;    font-family: monospace, monospace;}.body{    padding: 30px;    width: auto;    height: auto;}.body_tiyle p{    margin-top: 20px;    margin-bottom: 20px;}
0 0