只因小黑子的HTML入土过程第四章

小黑子史蒂夫

已于 2023-01-03 09:49:47 修改

阅读量187

点赞数

分类专栏：前端文章标签： html css css3

于 2022-11-19 13:01:47 首次发布

本文链接：https://blog.csdn.net/VanWot/article/details/127855246

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

小黑子的HTML入土过程第四章

HTML+CSS系列教程第四章

HTML+CSS系列教程第四章

4.1 relative相对定位

在这里插入图片描述

position :
     static（默认)
     relative
     absolute
     fixed
     sticky
relative:作用
    如果没有定位偏移量，对元素本身没有任何影响
    不使元素脱离文档流
    不影响其他元素布局
    left、top、right、bottom是相对于当前元素自身进行偏移的

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width:100px;height: 100px;background: red;}
        #box2{width:100px;height: 100px;background: blue;margin-left: 100px;margin-top: 100px;}
        #box3{width:100px;height: 100px;background: yellow;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

—>但是这样做有缺陷，下面的块会随上一个的块而top移动
在这里插入图片描述
—>改进

#box2{width:100px;height: 100px;background: blue;
position: relative;left: 100px;top: 100px;}

这样就可以让一个块动而不影响其他的块
在这里插入图片描述

4.2 absolute绝对定位

absolute:
    （1）使元素完全脱离文档流
    （2）使内联元素支持宽高(让内联具备块特性
    （3）使块元素默认宽根据内容决定（让块具备内联的特性)
   （4）如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位
祖先元素相对于整个文档发生偏移（绝对、相对、固定)

(1)

    <style>
    #box1{width: 100px;height: 100px;background: red;
    position: absolute;}
    #box2{width: 200px;height: 200px;background: blue;}
    </style>
<body>
    <div id="box1"></div>
    <div id="box2"></div>  
</body>

没加position: absolute;之前时
在这里插入图片描述
加了position: absolute;之后脱离了文档流
—>

(2)

<style>
span{width: 100px;height: 100px;background: red;
position: absolute;}
 </style>
<body>
   <span>
        这是一个内联的
    </span>
</body>

没加position: absolute;之前内联不随内容变化
在这里插入图片描述
加了之后随内容而变化
—>

(3)

<style>
div{background: red;position: absolute;} 
 </style>
<body>
    <div>
        这是一个块
    </div>
</body>

没加position: absolute;之前
在这里插入图片描述
加了之后块有了内联属性，随着内容而变
—>

（4）
1.蓝块绝对偏移到可视角上，不会随滚动条移动而偏移

<style>
#box1{width:300px;height: 300px;border: 3px 
        black solid;margin: 200px;}
#box2{width:100px;height: 100px;background: blue;
position: absolute;left: 0;bottom: 0;}
       
 </style>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div></div>
</body>

—>
在这里插入图片描述
2.relative与absolute组合出现，块围绕着嵌套的祖先元素进行相对偏移

<style>
#box1{width:300px;height: 300px;border: 3px 
        black solid;margin: 200px;position: relative;}
#box2{width:100px;height: 100px;background: blue;
position: absolute;left: 0;bottom: 0;}
       
 </style>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div></div>
</body>

—>
在这里插入图片描述

4.3 fixed和sticky及zIndex

fixed固定定位

fixed:
     使元素完全脱离文档流
     使内联元素支持宽高(让内联具备块特性)
     使块元素默认宽根据内容决定（让块具备内联的特性)
与absoulte的区别：
     该固定定位相对于整个浏览器窗口进行偏移，不受浏览器
滚动条的影响

范例：

<style>
 body{height: 2000px;}
   div{width: 100px;height: 100px; background: red; 
   position: fixed;bottom: 0;right: 0;}
 </style>
<body>
 <div>
        这是一个弹窗
    </div>
</body>

—>
在这里插入图片描述

sticky黏性定位

在指定的位置，进行黏性操作。

范例：

<style>
  body{height: 2000px;}
   div{background: red;position: sticky;top: 50px;}
 </style>
<body>
   <p>aaaaaa</p>
    <p>aaaaaa</p>   
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <div>
        这是一个块
    </div>
    <p>bbbbbbb</p>
    <p>bbbbbbb</p>
    <p>bbbbbbb</p>
    <p>bbbbbbb</p>
    <p>bbbbbbb</p>
    <p>bbbbbbb</p>
</body>

由
在这里插入图片描述
—>随滚动条滑动，块依旧与窗口保持相对位置

z-index定位层级

默认层级为0
嵌套时候的层级问题

<style>
   #box1{width: 100px;height: 100px;background: red;
   position: absolute;z-index: 1;}
   #box2{width: 100px;height: 100px;background: blue;
   position: absolute;left: 50px;top: 50px; z-index: 0;}
 </style>
<body>
 <div id="box1"></div>
  <div id="box2"></div>
</body>

由于蓝块是后写故蓝块优先级高
在这里插入图片描述
但加了z-index可用条件优先级
—>

4.4 定位实现下拉菜单

范例：

<style>
   *{margin:0;padding: 0;}
   ul{ list-style: none;}  
   #menu{width: 100px;height: 30px;margin: 20px auto;
   border: 1px black solid;position: relative;}
   #menu ul{width: 100px;border: 1px black solid;
   position: absolute;left: -1px;top: 30px;background: 
   white;display: none;} //display: none作用于开始时
                           隐藏下列表，不占空间
   p{text-align: center;}  //将p标签移动到中心文本对齐
   #menu:hover ul{display: block;}   //作用于鼠标移到块时
                                       显示下列表
   #menu ul li:hover{background: gray;} //作用于列表项指
                                            到时呈现灰色
 </style>
<body>
 <div id="menu">
      卖家中心
      <ul>
        <li>列表项1</li>
        <li>列表项1</li>
        <li>列表项1</li>
        <li>列表项1</li>
        <li>列表项1</li>
      </ul>
  </div>
  <p>测试段落测试段落测试段落测试段落测试段落</p>
</body>

—>
在这里插入图片描述
当鼠标画到卖家中心时
—>

4.5 定位实现居中

<style>
#box1{width: 300px;height: 300px;border: 2px black 
solid;position: relative;} 
#box2{width: 100px;height: 100px;background: red; 
position: absolute;left: 50%;top: 50%;margin: 
-50px 0 0 -50px;}   //left:50%指的是块左边的对齐到中间
                    //top:50%指的是块左上角到中间
                    //margin: -50px 0 0 -50px;根据上面
                    left和top由四个值上由下左实现居中     
 </style>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

—>
在这里插入图片描述

4.6 css添加省略号

在这里插入图片描述
1.设置了宽度文字超过了会折行

    <style>
      #content{width: 200px;border: 1px black solid;}
    </style>
<body>
   <div id="content">
    测试文字测试文字测试文字测试文字测试文字测试文字
   </div>

在这里插入图片描述
2.不让内容折行

    <style>
      #content{width: 200px;border: 1px black solid;white-space:nowra;}
    </style>

在这里插入图片描述
3.隐藏溢出的内容

    <style>
      #content{width: 200px;border: 1px black solid;white-space:nowrap;overflow: hidden;}
    </style>

在这里插入图片描述
4.添加省略号

   <style>
      #content{width: 200px;border: 1px black solid;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
    </style>

在这里插入图片描述

4.7 CSS精灵及好处

在这里插入图片描述
在一个长条的sprite图中根据长，宽高来进行选图

no-repeat是针对背景图片来说的。当你设置了no-repeat这个属性后，你的背景图片将不会被重复，再换一种说法，你在网站上所看到的背景图片就是你所添加的图片，不会出现平铺或者重复的现象。
例如：
在这里插入图片描述

效果：

4.8 CSS圆角设置

在这里插入图片描述
实现圆角修饰
1.相切半径为20px时

<style>
     #box{width: 200px;height: 200px;background: red;
     border-radius: 20px;}
 </style>
</head>
<body>
  <div id="box"></div>
</body>

—>
在这里插入图片描述
2.相切半径为块直径200的1/2时：100px

3.

<style>
     #box{width: 200px;height: 200px;background: red;
     border-radius:  20px（修改左上和右下） 50px（修改右上
     和左下;}
 </style>
</head>
<body>
  <div id="box"></div>
</body>

—>
在这里插入图片描述
4.当border-radius有四个值时
例如：
border-radius：4px（左上） 10px（右上） 20px（右下）30px（左下）
效果：

半圆效果
border-radius: 150px 150px 0 0
—>

5.不规则形状
例：
border-radius: 70px/100px;

4.9 PC端企业类型整页制作–博文尚美练习展示

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文尚美</title>
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <!-- 网页头部部分 -->
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
            </a>
        </div>
        <ul class="head_mean r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOL1O</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div> 
    <!--背景图部分-->
    <div id="banner" >
        <ul class="list"> 
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li class="active" style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li class="active" style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li class="active" style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="btn"> <!--四点切换 -->
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--服务范围部分-->
    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <ul class="service_list">
                <li>
                    <div></div>
                    <h3>1.WEB DESIGN</h3>
                    <p>
                        企业品牌网站设计/手机网页制作
                        <br>
                        动画网站创意设计
                    </p>
                </li>
                <li>
                    <div></div>
                    <h3>2.GRAPHIC DESIGN</h3>
                    <p>
                        标记logo设计/产品宣传设计
                        <br>
                        企业广告/海报设计
                    </p>
                </li>
                <li>
                    <div></div>
                    <h3>3.E-BUSINESS PLAN</h3>
                    <p>
                       淘宝/天猫装修设计及运营推广
                        <br>
                        企业微博、微信营销
                    </p>
                </li>
                <li>
                    <div></div>
                    <h3>4.MAILBOXAGENTS</h3>
                    <p>
                       腾讯/网易企业邮箱品牌代理
                        <br>
                        个性化邮箱定制研发
                    </p>
                </li>
            </ul>
    </div>
    <!-- 客户案例 -->
    <div id="case" class="conntainer-fluid">
        <div class="container">
        <div class="area_title">
            <h2>{客户案例}</h2>
            <p>with the best professional technology,to design the best innovative web site</p>
        </div>
        <ul class="case_list clear "><!--清除浮动对绿块的影响-->
            <li>
                <a href="#"><img src="./images/戴墨镜.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/景.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/蓝网页.png" alt=""></a>
            </li>
        </ul>
            <div class="case_btn">
                <a href="#">VIEW MORE</a>
            </div>
        </div>
    </div>
    <!-- 最新资讯 -->
    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>TEH LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/办公室.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页,更不用说进首页前三了。那么网站优化...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>08</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">flash网站制作的优缺点</a></h3>
                            <p>虽然HTMLS程序语言出现,大有逐渐代替Flash网站,但是过于生硬的HTMLS动画效果,始终...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>07</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">做个网站多少钱？</a></h3>
                            <p>"做个网站多少钱?"很多客户打电话过来直接第—句就抛出来的问题。这好比买辆车多少钱，你是要..</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>06</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3>
                            <p>大部分人都想让自己的网站,—夜出现搜索引擎首页独战鳌头。但是事实告诉我们，罗马不是一...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <!-- 网页底部部分 -->
    <div id="foot" class="container-fluid">
     <div class="container">
        <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
        <div class="r">
            <a href="#">Home</a>|<a href="#"> About</a> |<a href="#"> Portfolio</a> |<a href="#"> contact</a>
        </div>
      </div>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} /*（重置）浏览器默认样式*/

ol,ul,li{
    list-style: none;} /*消除li列表前面的小点点*/

img{
    display: block;
} /* display: block;令内联拥有块属性*/

a{
    text-decoration: none;
    color: #646464;
}  /* text-decoration: none文本不添加任何装饰: none */

h1,h2,h3{
    font-size: 16px;}/*修改字体类型*/

body{
    font-family: Arial;
}

.l{float:left;}
.r{float: right;}

.clear:after{
    content:"";
    display: block;
    clear: both;}

.container{
    width: 1080px;
    margin: 0 auto;
    position: relative;} /* 版心 */

.container-fluid{
    width: 100%;
    height: 100%;}   /*通栏*/

/*头部部分*/
#head{height: 81px;}

#head .head_logo{
    width: 164px;
    height: 44px;
    margin-top: 19px;}

#head .head_mean li{
    float: left; 
    margin-left:58px;}

#head .head_mean{
    font-size: 14px; 
    line-height: 81px;}

            /* banner部分 */
            #banner{
                position: relative;
            }
    
            #banner .list{
                position: relative;
                width: 100%;
                height: 469px;
            }
    
            #banner .list li {
                width: 100%;
                height: 100%;
                background:center 0 no-repeat;
                position: absolute;
                left: 0;
                top: 0;
            }
    
            #banner .list li .active{
                opacity: 1;
                z-index: 10;}
    
                #banner .list li a{
                    display: block;
                    width: 100%;
                    height: 100%;}
            /* 底部圆点部分 */
            #banner .btn{
                width: 100%; 
                position: absolute;
                bottom: 19px;
                text-align: center;
            }  /*底部圆点居中在下，提高优先级*/
    
            #banner .btn li{
                display: inline-block;
                width: 12px;
                height: 12px;
                border: 3px white solid;
                border-radius: 50%;
                margin: 0 6px;
                cursor: pointer;}
            /*令鼠标可点击背景*/
    
            #banner .btn .active{background: white;}
 
         /* service    */
         #service{
            overflow: hidden;
            min-height: 407px;} /*将margin的传递溢出隐藏并设置和上图片的最小高度*/

         #service .service_list{
            text-align:center ;
            margin-top: 34px;}

         #service .service_list li{
            float: left;
            width: 250px;
            margin: 0 10px;}

         #service .service_list div{
            width: 102px;
            height: 102px;
            margin: 0 auto;}

         #service .service_list li:nth-of-type(1) div{
            background-image: url(../images/web1.png);
        }

         #service .service_list li:nth-of-type(2) div{
            background-image: url(../images/graphic1.png);
        }

         #service .service_list li:nth-of-type(3) div{
            background-image: url(../images/e-bussiness1.png);
        }

         #service .service_list li:nth-of-type(4) div{
            background-image: url(../images/mail1.png);
        }

         #service .service_list h3{
            font-size: 18px;
            color: #434343;
            line-height: 36px;
            margin-top: 25px;}

         #service .service_list p{
            font-size: 14px;
            color: #6D6D6D;
            line-height: 22px;}            

.area_title{ 
    margin-top: 60px;
    text-align: center;}

.area_title h2{
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    color: #363636;
    background:url(../images/title_bg.png) no-repeat center;
    font-weight: normal;
} /*调节服务范围和其作用图片*/

.area_title p{
    color: #9F9F9F;
    font-size: 14px;
    list-style: 34px;} /*服务范围下面的文字调节*/
    
 /* case部分 */
 #case{
    background:#f8f8f8 ;}

 #case .container{
    min-height: 460px; overflow: hidden;}

 #case .area_title{
    margin-top: 55px;}

 #case .area_title h2{
   color: #66C5B4; }

 #case .case_list{
    margin-top: 28px;}

 #case .case_list li{
    float: left;
    width: 340px;
    margin: 0 10px;}

 #case .case_btn{
    width: 176px;
    height: 37px;
    margin: 0 auto;
    border-radius: 25px;
    line-height: 37px;
    text-align: center;
    font-size: 14px;
    background: #66C5B4;
    margin-top: 36px;}
    
 #case .case_btn a{
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    border:3px solid #66c5b4;
    border-radius: 40px;
    background-color: #66c5b4;
    cursor: pointer;
}
/* news部分 */
#news{
    min-height: 450px;
    overflow: hidden;}

#news .area_title{margin-top: 65px;}

#news dl{margin-top: 48px;}

#news dt{width:234px;}

#news dd{width:846px;}

#news .news_list{width: 100%; }

#news .news_list li{
    width: 50%;
    float: left;
    margin-bottom: 48px;}

#news .news_date{
    width: 71px;
    height: 70px;
    border-right: 1px solid #DCDCDC;
    text-align: center;}

#news .news_date i{
    color: #66C5B4;
    font-size: 39px;
    display: block;
    font-weight: bold;}

#news .news_date span{
    color: #999999;
    font-size: 20px;
    line-height: 36px;}    

#news .news_text{
    width: 310px;
    margin-left: 20px}

#news .news_text h3{font-size: 14px;}

#news .news_text h3 a{color: #3F3F3F;}

#news .news_text p{
    color: #A4A4A4;
    font-size: 12px;
    line-height: 21px;
    margin-top: 17px;}

/* foot部分 */
#foot{background: #66C5B4;}

#foot .container{
    height: 54px;
    line-height: 54px;
    font-size: 12px;
    color: white;}

#foot a{
    color: white;
    margin: 0 10px;}