css学习

浅思暖意 發表於 2021-11-30 14:19:00

<h3 id="第一个css程序">第一个css程序</h3>
<p><strong>项目结构：</strong><br>
<img src="https://img2020.cnblogs.com/blog/2629326/202111/2629326-20211123132435074-687164779.png" alt="" loading="lazy"><br>
<strong>html文件</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>

<link rel="stylesheet" href="css/style.css">

<h1>我是标题</h1>

</code></pre>
<p><strong>css文件：</strong></p>
<pre><code class="language-css">h1{
color: red;
}
</code></pre>
<p>CSS的优势：</p>
<ol>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用</li>
<li>样式十分丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利于SEO，容易被搜索引擎收录</li>
</ol>
<h3 id="css的三种导入方式">css的三种导入方式</h3>
<p><strong>html文件：</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>

<style>
   h1{
         color: green;
   }
</style>

<link rel="stylesheet" href="css/style.css">



<h1>我是标题</h1>

</code></pre>
<p><strong>css文件：</strong></p>
<pre><code class="language-css">/*外部样式*/
h1{
color: yellow;
}
</code></pre>
<h3 id="基本选择器">基本选择器</h3>
<ol>
<li>标签选择器: 选择一类标签格式(标签{})</li>
</ol>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   /*标签选择器，会选择这个页面上所有的这个标签
   color: 字体颜色
   background-color: 背景颜色
   border-radius: 边框圆润度
   */
   h1{
         color: #e51010;
         background-color: aqua;
         border-radius: 20px;
   }
   /*
   font-size: 字体大小

   */
   p{
         font-size: 30px;
   }
</style>

<h1>学java</h1>
<h1>学java</h1>
<p>你会发财</p>

</code></pre>
<ol start="2">
<li>类选择器:选择所有class属性一致的标签，格式(.class的值{})</li>
</ol>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>

<style>
   /*类选择器的格式.class的值{}
   好处，可以让多个标签归类，属于同一个class，设置相同的属性，可以复用
   */
   .c1{
         color: blue;
   }
   .c2{
         color: aqua;
   }
</style>

<h1 class="c1">标题1</h1>
<h1 class="c2">标题1</h1>
<h1 class="c1">标题1</h1>

<p class="c1">p标签</p>

</code></pre>
<ol start="3">
<li>id选择器:全局唯一，格式(#id的值{})</li>
</ol>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>

<style>
   /*id选择器格式#id的值{}
   id的值必须保证全局唯一
   不遵循就近原则，固定的
   id选择器 > 类选择器 > 标签选择器
   */
   #i1{
         color: #e51010;
   }
   .c1{
         color: aqua;
   }
   h1{
         color: green;
   }
</style>

<h1 id="i1">标题标签</h1>
<h1 class="c1">标题标签</h1>
<h1>标题标签</h1>

</code></pre>
<h3 id="层次选择器">层次选择器</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>层次选择器</title>

<style>
   /*p{
         background-color: green;
   }*/
   /*后代选择器某一个元素的后面所有元素*/
   /*body p{
         background: #e51010;
   }*/
   /*子选择器只有后面的所有同级元素有效*/
   body>p{
         background: aqua;
   }
   /*兄弟选择器选择某个元素后和它同一级的元素,只对下面的元素有效并且只有一个*/
   /*.active + p{
         background: green;
   }*/
   /*通用选择器当前选中元素的向下的所有同级元素*/
   /*.active~p{
         background: blue;
   }*/
</style>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
   <li>
         <p>p4</p>
   </li>
   <li>
         <p>p5</p>
   </li>
   <li>
         <p>p6</p>
   </li>
</ul>
<p>p7</p>

</code></pre>
<h3 id="结构伪类选择器">结构伪类选择器</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>层次选择器</title>

<style>
   /*选择ul下面的第一个li元素*/
   ul li:first-child{
         background: #e51010;
   }
   /*选择ul下面的最后一个li元素*/
   ul li:last-child{
         background: blue;
   }
   /*选择p1 ：定位到父元素，选择当前的第一个元素
   p:nth-child(1)：选中p元素的父元素，选择父级元素的第一个,并且是当前元素才会生效
   */
   p:nth-child(1){
         background: aqua;
   }
   /*选中父类元素里面第二个类型为p的元素*/
   p:nth-of-type(2){
         background: green;
   }
</style>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
   <li>li1</li>
   <li>li2</li>
   <li>li3</li>
</ul>

</code></pre>
<h3 id="属性选择器">属性选择器</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   .demo a{
         float: left;
         display: block;
         height: 50px;
         width: 50px;
         text-align: center;
         border-radius: 10px;
         background-color: aqua;
         color: blue;
         text-decoration: none;
         margin-right: 10px;
         font: bold 20px/50px Arial;
   }
   /*选中a标签里面带有id属性的元素语法： a[属性名或者属性名=属性值]{}
   这里面的 = 表示绝对等于
   *=包含这个元素
   ^=表示以什么开头
   $=表示以什么结尾
   */
   /*a{
         background-color: yellow;
   }*/
   /* a{
         background-color: #e51010;
   }*/
   /*选中class中含有links的元素*/
   /*a{
         background-color: yellow;
   }*/
   /*选中href中以http开头的元素*/
   /*a{
         background-color: yellow;
   }*/
   /*选中href中以pdf结尾的元素*/
   a{
         background-color: yellow;
   }
</style>

<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="https:" class="links item first" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="abc/a.pdf" class="links item">7</a>
<a href="/ad.pdf" class="links item">8</a>
<a href="abd.doc" class="links item">9</a>
<a href="djw.doc" class="links item last">10</a>
</p>

</code></pre>
<p><strong>效果如下图:</strong><br>
<img src="https://img2020.cnblogs.com/blog/2629326/202111/2629326-20211123170317761-982144588.png" alt="" loading="lazy"></p>
<h3 id="字体样式">字体样式</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>

<style>
   body{
         font-family: 楷体;
         color: #e51010;
   }
   h1{
         font-size: 50px;
   }
   .p1{
         font-weight: bold;
   }
</style>

<h1>原神</h1>
<p class="p1">
《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项，原初测试于2019年6月21日开启，再临测试于2020年3月19日开启，启程测试于2020年6月11日开启，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。
</p>
<p>
游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相。
</p>

</code></pre>
<h3 id="文本样式">文本样式</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   /*
   color :字体颜色，后跟参数可以为：
                           单词
                           RGB参数为0~255，0~255，0~255
                           RGBA 参数为0~255，0~255，0~255，0~1 最后一个参数表示透明度
   text-align :排版后跟参数有:
                           center 居中
                           right 靠右
                           left 靠左
   */
   h1{
         color: rgba(0,255,0,0.2);
         text-align: center;
   }
   /*text-indent: 2em;段落首行缩进，缩进两个字符或者也可以为px，即缩进两个像素*/
   .p1{
         text-indent: 2em;
   }
   /*line-height行高，如果行高和块的高度一致，就可以上下居中*/
   .p2{
         background-color: yellow;
         height: 300px;
         line-height: 150px;
   }
   /*下划线*/
   .l1{
         text-decoration: underline;
   }
   /*中划线*/
   .l2{
      text-decoration: line-through;
   }
   /*上划线*/
   .l3{
         text-decoration: overline;
   }
   /*超链接去除下划线*/
   a{
         text-decoration: none;
   }
   /*
   水平对其，，需要参照物，a,b
   */
   img,span{
         vertical-align: middle;
   }
</style>

<a href="">123</a>
<p class="l1">123122</p>
<p class="l2">123122</p>
<p class="l3">123122</p>
<h1>原神</h1>
<p class="p1">
   《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项，原初测试于2019年6月21日开启，再临测试于2020年3月19日开启，启程测试于2020年6月11日开启，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。
</p>
<p class="p2">
   游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相。
</p>

<img src="images/2.png" alt="">
<span>cececececececececece</span>

</code></pre>
<h3 id="超链接伪类">超链接伪类</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   /*默认颜以及去除下划线*/
   a{
         text-decoration: none;
         color: #000000;
   }
   /*鼠标悬停到上面的状态*/
   a:hover{
         color: blue;
   }
   /*鼠标按住未释放的状态*/
   a:active{
         color: #e51010;
   }
   /*text-shadow 阴影效果参数依次为：阴影颜色水平位移垂直位移阴影半径*/
   #price{
         text-shadow: #00e5e1 10px 0px 2px;
   }
</style>

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

</code></pre>
<h3 id="列表">列表</h3>
<p><strong>html文件</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">

<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
   <li>
         <a href="#">图书</a>
         <a href="#">音像</a>
         <a href="#">数字商品</a>
   </li>
   <li>
         <a href="#">家用电器</a>
         <a href="#">手机</a>
         <a href="#">数码</a>
   </li>
   <li>
         <a href="#">电脑</a>
         <a href="#">办公</a>
   </li>
   <li>
         <a href="#">家居</a>
         <a href="#">家装</a>
         <a href="#">厨具</a>
   </li>
   <li>
         <a href="#">服饰鞋帽</a>
         <a href="#">个性化妆</a>
   </li>
   <li>
         <a href="#">礼品箱包</a>
         <a href="#">钟表</a>
         <a href="#">珠宝</a>
   </li>
   <li>
         <a href="#">食品饮料</a>
         <a href="#">保健食品</a>
   </li>
   <li>
         <a href="#">彩票</a>
         <a href="#">旅行</a>
         <a href="#">充值</a>
         <a href="#">票务</a>
   </li>
</ul>
</div>

</code></pre>
<p><strong>css文件</strong></p>
<pre><code class="language-css">#nav{
width: 255px;
background:#828a91;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
/*颜色图片图片位置平铺方式*/
background: red url("../images/2.png") 230px 10px no-repeat;
}
/*
列表前面默认实心圆点
list-style ：
         none去掉圆点
         circle空心圆
         decimal数字
         square实心正方形
*/
ul li{
line-height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/2.png");
background-repeat: no-repeat;
background-position: 188px 5px;
}

a{
text-decoration: none;
color: #000;
font-size: 14px;
}
a:hover{
color: orange;
}
</code></pre>
<h3 id="背景">背景</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   /*border 设置边框参数为边框的宽度边框的样式（solid 实线）边框的颜色*/
   div{
         width: 1080px;
         height: 720px;
         border-radius: 20px;
         border: 20px solid red;
         background-image: url("images/2.png");
         /*默认是全部平铺的*/
   }
   .div1{
         /*水平平铺*/
         background-repeat: repeat-x;
   }
   .div2{
         /*垂直平铺*/
         background-repeat: repeat-y;
   }
   .div3{
         /*不平铺*/
         background-repeat: no-repeat;
   }
</style>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</code></pre>
<h3 id="盒子模型">盒子模型</h3>
<p><strong>1. 边框</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
body{
   /*body 总有一个默认的外边距 margin:*px一般会初始化为0*/
   margin: 0px;
}
h2{
   font-size: 16px;
   background-color: #aee3bf;
   line-height: 30px;
   color: white;
}
/*border : 粗细样式颜色*/
#box{
   width: 300px;
   border: 1px solid red;
}
form{
   background-color: #aee3bf;
}
/*选择父类元素里面第一个为div的元素里面的input标签*/
div:nth-of-type(1)>input{
   border: 3px solid black;
}
/*选择父类元素里面第二个为div的元素里面的input标签*/
div:nth-of-type(2)>input{
   border: 2px dashed aqua;
}
/*选择父类元素里面第三个为div的元素里面的input标签*/
div:nth-of-type(3)>input{
   border: 1px dashed black;
}
</style>

<div id="box">
<h2>会员登录</h2>
<form action="#" method="get">
<div>
   <span>用户名：</span>
   <input type="text">
</div>
<div>
   <span>密码：</span>
   <input type="password">
</div>
<div>
   <span>邮箱：</span>
   <input type="text">
</div>
</form>
</div>

</code></pre>
<p><strong>2.内外边距</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>

<style>
   body{
         /*body 总有一个默认的外边框 margin:8px*/
         margin: 0px;
   }
   /*外边距
   margin: 0; 代表上下左右都为零
   margin: 0 1; 代表上下为0 左右为1
   margin: 0 1 2 3; 代表上为0右为1 下为2 左为3顺时针旋转
   */
   h2{
         font-size: 16px;
         background-color: #aee3bf;
         line-height: 30px;
         color: white;
         margin: 1px 2px 3px 4px;
   }
   /*border : 粗细样式颜色*/
   #box{
         width: 300px;
         border: 1px solid red;
         margin: 0 auto;
   }
   form{
         background-color: #aee3bf;
   }
   /*选择父类元素里面第一个为div的元素里面的input标签
   padding内边距与外边距用法一致
   */
   div:nth-of-type(1)>input{
         border: 3px solid black;
         padding: 10px;
   }
   /*选择父类元素里面第二个为div的元素里面的input标签*/
   div:nth-of-type(2)>input{
         border: 2px dashed aqua;
   }
   /*选择父类元素里面第三个为div的元素里面的input标签*/
   div:nth-of-type(3)>input{
         border: 1px dashed black;
   }
</style>

<div id="box">
<h2>会员登录</h2>
<form action="#" method="get">
   <div>
         <span>用户名：</span>
         <input type="text">
   </div>
   <div>
         <span>密码：</span>
         <input type="password">
   </div>
   <div>
         <span>邮箱：</span>
         <input type="text">
   </div>
</form>
</div>

</code></pre>
<h3 id="圆角边框">圆角边框</h3>
<p><strong>1.边框圆角</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   /*
   border-radius 圆角边距
   border-radius: 50px;上下左右都为50px
   border-radius: 50px 20px; 左上右下为50px 右上左下为20px
   border-radius: 50px 20px 10px 5px; 从左上开始顺时针旋转分配
   */
   div{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         border-radius: 50px 20px 10px 5px;
   }
</style>

<div>

</div>

</code></pre>
<p><strong>2.半圆</strong></p>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   div{
         width: 100px;
         height: 50px;
         background-color: red;
         border-radius: 50px 50px 0 0 ;
   }
</style>

<div></div>

</code></pre>
<h3 id="盒子阴影">盒子阴影</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   div{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         /*box-shadow 盒子阴影 x偏移量 y偏移量阴影半径阴影颜色*/
         box-shadow: 10px 10px 100px yellow;
   }
</style>

<div></div>

</code></pre>
<h3 id="display块元素与行内元素的转换">display(块元素与行内元素的转换)</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   /*
   div本为块元素使用 display: inline;后为行内元素
   span本为行内元素使用 display: block;后为块元素
   inline-block既为行内元素也为块元素
   none使该元素消失
   */
   div{
         width: 100px;
         height: 100px;
         border: 1px solid red;
         display: inline;
   }
   span{
         width: 100px;
         height: 100px;
         border: 1px solid red;
         display: none;
   }
</style>

<div>div块元素</div>
<span>span行内元素</span>

</code></pre>
<h3 id="float浮动">float(浮动)</h3>
<pre><code class="language-html">

<meta charset="UTF-8">
<title>Title</title>
<style>
   div{
         margin: 10px;
         padding: 5px;
   }
   #father{
         border: 1px solid red;
   }
   .layer1{
         border: 1px dashed blue;
         display: inline-block;
         float: left;
   }
   .layer2{
         border: 1px dashed #e17113;
         display: inline-block;
         float: left;
   }
   .layer3{
         border: 1px dashed #40c40d;
         display: inline-block;
         float: left;
   }
   .layer4{
         border: 1px dashed #86fc07;
         font-size: 16px;
         line-height: 20px;
         display: inline-block;
   }
</style>

<div id="father">
<div class="layer1"><img src="images/1.png" alt=""></div>
<div class="layer2"><img src="images/2.png" alt=""></div>
<div class="layer3"><img src="images/3.png" alt=""></div>
<div class="layer4">
   浮动的盒子可以向左浮，也可以向右浮
</div>

</div>

</code></pre>
<h3 id="解决父级元素塌陷问题">解决父级元素塌陷问题</h3>
<p>父级元素塌陷问题即子元素浮动起来后超出父级元素阔起来的范围<br>
<strong>方案一：</strong><br>
增加父级元素高度<br>
<strong>方案二：</strong><br>
在最底下增加一个空的div，然后给该div增加属性</p>
<pre><code class="language-html"><div class="clear"></div>
</code></pre>
<pre><code class="language-css">.clear{
   clear: both;
   margin: 0;
   padding: 0;
}
</code></pre>
<p><strong>方案三：</strong><br>
在父级元素增加overflow: hidden;属性</p>
<pre><code class="language-css">#father{
border: 1px solid red;
overflow: hidden;
}
</code></pre>
<p><strong>方案四：</strong><br>
父类添加一个伪类</p>
<pre><code class="language-css">#father:after{
   content: '';
   display: block;
   clear: both;
}
</code></pre>
<p><strong>具体代码</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   div{
         margin: 10px;
         padding: 5px;
   }
   #father{
         border: 1px solid red;
         /*overflow: hidden;*/
   }
   #father:after{
         content: '';
         display: block;
         clear: both;
   }
   .layer1{
         border: 1px dashed blue;
         display: inline-block;
         float: left;
   }
   .layer2{
         border: 1px dashed #e17113;
         display: inline-block;
         float: left;
   }
   .layer3{
         border: 1px dashed #40c40d;
         display: inline-block;
         float: right;
   }
   /*
   clear: right;右侧不允许有浮动元素
   clear: left;左侧不允许有浮动元素
   clear: both;两侧不允许有浮动元素
   */
   .layer4{
         border: 1px dashed #86fc07;
         font-size: 16px;
         line-height: 20px;
         display: inline-block;
         float: right;
   }
   /*.clear{*/
   /* clear: both;*/
   /* margin: 0;*/
   /* padding: 0;*/
   /*}*/
</style>
</head>
<body>
<div id="father">
<div class="layer1"><img src="images/1.png" alt=""></div>
<div class="layer2"><img src="images/2.png" alt=""></div>
<div class="layer3"><img src="images/3.png" alt=""></div>
<div class="layer4">
   浮动的盒子可以向左浮，也可以向右浮
</div>

</div>
</body>
</html>
</code></pre>
<h3 id="相对位置">相对位置</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
body{
   padding: 10px;
}
div{
   margin: 10px;
   padding: 5px;
   font-size: 15px;
   line-height: 25px;
}
#father{
   border: 1px solid red;
}
#first{
   background-color: blue;
   border: 1px dashed blue;
   position: relative; /*相对定位*/
   top: 20px;/*相对于自己的顶上加二十*/
   left: 20px; /*相对于自己的左边加二十*/
}
#second{
   background-color: #e8a323;
   border: 1px dashed #e8a323;
}
#third{
   background-color: #17de32;
   border: 1px dashed #17de32;
   position: relative;
   bottom: 20px;/*相对于自己的底部加二十*/
   right: 20px; /*相对于自己的右部加二十*/
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
</code></pre>
<h3 id="方块摆放">方块摆放</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   #father{
         width: 300px;
         height: 300px;
         padding: 10px;
         border: 1px solid red;
   }
   a{
         width: 100px;
         height: 100px;
         background-color: #d7cc43;
         line-height: 100px;
         text-decoration: none;
         text-align: center;
         display: block;
   }
   a:hover{
         background-color: blue;
   }

   #i2{
         position: relative;
         bottom: 100px;
         left: 200px;
   }
   #i3{
         position: relative;
         bottom: 100px;
         left: 100px;
   }
   #i4{
         position: relative;
         bottom: 100px;
   }
   #i5{
         position: relative;
         bottom: 200px;
         left: 200px;
   }

</style>
</head>
<body>
<div id="father">
   <a id="i1" href="#">链接1</a>
   <a id="i2" href="#">链接2</a>
   <a id="i3" href="#">链接3</a>
   <a id="i4" href="#">链接4</a>
   <a id="i5" href="#">链接5</a>
</div>
</body>
</html>
</code></pre>
<h3 id="绝对定位">绝对定位</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   div{
         margin: 10px;
         padding: 5px;
         font-size: 15px;
         line-height: 25px;
   }
   #father{
         border: 1px solid red;
   }
   #first{
         background-color: blue;
         border: 1px dashed blue;
   }
   /*绝对定位：
   1.没有父级元素定位的前提下，相对于浏览器定位
   2.假设父级元素存在定位，经常会相对于父级元素进行偏移
   3.在父级元素范围内移动
   相对于父级元素或者浏览器，进行指定位置的移动，不会继续存在于原来的位置
   */
   #second{
         background-color: #e8a323;
         border: 1px dashed #e8a323;
         position: absolute;
         right: 30px;/*相对于浏览器的右边30个像素*/
   }
   #third{
         background-color: #17de32;
         border: 1px dashed #17de32;
   }
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
</code></pre>
<h3 id="固定位置">固定位置</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   body{
         height: 1000px;
   }
   div:nth-of-type(1){/*绝对定位：相对于浏览器*/
         width: 100px;
         height: 100px;
         background: red;
         position: absolute;
         right: 100px;
         bottom: 0;
   }
   div:nth-of-type(2){/*fixed：固定定位，在浏览器中定死，不再改变位置*/
         width: 50px;
         height: 50px;
         background: yellow;
         position: fixed;
         right: 0;
         bottom: 0;
   }
   div:nth-of-type(3){/*fixed：固定定位，在浏览器中定死，不再改变位置*/
         width: 50px;
         height: 50px;
         position: fixed;
         right: 0;
         bottom: 60px;
   }
   div a{
         display: block;
         height: 50px;
         width: 50px;
         background-color: #00e5e1;
         text-decoration: none;
         line-height: 50px;
         text-align: center;
   }
</style>
</head>
<body>
<a name="top"></a>
<div>div1</div>
<div>div2</div>

<div>
   <a href="#top">顶部</a>
</div>
</body>
</html>
</code></pre>
<h3 id="z-index">z-index</h3>
<p><strong>html文件</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
   <ul>
         <li><img src="images/1.png" alt=""></li>
         <li class="tipText">学习使人长寿</li>
         <li class="tipBg"></li>
         <li>时间：2088-02-23</li>
         <li>地点：冥王星</li>
   </ul>
</div>
</body>
</html>
</code></pre>
<p><strong>CSS文件</strong></p>
<pre><code class="language-css">#content{
width: 199px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border:1px solid red;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
ul{
position: relative;
}
.tipText,.tipBg{
width: 199px;
height: 25px;
position: absolute;
top: 154px;
}
.tipBg{
background: #000;
opacity: 0.5; /*设置背景透明度*/
}
.tipText{
color: #f9fcf9;

/*z-index: 1;设置层级，使得字体可以在背景的上层显示最低为0 不设上限*/
}
</code></pre><br><br>
来源：https://www.cnblogs.com/douluo/p/15594441.html

頁: [1]

琼殿技术论坛's Archiver

css学习