前端css-end

最新推荐文章于 2023-03-10 10:59:15 发布

电竞杰森斯坦森

最新推荐文章于 2023-03-10 10:59:15 发布

阅读量299

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wg14747421417/article/details/106131043

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

昨日内容回顾

分组与嵌套

# 多个选择器可以并列公用一套css样式
div,p,span {}
# 不同选择器之间也可以混合使用
.c1,#d1>span {}

伪类选择器

a:link {}
a:hover {}  # 需要记忆
a:active {}
a:visited {}
input:focus {}  # input框获取焦点

伪元素选择器

p:first-letter {}  # 通过css加文本内容 但是无法选中
p:before {}
p:after {}
# ps:before和after多用于清除浮动带来的负面影响

选择器优先级

"""
选择器相同 就近原则

行内 > id > class > 标签
精确度越高说话越硬
"""
ps:!important强制让标签采用你的样式 不推荐使用

宽和高

width
height
# 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度  但是可以通过css设置
# 行内标签宽度和高度都是有内部文本决定的  行内标签是无法设置长宽的 无效

字体属性

# 字体样式 草书 行书 ...
font-family
# 字体大小
font-size
# 字重
font-weight
# 文本颜色
	1 直接写颜色英文
  2 写颜色编号 #4e4e4e
  3 写颜色的三基色 rgb(128,128,128)  # 范围0-255
  4 可以给颜色加透明度 rgba(128,128,128,0.5)  # 范围0-1
 	ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色

文字属性

# 文字对齐
text-align
		center
# 文字装饰 记忆  主要就是用来给a标签去掉自带的下划线
text-decoration
		none
# 首行缩进
text-indent: 2em

背景属性

# 背景色
backgroud-color
# 背景图片
background:#fff url() no-repeat center center
"""
ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
"""
ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中
  
# 背景图片实际应用的案例

边框

# 任何一个标签都有上下左右四个方向的边框
border-width
border-style
border-color
简写
border

# 画圆
border-radius:50%

display属性

# 能够让标签具有自身没有的属性和特征
display
	none  隐藏 并且原来的位置也没了
  inline
  block
  inline-block
ps:visibility:hidden只隐藏 位置还在

css盒子模型

# 1 外边距(标签与标签之间的距离)			 margin
# 2 边框													border
# 3 内边距/内填充									 padding
# 4 内容												  content

"""
body标签默认自带8px的margin

margin:
	10 上下左右
	10 20 上下 左右
	10 20 30 上 左右 下
	10 20 30 40 上 右 下 左
padding:
	10 上下左右
	10 20 上下 左右
	10 20 30 上 左右 下
	10 20 30 40 上 右 下 左
"""

浮动float

"""
只要是前期页面布局 一般都是用浮动来设计页面
能够让标签脱离正常的文档流漂浮到空中(距离用户更近)

浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大
"""

今日内容

解决浮动带来的影响
溢出属性
定位
验证浮动和定位是否脱离文档流
z-index模态框
透明度opacity
简单博客园首页搭建
JavaScript编程语言开头

今日内容详细

解决浮动带来的影响

# 浮动带来的影响
会造成父标签塌陷的问题

"""
解决浮动带来的影响 推导步骤
	1.自己加一个div设置高度
	2.利用clear属性
		#d4 {
            clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
        }
  3.通用的解决浮动带来的影响方法
  	在写html页面之前 先提前写好处理浮动带来的影响的 css代码
  	.clearfix:after {
            content: '';
            display: block;
            clear:both;
        }
    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""

溢出属性

p {
            height: 100px;
            width: 50px;
            border: 3px solid red;
            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
            /*overflow: hidden;  !*溢出部分直接隐藏*!*/
            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
            /*overflow: auto;*/
        }
        

    <style>
        body {
            margin: 0;
            background-color: #4e4e4e;
        }
        #d1 {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            margin: 0 auto;
            overflow: hidden;
        }
        #d1>img {
            /*max-width: 100%;*/
            /*width: 100%;*/
            /*占标签100%比例*/
        }
    </style>
</head>
<body>
<div id="d1">
    <img src="111.jpg" alt="">
</div>

定位

静态

所有的标签默认都是静态的static，无法改变位置
相对定位(了解)

相对于标签原来的位置做移动relative
绝对定位(常用)

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)absolute

eg:小米网站购物车

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
固定定位(常用)

相对于浏览器窗口固定在某个位置fixed

eg:右侧小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

**ps:**浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
	1.相对定位
# 脱离文档流
	1.浮动
  2.绝对定位
  3.固定定位
  
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

z-index模态框

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)  最远的
  2.黑色的透明区(z=99)  		中间层
  3.白色的注册区域(z=100)  离用户最近

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

透明度opacity

# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色 
而opacity可以修改颜色和字体

opacity: 0.5;

作业书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客首页</title>
    <link rel="stylesheet" href="myblog.css">
</head>
<body>
<div class="blog_left">
    <div class="blog_avatar">
        <img src="111.jpg" alt="">
    </div>
    <div class="blog_title">
        <p>靓仔的博客</p>
    </div>
    <div class="blog_info">a
        <p>装备差进什么本都是血赚</p>
    </div>
    <div class="blog_link">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公众号</a></li>
        </ul>
    </div>
    <div class="blog_tag">
        <ul>
            <li><a href="">#Python</a></li>
            <li><a href="">#Java</a></li>
            <li><a href="">#Golang</a></li>
        </ul>
    </div>
</div>
<div class="blog_right">
    <div class="article">
        <div class="article_title">
            <span class="title">赐我个女朋友吧</span>
            <span class="date">2020-05-14</span>
        </div>
        <div class="article_body">
            <p>赐我一个可盐可甜的女朋友把</p>
        </div>
        <div class="article_bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
    <div class="article">
        <div class="article_title">
            <span class="title">赐我个女朋友吧</span>
            <span class="date">2020-05-14</span>
        </div>
        <div class="article_body">
            <p>赐我一个可盐可甜的女朋友把</p>
        </div>
        <div class="article_bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
    <div class="article">
        <div class="article_title">
            <span class="title">赐我个女朋友吧</span>
            <span class="date">2020-05-14</span>
        </div>
        <div class="article_body">
            <p>赐我一个可盐可甜的女朋友把</p>
        </div>
        <div class="article_bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
    <div class="article">
        <div class="article_title">
            <span class="title">赐我个女朋友吧</span>
            <span class="date">2020-05-14</span>
        </div>
        <div class="article_body">
            <p>赐我一个可盐可甜的女朋友把</p>
        </div>
        <div class="article_bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
    <div class="article">
        <div class="article_title">
            <span class="title">赐我个女朋友吧</span>
            <span class="date">2020-05-14</span>
        </div>
        <div class="article_body">
            <p>赐我一个可盐可甜的女朋友把</p>
        </div>
        <div class="article_bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
    <div class="article">
        <div class="article_title">
            <span class="title">赐我个女朋友吧</span>
            <span class="date">2020-05-14</span>
        </div>
        <div class="article_body">
            <p>赐我一个可盐可甜的女朋友把</p>
        </div>
        <div class="article_bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
</div>
</body>
</html>

++++++

/*通用样式*/
body {
    margin: 0;
    background_color: #eeeeee;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}
/*左侧样式*/
.blog_left {
    position: fixed;
    height: 100%;
    width: 20%;
    background-color: #4e4e4e;
    float: left;
}
.blog_avatar {
    height: 150px;
    width: 150px;
    border: 2px solid white;
    border-radius: 50%;
    margin: 15px auto;
    overflow: hidden;
}
.blog_avatar img {
    width: 100%;
}
.blog_title,.blog_info {
    color: darkgray;
    font-size: 18px;
    text-align: center;
}
.blog_link,.blog_tag {
    font-size: 24px;
    text-align: center;
}
.blog_link a,.blog_tag a{
    color:darkgray;
}
.blog_link a:hover,.blog_tag a:hover{
    color: white;
}
.blog_link ul,.blog_tag ul {
    margin-top: 40px;
}

/*右侧样式*/
.blog_right {
    float: right;
    width: 80%;
    height: 1000px;
}
.article {
    background-color: white;
    margin: 10px 20px 20px 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5)
}
.article_title {
    border-left: 8px solid red;
    text-indent: 1em;
}
.title {
    font-size: 30px
}
.date {
    font-size: 18;
    float: right;
    font-weight: bolder;
    margin: 20px 20px;
}
.article_body {
    font-size: 18px;
    text-indent: 1em;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}
.article_bottom {
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 10px;
}

"""
当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
"""

博客园页面搭建

作业

今日作业
必做题
1.整理今日内容至博客
2.博客园首页搭建(独立完成)

电竞杰森斯坦森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端css-end

昨日内容回顾分组与嵌套# 多个选择器可以并列公用一套css样式div,p,span {}# 不同选择器之间也可以混合使用.c1,#d1>span {}伪类选择器a:link {}a:hover {} # 需要记忆a:active {}a:visited {}input:focus {} # input框获取焦点伪元素选择器p:first-letter {} # 通过css加文本内容但是无法选中p:before {}p:after {}# ps:b
复制链接

扫一扫