css、day2美化网页，文字以及常用的语句、超链接、盒子、浮动、定位

1.美化网页

1.1为什么要美化

有效传递信息
吸引用户
凸显网页的主题
提高用户的体验

1.2字体背景文本样式

 /*
                font-family:楷体;字体样式
                float: left;表示在左边
                color: black;黑色的字体
                background: aqua;背景颜色
                text-align: center;文本左右居中（上下没有居中）
                border-radius: 5px;圆角
                height: 50px;背景的高度
                font-weight: bold;字体的粗细
                width: 50px;背景的宽度
                text-decoration: none;下划线失效，这样子链接的下划线就会消失
                text-decoration: underline;下划线
                text-decoration: overline;上划线
                text-decoration: line-through;中划线
                font:bold 20px/50px Arial;分别是字体的粗细，文本的高度 还有字体风格（只要文本高度和背景高度一致就可以上下居中）
                line-height: 50px;(这个也是调节文本高度的，和上面的有相同的用处)

                text-shadow:blue 10px 10px  10px;阴影颜色 x y 半径
                list-style:none;去掉列表前面的元或者数字，如果是circle就是空心圆，decimal就是数字 square就是正方形
                
                background：red url("") 270px 10px no-repeat;背景是红色，然后是背景的位置，背景的排列方式也可以分开写
                background-image: url("");但是是默认一张图不停复制铺满整个背景
                background-repeat:repeat-x;按x轴平铺
                background-repeat:repeat-y;
                background-repeat:no-repeat;只有一张图
                background-position:160px 20px;x轴y轴多少像素

                opacity:0.5;透明度
        */

1.3文本样式

h1{
    /*color:#000000 ;*/
    /*总共六位，每两位分别代表red green blue#000000就是黑色 #ffffff就是白色*/
    /*color: rgb(0,255,255);*/
    /*    也可以是rgb（）里面分别调参数，这就是调色*/
/*    */
    color: rgba(1,255,255,0.5);
/*    rgba四位分别代表rgb和透明度，透明度是0-1*/
    text-indent: 20em;
/*    缩进两个字节*/

}


//此程序中有一幅图和一句话，要让图片和文本对齐
<style>
 img,span{
     vertical-align:middle;
 }
</style>

<p>
 <img src="" alt="" title="">
 <span>这是一句话</span>
</p>

1.4超链接伪类（主要是四个状态，点击前，放在上面，点击时，点击以后）

a{
    /*默认的状态*/
    font-family: 楷体;
    text-decoration: none;
}

a:hover{
  /*  鼠标悬浮的状态*/
  color: aqua;
    font-size: 500px;
}

a:active{
    /*鼠标按住未释放的状态*/
    color:dodgerblue;
}
a:visited{
    /*点完之后的状态*/
    color: black;
}

1.5渐变

Grabient这是一个背景颜色的网站，可以在这里找到很多的渐变色背景

<style>
    body{
        
        background-image: linear-gradient(270deg, #00DBDE 0%, #FC00FF 100%);
    }
</style>

首先打开https://www.grabient.com/
然后调渐变角度，选择自己喜欢的图片作为背景
复制到想要的块中（想要的区域或者选择器）

1.6模仿京东的一小块

首先是无序列表，然后是摆放图片的小箭头到右边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿造京东一小部分</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="kuai">
    <h1>众诚精密</h1>
    <ul id="jingdong">
        <li><p><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a></p></li>
        <li><p><a href="">电脑</a>/<a href="">办公</a></p></li>
        <li><p><a href="">家居</a>/<a href="">家装</a>/<a href="">厨具</a>/<a href="">家具</a></p></li>
        <li><p><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a></p></li>
        <li><p><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a></p></li>

    </ul>
</div>




</body>
</html>

.kuai{
    /*显示边框好认一点*/
    /*border: 1px solid black ;*/
    height: 255px;
    width: 342px;
    padding: 0;
    margin: 0;
}

body h1{
    /*margin: 0px;*/
    /*height: 46px;*/
    /*width: 342px;*/
    text-indent: 1em;
    background-color: #ecdede;
    background-image: url("images/right.png");
    background-position: 316px 13px;
    background-repeat: no-repeat;
    background-size:15px 15px;
    /*    调整背景大小*/
}
ul{
    background-color: azure;
    margin:0;
}

/*使列表开头的那一个点消失*/
ul li{
    /*height: 16px;*/
    /*line-height: 16px;*/
    list-style: none;
    background-image: url("images/right.png");
    background-position: 316px 13px;
    background-repeat: no-repeat;
    background-size:50px 50px;
    /*    调整背景大小*/
}

/*下划线消失*/
a{
    text-decoration: none;
    color: #000000;
}

a:hover{
    color: deeppink ;
}

字放上去以后变为红色，但是众诚精密和下面之间的空白，我将padding和margin都设为了0也没有解决。最后将div整个块设置为一个颜色，解决了，但是这种方法似乎不太正规

ps：找到了问题所在我在每一个《li》中都加了< p >它也会产生一个外边距，从而使上下有空白，一个方法是把p删了，另一个是将p的上面的外边距设置为0

2.盒子模型

一般来说，一个盒子用div包起来，里面的文字都用span包起来，只是为了层次更加清楚

2.1什么是盒子

右键审查元素可以在computed中看见

外边距：margin（body这些都会有一个默认的外边距，我们要初始化margin为0）
padding：内边距
border：边框

2.2边框

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

border:1px solid red; solid是实线，dashed是虚线

2.3外边距

padding:0 0 0 0;分别代表上右下左的边距顺时针 auto是自动对齐

2.4圆角边框

一共有四个角
div{
    width:100px;
    height:100px
    border:10px solid red;
    border-radius:50px 50px 50px 50px;分别是左上角然后顺时针
    
    
}

3.一些现成的html网站

源码之家
element（一些组件）

4.浮动

标准
- 自上而下，比如手机
拼接
- 就是一行可以有好几个方块
块级元素
- 独占一行（h1 p div）
行内元素
- 不（span a img strong）
行内元素可以在块级元素内，反之则不可以

4.1块

这也是实现行内元素排列的方式，但是很多都使用float

display:block;将其变为块元素
display:inline-block;是块元素，但是内联在一行
display:inline;行内元素
display:none;消失

导航栏变为一行就是将列表变为inline-block

4.2float

float:right;往右浮动，调整页面大小，会重新排版，这是浮动的问题

4.3因为float产生的父级文档塌陷的问题

clear：right;右侧不浮动
clear：left;
clear：both;两侧都不允许
clear：none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div>
    <ul>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">商家</a></li>
        <li><a href="#">加我</a></li>
    </ul>
</div>

<div class="float" id="father">
    <img src="images/right.png" alt="" class="pic1">
    <img src="images/down.png" alt="" class="pic2">
</div>


</body>
</html>

div li{
    list-style: none;
    display: inline-block;
    width: 100px;
}
li a{
    text-decoration: none;
}

.float {
    border:5px black dashed;
    margin: 0;

}

.pic1{
        float: right;
}

.pic2{
    float: right;
}

解决方法1：将父级边框的长宽变大，这样浮动视觉效果上还是在之内的
方法2：在块中加一个clear

<div class="float">
    <img src="images/right.png" alt="" class="pic1">
    <img src="images/down.png" alt="" class="pic2">
    <div style="clear: both"></div>
</div>

方法3：在父级元素中增加一个overflow：hidden；
方法4：父类中添加一个伪类

#father:after{
    content:'';
    display:block;
    clear:both;
}

听得狂神说，但是没有听懂

查找了资料
1. 首先，要明白在标准文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素浮动之后，子元素会完全脱离文档流，无法撑开父盒子，导致父盒子没有高度
2. 使用after伪对象清楚浮动（推荐）
  
  在说这种方法以前先解释几个东西的作用
  1. :after 选择器在被选元素的内容后面插入内容。使用content属性来指定要插入的内容
  2. 这种清除浮动的方法大概思想是在父元素的空内容后添加了一个空内容，并对这个空的内容清除浮动
因为只要子类有东西，就能撑起父的高度，所以只要在后面加一个空元素，根据排版，她会自动在两个浮动元素的下面，可是又不允许周围浮动，所以，子类就会撑起父类的高度（个人理解）

5.定位

5.1 默认位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0;
        }
        #first{
            border: 1px dashed #e8c40e;
            background: aliceblue;
        }
        #second{
            border: 1px dashed #82fafa;
        }
        #third{
            border: 1px dashed #d52121;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>

</body>
</html>

5.2相对定位

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

position:relative;相对定位
top：-20px；相对原来向上走20px
bottom：；
left；

5.3绝对定位

position:absolute;
right 0;
和相对定位相比，原来的位置就消失了

两种情况
- 没有父级元素定位的前提下，相对于浏览器定位，这里就是相对于右边框是0px
- 假设父级元素存在定位的前提下，相对于父级元素定位
  - 在父级元素范围内定位，定位不会超出父级元素

5.4固定定位

position:fixed;导航栏不动就是用这个实现

5.5z-index

图层的概念，z-index：1；就是第一层

![(C:\Users\lvye\AppData\Roaming\Typora\typora-user-images\image-20220406155652919.png)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="father">
        <img src="images/right.png" alt="">
        <ul>
            <li class="first">作者</li>
            <li class="second"></li>
            <li>价格</li>
            <li>简介</li>
        </ul>
    </div>



</body>
</html>

div{
    width: 300px;
    overflow: hidden;
    margin: 0;
    border: 0;
    position: relative;
    border: black 1px solid;
}

ul,li{
    margin: 0;
    padding: 0;
}

ul li{
    margin: 0;
    font-family: 楷体;
    list-style: none;
}
.second{
    width: 300px;
    height: 15px;
    
    z-index:1;
}
.first{
    color: azure;
    z-index:0;
}
.first,.second{
    position: absolute;
    top: 166px;
}

6.相对定位与浮动简单应用

方块放上去以后变为粉红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    a{
      margin: 1px;
      background: blue;
      display: block;
      width: 100px;
      height: 100px;
      border:1px  solid black;
    }

    a:hover {
      background: deeppink;
    }
    /*div{*/
    /*  margin: 1px;*/
    /*  padding: 5px;*/
    /*  font-size: 12px;*/
    /*  line-height: 25px;*/
    /*}*/
    #father{
      border: 1px solid black;
      padding: 0;
      width: 312px;
      height: 312px;
    }
    #first{
      /*border: 1px dashed #e8c40e;*/
      /*background: aliceblue;*/
      /*width: 100px;*/
      /*height: 100px;*/
      line-height: 100px;
      text-align: center;
      float: right;
    }
    #second{
      /*border: 1px dashed #e8c40e;*/
      /*background: aliceblue;*/
      /*width: 100px;*/
      /*height: 100px;*/
      line-height: 100px;
      text-align: center;

    }

    #third{
      /*border: 1px dashed #e8c40e;*/
      /*background: aliceblue;*/
      /*width: 100px;*/
      /*height: 100px;*/
      line-height: 100px;
      text-align: center;
      position: relative;
      left: 104px;
    }

    #four{
      /*border: 1px dashed #e8c40e;*/
      /*background: aliceblue;*/
      /*width: 100px;*/
      /*height: 100px;*/
      line-height: 100px;
      text-align: center;
      float: right;
    }

    #five{
      /*border: 1px dashed #e8c40e;*/
      /*background: aliceblue;*/
      /*width: 100px;*/
      /*height: 100px;*/
      line-height: 100px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="father">
  <a href="" id="first">第二个盒子</a>
  <a href="" id="second">第一个盒子</a>
  <a href="" id="third">第三个盒子</a>
  <a href="" id="four">第五个盒子</a>
  <a href="" id="five">第四个盒子</a>


</div>

</body>
</html>

7.动画

网站 canvas
html简单教程

posted @ 2022-04-06 17:29 newlive122 阅读(105) 评论(0) 收藏举报

刷新页面返回顶部

raoxin