Web前端入门知识（第四周）

最新推荐文章于 2024-05-06 22:16:50 发布

wll555

最新推荐文章于 2024-05-06 22:16:50 发布

阅读量351

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/wll555/article/details/127907424

版权

本文介绍了Web前端的基础知识，包括CSS定位（static, relative, absolute, fixed, sticky）及其层级（z-index）的概念，如何添加省略号，CSS精灵（sprite）的原理与优势，创建CSS圆角的方法，以及PC端企业类型页面的布局设计（通栏与版心）。还提供了两个练习案例：博文尚美首页和QQ飞车页面的HTML与CSS实现。" 104919026,8033008,C语言实现：找出数组中最高成绩及其位置,"['C语言', '数据结构', '算法', '编程基础']

摘要由CSDN通过智能技术生成

文章目录

1.css定位

position：

static（默认）
relative（相对定位）：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于元素自身进行偏移的
absolute（绝对定位）：
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相当于整个文本流进行偏移（绝对、相对、固定）
fixed（固定定位）：
使元素完全脱离文本流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky（粘性定位）
在指定的位置，进行粘性操作

z-index定位层级：
默认层级为0
嵌套时候的层级问题

2.CSS添加省略号

必须有一个固定的宽（width）
不让内容折行（white-space：nowrap）
隐藏溢出的内容（overflow：hidden）
添加省略号（text-overflow：ellipsis）

3.CSS sprite

特性：
是一种网页图片应用处理方式。它允许将一个页面设计到的所有零星图片包含到一张的图中去加载。
好处：
可以减少图片的质量，网页的图片加载速度快；可以减少图片的请求次数，加速网页的打开

4.CSS圆角

给标签添加圆角
border-radius：10px、20px、30px、40px（上、右、下、左）
border-radius：10px（四个角）
border-radius：50%（容器的50%）

5.PC端企业类型整页制作

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

6.练习

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 o 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;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 .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: 49px;}
        #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>
        <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="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 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>
        <