第四次学习Web的总结

Smulll_

已于 2023-01-05 13:22:31 修改

阅读量164

点赞数

分类专栏： HTML&CSS 文章标签：前端学习 css

于 2022-11-19 18:17:48 首次发布

本文链接：https://blog.csdn.net/weixin_74155781/article/details/127923263

版权

HTML&CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第四次学习Web的总结

一、position属性
二、其他的一些css特性
三、博文尚美网页制作

一、position属性

1.1、什么是position

css position 属性用于指定一个元素在文档中的定位方式。top、right、bottom、left、属性则决定了该元素的最终位置。

可选值：
1. static（默认）
 2. relative
 3. absolute
 4. fixed
 5. sticky

1.2、relative：相对定位

如果不设置定位偏移量（left , top , right , bottom），则对其本身没有影响。
不会使元素脱离文档流。
不会影响其他元素的布局。
left，top，bottom，right是相对于元素自身进行偏移的。

left：-100px 等价于 left：100px

1.3、absolute：绝对定位

会使元素脱离文档流。
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（使块具备内联的特性）
如果祖先元素有定位，则相对于祖先元素进行偏移；如果祖先元素没有定位，则相对于整个页面进行偏移（绝对，相对，固定）。

1.4、fixed：固定定位

会使元素脱离文档流。
使内联元素支持宽高（让内联具备块的特性）。
使块元素默认宽根据内容决定。（让块具备内联的特性）。
相对整个浏览器窗口进行偏移，不受浏览器滚动条的影响。

1.5、sticky：粘性定位

到达指定位置时，该内容会随滚动条下滑而往下滑

注：

需要加入值才能发生作用，例如：top:0,即为粘在顶部距离为0的地方

1.6、Z-index定位层级

默认层级为0

两个都有位置定义的块，Z-index定位层级越高，则其在另一个块上面。
一个块嵌套在父容器里，与另一个块作比较：
- 如果父容器有定位层级，则不论子块再高也是拿父容器与另一个块作比较。
- 如果父容器没有定位层级，则是子块与另一个块作比较。

二、其他的一些css特性

2.1、css添加省略号

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

2.2、css sprite

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

2.3、css圆角（使块的四周变圆）

border-radius:

表示方法：

直接写像素（代表半径）
写百分比，以块的宽长为准
分别写两个值，前者表示左上，右下；后者是右上，左下。
写四个值，表示顺序为左上，右上，右下，左下。

三、博文尚美网页制作

3.1、CSS部分

/* 清除默认样式 */
* {margin: 0;padding: 0;}
ul,ol {list-style: none;}
image {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;position: relative;margin: 0 auto;}
.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;}

/* 主体容器 */
.area_title {margin-top: 60px;text-align: center;}
/* 主体标题 */
.area_title h2 {height: 20px;line-height: 14px;font-size: 20px;color: #363636;background: url(../images/title_bg.png) no-repeat center 2px;font-weight: normal;}
/* 主题副标题 */
.area_title p {color: #9f9f9f;font-size: 14px;line-height: 10px;}

3.2、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;opacity: 0;z-index: 1;left: 0;top: 0;}
    /* 选中的图片 */
    #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 white solid;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 :nth-of-type(1) div {background: url(./练习所需图片文件/images/web1.png);}
        #service .service_list :nth-of-type(2) div {background: url(./练习所需图片文件/images/graphic1.png);}
        #service .service_list :nth-of-type(3) div {background: url(./练习所需图片文件/images/e-bussiness1.png);}
        #service .service_list :nth-of-type(4) div {background: 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;}
                  /* 用户案例 */
        #case{background: #f8f8f8;}
        #case .container{min-height: 460px;overflow: hidden;}
        /* 标题 */
        #case .area_title{margin-top: 55px;}
        #case .srea_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;}
        #case .case_btn a{display: block;height: 100%;width: 100%;color: white;margin-top: 36px;}
         /* 最新资讯 */
         #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{background:#66c5b4;}
        #foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
        #foot div a{color: white;margin: 0 10px;}
</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="#">PROTFOLTO</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 herf="#"></a>
            </li>
            <li style="background-image: url(./练习所需图片文件/images/banner.png);">
                <a herf="#"></a>
            </li>
            <li style="background-image: url(./练习所需图片文件/images/banner.png);">
                <a herf="#"></a>
            </li>
            <li style="background-image: url(./练习所需图片文件/images/banner.png);">
                <a herf="#"></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>
        </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>08</i>
                        <span>Jan</span>
                    </div>
                    <div class="news_text l">
                        <h3><a href="#">flash网站制作的优缺点</a></h3>
                        <p>虽然HTML5程序语言出现,大有逐渐代替Flash网站制作的意味,但是过于生硬的HTML5动画效果,始终..</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>