css第四周

最新推荐文章于 2024-10-30 16:06:51 发布

yy9264924

最新推荐文章于 2024-10-30 16:06:51 发布

阅读量247

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/yy9264924/article/details/127860527

版权

1、float浮动

文档流
文档流是文档中可显示对象在排列时所占用的位置。
float特性
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
float取值
left right none(默认)
float注意点
1、只会影响后面的元素。
2、内容默认提升半层。
3、默认宽根据内容（border）决定。
4、浮动元素放不下了就会换行排列。
5、主要给块元素添加，但也可以给内联元素添加。
加粗样式

利用clear属性清除float浮动
固定宽高: 不推荐,不能把高度固定死,不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范) ,如果有子元素想溢出，那么会受到影响。
display : inline block (BFC规范) ,不推荐,父容器会影响到后面的元素。
设置空标签:不推荐,会多添加一个标签。
after伪类:推荐,是空标签的加强版,目前各大公司的做法。
如何清除浮动?
上下排列: clear属性，表示清除浮动的，left、 right、 both
在这里插入图片描述
嵌套排列:
overflow : hidden (BFC规范) ，如果有子元素想溢出，那么会受到影响。
display ; inline- block (BFC规范)，不推荐，父容器会影响到后面的元素。
after伪类:是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）
在这里插入图片描述

2、position定位

position特性
Css position属性用于指定一个元素在文档中的定位方式。top、right、
bottom、left 属性则决定了该元素的最终位置。
position取值
static (默认) relative absolute fixed sticky,

（1）.relative相对定位

1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
不影响其他元素布局
3.left、top、right、bottom是相对于当前元素自身进行偏移的（right：100px）
在这里插入图片描述

(2）absolute绝对定位

1.使元素完全脱离文档流
2.使内联元素（span）支持宽高( 让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移( 绝对、相对、固定)
在这里插入图片描述

（3）fixed固定定位

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

（4）sticky黏性定位

在指定的位置,进行黏性操作。
滚动条下滑目标在界面内不会消失

body{ height : 2000px;}
div{ background: red; position: sticky; top:0;}

在这里插入图片描述

(3)z-index定位层级

默认层级为0
嵌套时候的层级问题
写法：

 #box1{width: 100px;height: 100px;background: red;position:absolute;z-index:1;}   
#box2{width: 100px;height: 100px;background: blue;position: absolute;top: 50px;left:50px;z-index:2}

3.定位的下拉菜单

<style>
        *{margin: 0;padding:0;}
        ul{list-style: none;}/* 将ul前面的的点去掉 */
        #menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
        #menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background: white;
        display: none;}
        p{text-align: center;}
         #menu:hover ul{display: block;}
         #menu ul li:hover{ background: gray;}
    </style>
</head>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段 </p>

在这里插入图片描述

4、CSS添加省略号

width 必须有一个固定的宽
white- space : nowrap 不让内容折行
overflow : hidden 隐藏溢出的内容
text-overflow : ellipsis 添加省略号
在这里插入图片描述

5、CSS精灵（CSS Sprite）及好处

特性
CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

6、CSS圆角

border-radius
给标签添加圆角。
练习:设置半圆效果
100px;}
50%;}
20px 100px 1;} 左上右下右上左下
20px 100px 100px 100px;} 左上右上右下左上
10px / 100px ;}椭圆相切

 /* #box{width:200px;height: 200px;background: red;border-radius: 100px;} */
    /* #box{width:200px;height: 200px;background: red;border-radius: 50%;} */
    /* #box{width:200px;height: 200px;background: red;border-radius: 20px 100px 1;} 左上右下   右上左下*/
    /* #box{width:200px;height: 200px;background: red;border-radius: 20px 100px 100px 100px;} 左上 右上 右下 左上*/
     /* #box{width:200px;height: 200px;background: red;border-radius :10px / 100px ;}椭圆相切  */
     #box{width:200px;height: 100px;background: red;border-radius :100px 100px 0 0  ;}
    </style>

在这里插入图片描述

7、pc端的布局

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

博文尚美

<!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="./style/style.css">
    <title>博文尚美</title>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <img src="./image/logo.png"  alt="博文尚美" title="博文尚美LOGO">
        </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(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/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="./image/gk.png" alt></a>
                </li>
                <li>
                    <a href="#"><img src="./image/gk.png" alt></a>
                </li>
                <li>
                    <a href="#"><img src="./image/gk.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="./image/news.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>

<!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="./style/common.css">
    <title>QQ飞车官网首页</title>
</head>
<body>
    <div id="head" class="container-fluid">
        <div class="container">
            <div class="head_logo l">
                <a href="#">腾讯游戏</a>
            </div>
            <div class="head_ad l">
                <a href="#">
                    <img src="./image/ad.jpg" alt="">
                </a>
            </div>
            <div class="head_menu r">
                <div class="head_menu_pt l">
                    <a href="#">成长守护平台</a>
                </div>
                <div class="head_menu_top l">
                    <a class="l" href="#">腾讯游戏排行榜</a>
                    <i calss="l" ></i>
                </div>
 
            </div>
        </div>
    </div>
    <div id="main" class="container-fluid">
        <div id="nav" class="container-fluid">
            <div class="container">
                <div class="nav_logo">
                    <a href="#">
                        <img src="./image/inside_logo.png" alt="QQ飞车" title="QQ飞车">
                    </a>
                </div>
                <dl class="nav_index">
                    <dt>
                        <a href="#">首页</a>
                    </dt>
                </dl>
                <dl class="nav_zl">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a class="hot" href="#">官方漫画</a></dd>
                    <dd><a class="new" href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_ss">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a href="#">官方漫画</a></dd>
                    <dd><a href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_hd">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a href="#">官方漫画</a></dd>
                    <dd><a href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_sc">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a href="#">官方漫画</a></dd>
                    <dd><a href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_sp">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a href="#">官方漫画</a></dd>
                    <dd><a href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_wj">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a href="#">官方漫画</a></dd>
                    <dd><a href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_kf">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a href="#">官方漫画</a></dd>
                    <dd><a href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
            </div>
        </div>
        <div id="link" class="container">
            <a href="#"></a>
        </div>
        <div id="banner" class="container">
            <div class="banner_left l">
                <div class="banner_download">
                    <p>下载游戏</p>
                    <p>DOWNLOAD</p>
                </div>
                <div class="banner_user">
                    <div>
                        <img src="./image/56x56.jpg" alt="">
                    </div>
                    
                    <p>欢迎<a href="#">登录</a>，进入飞车世界</p>
                </div>
            </div>
            <div class="banner_center l">
                <div class="banner_list">
                    <ul class="banner_list_ul">
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a>
                        </li>
                    </ul>
                    <div class="banner_bottomline">
                        <ul class="banner_bottomline_ul" >
                            
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="banner_bottomline_lbtn"></div>
                        <div class="banner_bottomline_rbtn"></div>
                    </div>
                    
                    <i class="banner_list_lt"></i>
                    <i class="banner_list_lb"></i>
                    <i class="banner_list_rt"></i>
                    <i class="banner_list_rb"></i>
                </div>
            </div>
            <div class="banner_right l">
                <a href="#"><img src="./image/8217e53532b00c2caa1035a3e4cca8aa.jpeg" alt=""></a>
                <i class="banner_right_lt"></i>
                <i class="banner_right_lb"></i>
                <i class="banner_right_rt"></i>
                <i class="banner_right_rb"></i>
            </div>
        </div>
     </div>
</body>
</html>