前端学习第四周

最新推荐文章于 2024-07-11 17:37:13 发布

浪漫季

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量452

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/lishunyu1226/article/details/127889123

版权

前端学习第四周）

一.CSS定位
二.CSS添加省略号
三.CSS精灵及其好处
四.CSS圆角
5.PC端的企业类型整页制作
- 1.pc端的布局
6.博文尚美首页
7.小米商城顶部导航

一.CSS定位

1.position特性：

position（位置）特性：
css position属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置。
position取值：
static（默认）
relative(相对定位)
absolute(绝对)
fixed（固定）
sticky（黏性定位）

2.relative相对定位

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left ，top，right，bottom是相对于当前元素自身进行偏移的

  <style>
        #box1{width: 100px;height: 100px;background: red;}
        #box2{width: 100px;height: 100px;background: blue;position: relative;left: 100px;top: 100px;}
        #box3{width: 100px;height: 100px;background: yellow;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

输出结果为蓝色向右下偏移100px

3.absolute绝对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有的相对于整个文档发生偏移（在当前可视下，不受滚动条影响）

 <style>
        #box1{width: 300px;height: 300px;border: black solid;margin: 200px;position: relative;}/* 这里的定位可以为绝对，相对，固定定位 */
        #box2{width: 100px;height: 100px;background: blue;position: absolute;left: 20px;top: 20px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

在box1中若为固定，相对，绝对定位则此父元素为祖先元素
box2蓝色方框相对于祖先元素的左上角偏移20px

3.fixed固定定位

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

4.黏性定位

在指定的位置，进行黏性操作。

<style>
        body{height: 2000px;}
        div{background: red;position: sticky;top: 100px;}
    </style>
 </head>
 <body>
    <p>aaaaa</p>
    <p>aaaaa</p>
    <p>aaaaa</p>
    <p>aaaaa</p>
    <p>aaaaa</p>
    <div>这是一个块</div>
    <p>bbbbb</p>
    <p>bbbbb</p>
    <p>bbbbb</p>
    <p>bbbbb</p>
    <p>bbbbb</p>
 </body>

向下移动滚动条时使div移动到距离顶端100px时会固定，不随p移动。

5.z-index层级定位

两个标签定位后有层叠的部分，可以用此标签进行分级。

层级越高则上面就是哪个标签

<style>
        #parent{width: 100px;height: 100px;border:1px black solid;position: absolute;}
        #box1{width: 100px;height: 100px;background: red;position: absolute;z-index: 0;}
        #box2{width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px;z-index: -1;}
    </style>
 </head>
 <body>
    <div id="parent">
    	<div id="box1"></div>
    </div>
    <div id="box2"></div>
 </body>

该例子中box1的层级高则红色重叠部分显示在蓝色上部
若该嵌套结构中parent标签也添加z-index则box2要与parent比较层级，不与box1中的层级比较。

定位实现元素居中

<style>
        #box1{width: 300px;height: 300px;border: 1px black solid;position: relative;}
        #box2{width: 100px;height: 100px;background: red;position: absolute;left: 50%;top:50%;margin: -50px 0 0 -50px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

二.CSS添加省略号

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

<style>
        #content{width:200px; border: black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    </style>
 </head>
 <body>
    <div id="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
 </body>

三.CSS精灵及其好处

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

四.CSS圆角

border-radius
给标签添加圆角

    <style>
    #box{width: 300px;height: 300px;background: red;border-radius: 150px;}
    </style>
 </head>
 <body>
    <div id="box"></div>
 </body>

只写一个值：150px（四个角）
只写两个值：150px 100px（分别为左上右下，右上左下）
写四个值：10px，20px，30px，40px（分别代表左上，右上，右下，左下）

也可用%替代px值

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

1.pc端的布局

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

6.博文尚美首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/common.css">
    <title>博文尚美</title>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <img src="./images/logo.png"  alt="博文尚美" title="博文尚美"> 
        </div>
        <ul class="head_menu r">
                <li>
                    <a herf="#">HOME</a>
                </li>
                <li>
                    <a herf="#">ABOUT</a>
                </li>
                <li>
                    <a herf="#">PROTFOLIO</a>
                </li>
                <li>
                    <a herf="#">SERVICE</a>
                </li>
                <li>
                    <a herf="#">NEWS</a>
                </li>
                <li>
                    <a herf="#">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 SERVICE</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>2.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.WEB DESIGN</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 innocative site</p>
            </div>
            <ul  class="case_list clear">
                <li>
                    <a href="#"><img src="./images/chenbo02.png" alt></a>
                </li>
                <li>
                    <a href="#"><img src="./images/chenbo02.png" alt></a>
                </li>
                <li>
                    <a href="#"><img src="./images/chenbo02.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>TEN LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/chenbo03.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="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...</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 2019 Bowenshangmei Culyure 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_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{ float: left;margin-left: 58px; }
#foot{background-color: #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: 61px; text-align: center;}
.area_title h2{font-size: 20px;line-height: 20px;height: 20px;color: #363636;font-weight: normal}
.area_title p{font-size: 14px;line-height: 34px;color: #9f9f9f;}

7.小米商城顶部导航

<!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>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD,小米电视官方网站</title>
    <style>
    .box{width:1900px;height:50px;background-color: rgb(51,51,51);float: right;}
    .header{width: 100%;height: 40px;line-height: 40px;color: #b0b0b0;font-size: 12px;background-color: #333;}
    .wrap{width: 1226px;margin: 0 auto;}
    .header li, .header-left{float: left;}
    .header-right{float: right;}
    .header a{color: #b0b0b0;}
    .shopcart{position: relative;width: 120px;height: 40px;background-color: #424242;margin-left: 25px; cursor: pointer;transition: all .2s;}
    </style>
</head>
<body>
</div>
    <div class="header">
        <div class="wrap">
            <ul class="header-left">
                <li><a href="https://www.mi.com/">小米官网</a><span>|</span></li>
                <li><a href="">小米商城</a><span>|</span></li>
                <li><a href="">MIUI</a><span>|</span></li>
                <li><a href="">IoT</a><span>|</span></li>
                <li><a href="">云服务</a><span>|</span></li>
                <li><a href="">天星数科</a><span>|</span></li>
                <li><a href="">有品</a><span>|</span></li>
                <li><a href="">小爱开放平台</a><span>|</span></li>
                <li><a href="">企业团购</a><span>|</span></li>
                <li><a href="">资质证照</a><span>|</span></li>
                <li><a href="">协议规则</a><span>|</span></li>
                <li>
                    <a href="">下载app</a><span>|</span>
                    <div class="download">
                        <a href="#">
                            <img src="./xiaomilogo.png" alt="" width="90" height="90">
                            <p>小米商城app</p>
                        </a>
                    </div>
                    <div class="triangle"></div>
                </li>
                <li><a href="">智能生活</a><span>|</span></li>
                <li><a href="">Select Location</a><span>|</span></li>
            </ul>
            <ul class="header-right">
                <li><a href="">登录 <span>|</span></a></li>
                <li><a href="">注册 <span>|</span></a></li>
                <li><a href="">消息通知</a></li>
                <li class="shopcart">
                    <a href=""><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> 购物车(0)</a>
                </li>
            </ul>
        </div>
        <div class="box1">小米官网</div>
            <h2>
                <div class="box2"><img src="小米商城\images\xiaomilogo.png" alt="小米官网"></a></div>
                <div class="box3">Xiaomi手机</div>
                <div class="box4">Redmi手机</div>
                <div class="box5">电视</div>
                <div class="box6">笔记本</div>
                <div class="box7">平板</div>
                <div class="box8" >家电</div>
                <div class="box9">路由器</div>
                <div class="box10">服务中心</div>
                <div class="box11">社区</div>
                    <h3 id="xxx"><input type="text" placeholder="请输入所需商品"></h3>
            </h2>
    </div>