Web前端开发---第四周

已于 2022-11-18 20:45:06 修改
阅读量205 收藏
点赞数
文章标签： 前端 css css3
于 2022-11-17 21:16:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73696461/article/details/127815023
版权

接上一部分：

  • fixed：
    使元素完全脱离文档流
    使内联元素支持宽高（让内联具备块特性）
    使块元素默认宽根据内容决定（让块具备内联的特性）
    相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
    sticky：
    在指定的位置，进行粘性操作
  • 居中
    利用定位和margin进行居中

CSS添加省略号

  1. width：必须有一个固定的宽
  2. white-space：nowrap：不让内容折行
  3. over-flow：hidden：隐藏溢出的内容
  4. text-overflow：ellipsis：添加省略号
<style>
        div{
            width:100px;
            border: 1px black solid;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
    
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

显示情况：
在这里插入图片描述

CSS精灵

主要将多个图片放在一个图中进行加载，减少递交次数，增快加载速度。

CSS圆角设置

  • boder-radius：可以使用px和百分号%
boder-radius：10px 20px //前者表示的是左上角，右下角的圆角值

半圆演示：

box{
	width:300px
	height:0px
	background-color:red
	boder-redius:150px 150px 0 0
	}

在这里插入图片描述
全圆演示：

#box{
	width:300px;
	height:300px;
	background-color:red;
	border-radius:50%(150px);
	}

在这里插入图片描述

椭圆角

#box{
	width:300px;
	height:300px;
	background-color:red;
	border-radius:50px/40px;
	}

在这里插入图片描述

PC端布局

  • 通栏：自适应浏览器的宽度
  • 版心：固定一个宽度，并让容器居中
    实际操作：
    在这里插入图片描述

在这里插入图片描述

css：

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

.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_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 58px;}

index：

<!DOCTYPE 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;background:center 0 no-repeat;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%;background:center 0 no-repeat;position:absolute;left: 0;top: 0;opacity: 1;z-index: 1;}
        #banner .banner_list li .active{opacity: 1;z-index: 10;}
        #banner .banner_list li 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: 107px;}
        .service_list{text-align: center;margin-top: 34px;}
        .service_list li{float: left;width: 250px;margin:0 10px;}
        .service_list div{width: 102px;height: 102px;margin: 0 auto;}
        .service_list li:nth-of-type(1) div{background-image: url(./img/web1.png);}
        .service_list li:nth-of-type(2) div{background-image: url(./img/mail1.png);}
        .service_list li:nth-of-type(3) div{background-image: url(./img/graphic1.png);}
        .service_list li:nth-of-type(4) div{background-image: url(./img/e-bussiness1.png);}
        .service_list h3{font-size: 18px;color: #434343;line-height: 36px;}
        .service_list p{font: size 14px;color: #6d6d6d ;line-height: 22px;}
    </style>
</head>
<body>
    <div id="head" class="container ">
        <div class="head_logo l">
            <a href="#">
                <img src="./img/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(./img/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./img/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./img/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./img/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 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>
                文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
        </li>
        <li>
            <div></div>
            <h3>3.E-BUSINESS PLAN</h3>
            <p>
                文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
        </li>
        <li>
            <div></div>
            <h3>4.MALBOXAGENTS</h3>
            <p>
                文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
        </li>
    </ul>
    </div>
</body>
</html>

box-sizing:border-box告诉浏览器width包含了padding和borde

つ微凉徒眸挚半
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值