Web前端第四周

54 阅读 0 评论 36 点赞

我是靠谱客的博主傻傻冬天，最近开发中收集的这篇文章主要介绍Web前端第四周，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Web前端第三周

- 二、CSS基础语法
- - 23.CSS定位
  - 24.CSS添加省略号
  - 25.CSS圆角
- 三、PC端
- - 1.布局

二、CSS基础语法

23.CSS定位

position

（1）static（默认)
（2）relative
（3）absolute
（4）fixed
（5）sticky

（2）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: burlywood;}
        #box2{width: 100px;height: 100px;background: darkcyan;position: relative;}
        #box3{width: 100px;height: 100px;background: navy;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

在这里插入图片描述
后：

<style>
    #box1{width: 100px;height: 100px;background: burlywood;}
    #box2{width: 100px;height: 100px;background: darkcyan;position: relative;left: 100px;top: 100px;}
    #box3{width: 100px;height: 100px;background: navy;}
</style>

在这里插入图片描述

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

<!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: burlywood;}
        #box2{width: 200px;height: 200px;background: darkcyan;}    
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

在这里插入图片描述
后：

<style>
    #box1{width: 100px;height: 100px;background: burlywood;position: absolute;}
    #box2{width: 200px;height: 200px;background: darkcyan;}    
</style>

在这里插入图片描述
②前：

<!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>
        span{width: 100px;height: 100px;background: darkolivegreen;}
    </style>
</head>
<body>
    <span>氨基酸钠钾碘钙锌</span>
</body>
</html>

在这里插入图片描述
后：

<style>
    span{width: 100px;height: 100px;background: darkolivegreen;position: absolute;}
</style>

在这里插入图片描述
③前：

后：

（4）fixed固定定位：
①使元素完全脱离文档流
②使内联元素支持宽高（让内联元素具备块特性）
③使块元素默认宽根据内容决定（让块具备内联的特性）
④相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
（5）sticky黏性定位
在指定的位置，进行黏性操作。
前：

<!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>
        body{height: 2000px;}
        div{background: rosybrown;}
    </style>
</head>
<body>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <div>这是一个块</div>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
</body>
</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>Document</title>
    <style>
        body{height: 2000px;}
        div{background: rosybrown;position: sticky;top: 0;}
    </style>
</head>
<body>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <p>llllll</p>
    <div>这是一个块</div>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
    <p>wwwwwww</p>
</body>
</html>

在这里插入图片描述
z-index定位层级：默认层级为0；嵌套时候的层级问题。

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

在这里插入图片描述
③

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

在这里插入图片描述
④

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

在这里插入图片描述

25.CSS圆角

未添加前：

<!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>
        #box{width: 200px;height: 200px;background: darkolivegreen;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

在这里插入图片描述
添加后：（数字表示圆弧弧度，即数字越大，弧度越大）
100px时，为⚪

<style>
    #box{width: 200px;height: 200px;background: darkolivegreen;border-radius:5px ;}
</style>

在这里插入图片描述

三、PC端

1.布局

通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器适中

作业：

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>Document</title>
    <link rel="stylesheet" href="./CSS/common.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;le 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;z-index: 20;font-size: 0;text-align: center;}
        #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: 25px;}
        #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;margin-top: 36px;}
        #case .case_btn a{display: block;width: 100%;height: 100%;color: white;}

        #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;}
    </style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
            </a> 
        </div>
        <div>
            <ul class="head_meun 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>
    <div id="banner" class="container-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="contain-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>THE 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>
            </div>
        </div>
    </div>
</body>
</html>

*{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;}

.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%;}

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

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

.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;}

在这里插入图片描述

最后

以上就是傻傻冬天为你收集整理的Web前端第四周的全部内容，希望文章能够帮你解决Web前端第四周所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：54 次浏览
发布日期：2023-09-02 06:20:26
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_10_fw_13__23__6_x.html

Web前端第四周

概述

Web前端第三周

二、CSS基础语法

23.CSS定位

24.CSS添加省略号

25.CSS圆角

三、PC端

1.布局

最后

评论列表共有 0 条评论

发表评论取消回复

Web前端 第四周

概述

Web前端 第三周

二、CSS基础语法

23.CSS定位

24.CSS添加省略号

25.CSS圆角

三、PC端

1.布局

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

Web前端第四周

Web前端第三周

发表评论取消回复