HTML的简单应用

最新推荐文章于 2021-09-17 23:10:49 发布

勤奋赛过天赋

最新推荐文章于 2021-09-17 23:10:49 发布

阅读量248

点赞数

分类专栏： HTML 文章标签： HTML盒子

本文链接：https://blog.csdn.net/qq_43328996/article/details/93376576

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基本选择器的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>选择器的使用</title>
</head>
<style type="text/css">
    /*类型选择器nav表示导航*/
    nav{
        width: 300px;
        height: 400px;
    }
    /*类型选择器a表示连接*/
    a{
        text-decoration: none;
        display: block;
        color: #fff;
        height: 35px;
        padding: 0 38px;
    }
    li{
        background-color: rgba(0,0,0,0.7);/*背景颜色透明度为0.7*/
        height: 35px;
        line-height: 35px;
        overflow: hidden;
    }
    /*偶数行背景颜色透明度为0.9*/
    li:nth-of-type(2n){
        background-color: rgba(0,0,0,0.9);
    }
    /*鼠标悬停时背景颜色为#0099E5*/
    li:hover{
        background: #0099E5;
    }
</style>
<body>
    <nav>
        <ul>
        <li><a href="#"><span>JavaEE培训</span></a></li>
        <li><a href="#"><span>Android培训</span></a></li>
        <li><a href="#"><span>PHP培训</span></a></li>
        <li><a href="#"><span>UI培训</span></a></li>
        <li><a href="#"><span>iOS培训</span></a></li>
        <li><a href="#"><span>前端与移动开发培训</span></a></li>
        <li><a href="#"><span>C/C++培训</span></a></li>
        <li><a href="#"><span>网络营销培训</span></a></li>
        <li><a href="#"><span>游戏开发培训 </span></a></li>
        <li><a href="#"><span>云计算之大数据培训</span></a></li>
        </ul>
    </nav>
</body>
</html>

浮动和定位的使用区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>浮动和定位</title>
</head>
<style type="text/css">
    /*给类名为header、aside、main、footer的元素设置背景颜色和边框*/
   .header,.aside,.main,.footer{
       background-color: pink;/*背景色为粉色*/
       border:1px solid yellow;/*边框为1px的黄色实线*/
   }
   .header{
       height: 100px;
   }
    .aside,.main{
        height: 200px;
    }
   .aside{
       width: 200px;
       float: left;/*类名为aside的元素左浮动*/
   }
    .main{
        margin-left: 202px;/*元素左边框距为202px*/
    }
    .footer{
        height: 50px;
    }
    /*给类名为float-div的元素设置背景颜色、边框、宽高及绝对定位*/
    .float-div{
        background-color: paleturquoise;/*背景色为苍白的宝石绿*/
        border:1px solid yellow;/*边框为1px的黄色实线*/
        width: 100px;
        height: 100px;
        position: absolute;/*绝对定位*/
        top: 160px;
        left: 500px;
    }
</style>
<body>
    <header class="header">header</header>
    <aside  class="aside">aside</aside>
    <section class="main">section</section>
    <footer class="footer">footer</footer>
    <div class="float-div">floatdiv</div>
</body>
</html>

勤奋赛过天赋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的简单应用

基本选择器的使用<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>选择器的使用</title></head><style type="text/css"> /*类型选择器nav表示导航*/ na...
复制链接

扫一扫