HTML+CSS学习第四周

pe11223

已于 2022-11-18 19:59:29 修改

阅读量517

点赞数

文章标签： css 学习 html

于 2022-11-18 19:06:50 首次发布

本文链接：https://blog.csdn.net/pe11223/article/details/127871285

版权

3.45：position定位

relative相对定位
1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
4.left、top、right、bottom是相对于当前元素自身进行偏移的
下面我们进行演示
首先我们先创建三个块并给定宽高设置不同颜色
这边直接放图了

那么我们如何让蓝色方块向右向下移动100px呢，如果我们使用margin进行偏移呢，我们使用margin-left和margin-top进行偏移，效果如下

我们可以看到使用margin进行偏移会影响下面的方块（我们当然可以对绿色方块使用margin-top：-100px进行偏移但是太麻烦了）所以我们不使用这个方法。
下面我们使用relative进行偏移
这里只放变动代码

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

这里box2即为蓝色方块，我们使用relative并使用left和top进行偏移，下面为运行结果。

我们可以看到这里蓝色方块成功改变位置并且没有影响绿色方块位置。

absolute绝对定位
1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块特性）
3.使块元素默认宽度根据内容决定（让块具备内联特性）
4.如果有定位祖先元素相对于定位祖先发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
下面我们新建两个块元素，使第一个块元素为100100大小的方块，使第二个块元素为200200大小的方块。如图

下面我们对第一个方块使用absolute定位
看看效果

 #box1{width: 100px;height: 100px;background-color: red;position: absolute;}

这就说明了absolute可使元素完全脱离文档流
下面我们新建一个span并对span设置宽高和背景色
但是这些设置没有效果，span是内联元素所以上述操作对其没有影响
代码及效果
下面我们加上绝对定位看看效果，这里就不放代码了

这里就说明了absolute可以使内联元素支持宽高（让内联具备块特性）
下面我们做一个嵌套结构
让父容器为300300线框为1的黑色实线，margin200px
子容器为100100的块

下面我们对子元素使用absolute 并给left和top为0
我们看看效果

我们可以看到其脱离了父容器，以整个文档为参照
如果我们让其父元素也加上relative呢

我们可以看到这里红色方块基于其父元素进行定位的。其实他的父元素同样可使用absolute和fix定位，效果是相同的。

fixed固定定位
1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块特性）
3.使块元素默认宽根据内容决定（让块具备内联特性）
4.相对于整个浏览器窗口进行偏移，不受浏览器滚动条影响
下面我们新建一个块并给网页设置2000px高度，给div加上fix定位我们看看效果

我们发现我们拖动滚动条不会影响字的位置，这里可以调整他的位置，加上left和top之类的属即可，这里不过多展示。
下面我们使用之前absolute里的代码
给box2中的位置调整为fixed我们看看效果

我们看到这里红色方块还是到了页面左上角

sticky黏性定位
在指定位置，进行黏性操作
下面我们新建六个p标签给内容aaaa再写div标签给内容这是div再写6个p标签给内容bbb

下面我们给页面高度2000px并给div背景色为红

正常情况下我们拖动字会随着拖动走
下面我们对代码改动

div{background-color: red;position: sticky;top: 0;}

下面我们再来看看效果

当我们把块拖到顶部时他就会固定不动了
如果我们top赋值100呢？那当然就是在距上部100px位置停住。
z-index定位层级
默认层级为0
嵌套时候的层级问题
下面我们新建两个块
并在style下写入如下

#box1{height: 100px;width: 100px;background-color: red;position: absolute;}
#box2{height: 100px;width: 100px;background-color: blue;position: absolute;left: 50px;top: 50px;}

我们看看效果

我们看到这里蓝色盖住了红色，小下面我们在红色里添加z-index并给1我们看看效果

我们发现这里是红色盖住了蓝色，这样我们也可以使蓝色的z-index值为-1实现同样效果

3.46：定位实现下拉菜单

这边之做个演示
下面直接放代码

<!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">
   <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-color: aliceblue;display: none;}
       #menu:hover ul{display: block;}
       #menu ul li:hover{background-color: gray;}
       p{text-align: center;}
   </style>
   <title>Document</title>
</head>
<body>
   <div id="menu">
       卖家中心
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
   </div>
   <p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
</body>
</html>

下面我们看看效果

这样我们就实现了下拉菜单栏

3.47:定位实现居中

我们如何使用定位方式使得子容器在父容器中居中呢？
下面我们新建一个嵌套

下面我们对box2改动

#box2{height: 100px;width: 100px;background: red;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}

效果如下

3.48：CSS添加省略号

width
必须有一个固定的宽
white-space:nowrap
不让内容折行
overflow:hidden
隐藏溢出的内容
text-overflow:ellipsis
添加省略号
下面我们举个例子
代码如下

<!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">
    <style>
        #content{width: 200px;border: 1px black solid;white-space: nowrap;}
    </style>
    <title>Document</title>
</head>
<body>
    <div id="content">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</div>
</body>
</html>

看看初步效果
效果1
在这里我们实现了文字在一行输出，下面我们对溢出的内容进行隐藏并添加省略号。这里展示变动部分

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

我们来看看效果

3.49：CSS精灵及好处

CSS Script
特性：CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中加载。
好处
减少图片质量，网页图片加载速度快，减少图片请求次数，加快网页的打开。

网页实战1
企业网站设计
主体部分

<!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>
    <link rel="stylesheet" href="./index.css">
    <style>
        #banner{position: relative;}
        #banner .banner_list{width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%;background: center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;z-index: 1;}
        #banner .banner_list li.active{opacity: 1;z-index: 10;}
        #banner .banner_list a{display: block;width: 100%;height: 100%;}
        #banner .banner_btn{width: 100%;position:absolute;bottom: 19px;font-size: 0;text-align: center;z-index: 20;}
        #banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
        #banner .banner_btn li.active{background: white;}
        #service{overflow: hidden;min-height: 407px;}
        #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/mail1.png) ;}
        #service .service_list li:nth-of-type(3) div{background-image:url(./images/graphic1.png) ;}
        #service .service_list li:nth-of-type(4) div{background-image:url(./images/e-bussiness1.png) ;}
        #service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 23px;}
        #service .service_list p{font-size: 14px;color: #6d6d6d; line-height: 22px;}

        #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;background: #66c5b4;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;font-size: 14px;color: white;margin-top: 36px;}
        #case .case_btn a{display: block;width: 100%;height: 100%;}

        #news{min-height: 450px;overflow: hidden;}
        #news .area_title{margin-top: 65px;}
        #news dl{margin-top: 48px ;}
        #news dt{float: left;width: 234px;}
        #news dd{width: 846px;}
        #news .news_list{width: 100%;}
        #news .news_list li{width: 50%;float: left;}
        #news .news_date{width: 71px;height: 70px;border-right: 1px solid #dcdcdc;}
        #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;color: #3f3f3f;}
        #news .news_text h3 a{color: #3f3f3f;}
        #news .news_text p{color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;}
    </style>
</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_menu r">
            <li>
               <a href="#">HOME</a> 
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOLIO</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" class="contaner-fluid">
        <ul class="banner_list">
            <li  class="active"  style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_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 SERVICE</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="container-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/20141121095216750.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/20141121095528549.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/20141121105856226.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/xs1.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>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>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>09</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></a>
            </div>
        </div>
    </di>
</body>
</html>

下面是CSS部分

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #646464;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial, Helvetica, sans-serif;}

.l{float: left;}
.r{float: right;}
.clear::after{content: "";display: block;clear: both;}
.container{width: 1080px;margin: auto;position: relative;}
.container-fluid{width: 100%;}

#head{height: 81px;}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 58px;}

#foot{background: #66c5b4;}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
#foot div{margin: 0 10px;}
#foot div a{color: white;}

.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 7px;font-weight: normal;}
.area_title p{color: #9f9f9f; font-size: 14px;line-height: 34px;}

网页效果
在这里插入图片描述