CSS3(2)

当前位置:

首页 > 网站开发 > css >

CSS3(2)

p> <h1>《魁拔》</h1> <p class="p1"> 是2008年北京青青树动漫科技有限公司以系列动画电影的第一部《魁拔之十万火急》为基础，重新剪辑而成的TV动画。由王川执导，田博、马华等编剧，刘婧荦，竹内顺子等配音。 </p> <p class="p3"> TV版完整保留了电影的世界观、人物设定、故事内容和情节主线，但重制了片头曲。《魁拔妖侠传》是魁拔系列电影的前传，主要讲述的是有关卡拉肖克潘家族的故事，与电影关系并不大。目前大家所说的魁拔通常指魁拔系列动画电影。 </p> <p> <img src="a.png" alt=""> <span>jdlajsdajldjalsjd</span> </p> </body> </html>

3.4、超链接伪类和阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size: 20px;
        }
        /*鼠标按住未释放状态*/
        a:active{
            color: #2be24e;
        }
        /*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: cadetblue 5px 5px 1px;
        }
        
        p:hover{
            background: blueviolet;
        }

    </style>
</head>
<body>

    <a href="#">
        <img src="images/1.jpg" alt="">
    </a>
    <p>
        <a href="#">码出高效：Java开发手册</a>
    </p>
    <p>
        <a href="#">作者：孤尽老师</a>
    </p>
    <p id="price">￥99</p>

</body>
</html>

3.5、列表

#nav{
    width: 300px;
    background: darkgrey;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #ff0b2f;
}
/*
list-style:
            none;去掉圆点
            circle；空心圆
            decimal：数字
            square：正方形
*/

/*ul{*/
/*    background: darkgrey;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    color: orange;
    text-decoration: underline;

}

3.6、背景图像

背景颜色

背景图片

div{
    width: 1400px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/1.jpg");
    /*默认平铺*/
}
.div1{
    background-repeat: repeat-x;/*水平平铺*/

}
.div2{
    background-repeat: repeat-y;/*竖直平铺*/
}
.div3{
    background-repeat: no-repeat;/*不平铺*/
}

3.7、渐变

推荐网站：https://www.grabient.com/

background-color: #FFFFFF;
background-image: linear-gradient(124deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

4、盒子模型

4.1、什么是盒子

margan：外边距
padding：内边距
border：边框

4.2、边框

边框的粗细
边框的样式
边框的颜色

/*body总有一个默认的外边距margin：8dp*/
body{
    margin: 0;
}
#app{
    width: 300px;
    border: 1px solid red;/*粗细 样式 颜色*/
}
h2{
    font-size: 16px;
    background: cadetblue;
    line-height: 30px;
    margin: 0;
    color: #FFFFFF;
}
form{
    background: cadetblue;
}
div:nth-of-type(1) input{
    border: 3px solid black;
}
div:nth-of-type(2) input{
    border: 3px dashed #be0be2;
}
div:nth-of-type(2) input{
    border: 2px dashed #2be24e;
}

4.3、内外边距

<!--外边距可以使居中-->
<style>
    /*body总有一个默认的外边距margin：8dp*/
    body{
        margin: 0;
    }
    /*  margin:0;一个参数为上下左右
        margin: 0 auto;上下为0，左右自动，实现水平居中
        margin:0 1px 2px 3px;四个参数为上右下左，顺时针
    */
    #app{
        width: 300px;
        border: 1px solid red;/*粗细 样式 颜色*/
        margin: 0 auto;
    }
    h2{
        font-size: 16px;
        background: cadetblue;
        line-height: 30px;
        margin: 0;
        color: #FFFFFF;
    }
    form{
        background: cadetblue;
    }
   input{
       border: 1px solid black;
   }
    div:nth-of-type(1){
        padding: 10px;
    }

盒子的计算方式：这个元素到底多大？

margin+border+padding+内容宽度

4.4、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- border-radius: 50px 20px;左上右下  右上左下-->
    <!--圆圈：圆角 = 宽度的一半 -->
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid red;
            border-radius: 100px 100px 0 0;
        }
        img{
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div></div>
<img src="images/1.jpg" alt="">
</body>
</html>

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
           margin：0 auto;居中要求：外面是一个块元素，块元素有固定的宽度
    -->
    <style>

        div{
            width: 1000px;
            height: 500px;
            text-align: center;
        }
        img{
            border-radius: 100px;
            box-shadow: 10px 10px 100px yellow;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>

    <div>
        <img src="images/1.jpg" alt="">
    </div>

</body>
</html>

5、浮动

5.1、标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之则不可以

5.2、display

<!--display:
            block;块元素
            inline;行内元素
            inline-block;是块元素，但是可以内联，在同一行
            none;不显示
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline-block;
    }
</style>

这个也是一种能够实现行内元素排列的方式，但是我们很多情况都使用float

5.3、float

左右浮动

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid red;
}

.layer01{
    border: 1px dashed black;
    display: inline-block;
    float: left;
}

.layer02{
    border: 1px dashed green;
    display: inline-block;
    float: left;
}

.layer03{
    border: 1px dashed blue;
    display: inline-block;
    float: left;
}

.layer04{
    border: 1px dashed paleturquoise;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

5.4、父级边框塌陷问题

clear

clear:
        right; 右侧不允许有浮动元素
        left; 左侧不允许有浮动元素
        both;两侧都不允许有浮动元素

解决方案：

增加父级元素高度

#father{
    border: 1px solid red;
    height: 800px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

overflow

在父级元素中增加一个 overflow: hidden;

父类添加一个伪类 after
```
#father:after{
    content: '';
    display: block;
    clear: both;
}
```
小结：
- 浮动元素后面增加空的div
  - 简单，代码中尽量避免空的div
- 设置父元素的高度
  - 简单，元素假设有了固定的高度，就会被限制
- overflow
  - 简单，下拉的一些场景避免使用
- 父类添加一个伪类：after（推荐）
  - 写法稍微复杂一点，但是没有副作用，推荐使用

5.5、对比

display

方向不可控制
float

浮动起来会脱离标准文档流，所以要解决父级塌陷的问题

6、定位

6.1、相对定位

相对定位：position: relative;

相对于原来的位置，进行指定的偏移,相对定位的话，它任然在标准文档流中，原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

<!DOCTYPE html>
<html lang="en">
<head>
    <!--相对定位：相对于自己原来的位置进行定位-->
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 15px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: #23ff66;
            border: 1px dashed #23ff98;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #34cedd;
            border: 1px dashed #34ceff;
        }
        #third{
            background-color: #ff8299;
            border: 1px dashed #ff82fc;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习：方块定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: red 1px solid;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: #FFFFFF;
            display: block;
        }
        a:hover{
            background: #6284FF;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            top: -300px;
            right: -100px;
        }
    </style>
</head>
<body>

    <div id="box">
        <a href="#" class="a1">链接1</a>
        <a href="#" class="a2">链接2</a>
        <a href="#" class="a3">链接3</a>
        <a href="#" class="a4">链接4</a>
        <a href="#" class="a5">链接5</a>
    </div>

</body>
</html>

6.2、绝对定位

定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常相对于父级元素进行偏移
在父级元素范围内移动

相对于父级或者浏览器的位置，进行指定的偏移,绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 15px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #23ff66;
            border: 1px dashed #23ff98;
        }
        #second{
            background-color: #34cedd;
            border: 1px dashed #34ceff;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #ff8299;
            border: 1px dashed #ff82fc;
        }
    </style>
</head>
<body>

<div id="father">
    <div id


  
  
   
    共3页: 
上一页
1
2
3
下一页


 
 
  
 
 
  

  
 
 
 
栏目列表
  
      
      css
      
      JSP
      
      JavaScript
      
      ASPnet
      
      ASP.net 4.0教程
      
      HTML
      
      
      
      
    
    
    

    
    
    


 




 





 



 






 




 
  
 
         
    最新更新
        

    
                      
              python爬虫及其可视化
     
使用python爬取豆瓣电影短评评论内容
     
nodejs爬虫
     
Python正则表达式完全指南
     
爬取豆瓣Top250图书数据
     
shp 地图文件批量添加字段
     
爬虫小试牛刀（爬取学校通知公告）
     
【python基础】函数-初识函数
     
【python基础】函数-返回值
     
HTTP请求：requests模块基础使用必知必会
     



    
                  SQL SERVER中递归
     
2个场景实例讲解GaussDB(DWS)基表统计信息估
     
常用的 SQL Server 关键字及其含义
     
动手分析SQL Server中的事务中使用的锁
     
openGauss内核分析：SQL by pass & 经典执行
     
一招教你如何高效批量导入与更新数据
     
天天写SQL，这些神奇的特性你知道吗？
     
openGauss内核分析：执行计划生成
     
[IM002]Navicat ODBC驱动器管理器 未发现数据
     
初入Sql Server 之 存储过程的简单使用
     



              uniapp/H5 获取手机桌面壁纸 (静态壁纸）
     
[前端] DNS解析与优化
     
为什么在js中需要添加addEventListener（）？
     
JS模块化系统
     
js通过Object.defineProperty() 定义和控制对象
     
这是目前我见过最好的跨域解决方案！
     
减少回流与重绘
     
减少回流与重绘
     
如何使用KrpanoToolJS在浏览器切图
     
performance.now() 与 Date.now() 对比






 




相关教程





python基础教程
软件开发
PHP教程
sql教程
vb.net教程
sql语句大全
asp.net教程
dreamweaver教程
javascript教程
flash教程
vb教程
计算机二级vfp
access教程
html5教程
C#教程
web前端 
python入门教程 





关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们

  
  
黑ICP备07002182号