css样式

最新推荐文章于 2022-07-03 12:16:44 发布
最新推荐文章于 2022-07-03 12:16:44 发布
阅读量177 收藏
点赞数
分类专栏： 前端 文章标签： css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/domunweb/article/details/89139941
版权

1. css文字超出宽度显示成…

.txt{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
/* 如果没有文字超出隐藏的效果，可以加上min-width:0*/

2. 弹性布局自适应垂直居中

.div{
	display:flex;
	flex-direction:column; // 意义为：弹性盒子中的内容排列方式为纵列排列。
	justify-content:center; // 元素开始的对齐方式 从中间开始对齐。 flex-start | flex-end | center | space-between | space-around;
}

附W3C display弹性布局链接：http://www.runoob.com/w3cnote/flex-grammar.html
3.css渐变色边框


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.demo1 {
width: 200px;
height: 100px;
border: 10px solid;
border-image: -webkit-linear-gradient(left, red, blue) 200 30;
border-image: -o-linear-gradient(right, red, blue) 200 30;
border-image: -moz-linear-gradient(right, red, blue) 200 30;
border-image: linear-gradient( to right,red, blue) 200 30;
}
</style>
<body>
<div class="demo1"></div>

</body>
</html>

效果图：
在这里插入图片描述
4. css四角边框样式

.box{
            width: 300px;
            height: 300px;
            margin: 300px auto;
            border: 2px solid #eeeeee;
            /* 以下为css样式 */
            background:
            linear-gradient(red, red ) left top,
            linear-gradient(blue, blue ) left top,
            /* 以上为左上角 */
            linear-gradient(red, red ) left bottom,
            linear-gradient(yellow, yellow ) left bottom,
            /* 以上为左下角 */
            linear-gradient(red, red ) right top,
            linear-gradient(black, black ) right top,
            /* 以上为右下角 */
            linear-gradient(red, red ) right bottom,
            linear-gradient(green, green ) right bottom;
            /* 以上为右下角 */
            background-repeat: no-repeat;
            background-size: 4px 50px, 50px 4px;
        }

效果图：
在这里插入图片描述
5. 文字的横向距离

p{
	letter-spacing: 0.15em;
}

6. css3媒体查询
引用链接

7. div的高度自适应的与宽度一样

1.使用神奇的伪类：

<!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">
    <title>宽高相等demo</title>

    <style>
        * {
            margin: 0%;
            padding: 0%;
        }

        .box {
            width: 50%;
            height: 200px;
            margin: 200px auto;
            background: red;
        }

        .content1 {
            width: 200px;
            background: greenyellow;
            overflow: hidden;
        }

        .content1::after {
            content: '';
            display: block;
            padding-top: 100%;
            background: blue;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content1">

        </div>
    </div>
</body>
</script>

</html>

效果： 在这里插入图片描述
此种方法不受父级元素的影响，但是缺点在于，宽度是由div .content设置的，高度是div .content的伪类提供的，因此当div .content中 或 div .content::after 中有内容后，div .content 或 div .content::after 会被撑开；
效果图：
在这里插入图片描述
因此要用此类方法，想要在 div .content中添加内容时，需要在给 div .content中加入一个子元素，使用position定位的方法。代码如下：

<!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">
    <title>宽高相等demo</title>

    <style>
        * {
            margin: 0%;
            padding: 0%;
        }

        .box {
            width: 50%;
            height: 200px;
            margin: 200px auto;
            background: red;
        }

        .content1 {
            width: 200px;
            background: greenyellow;
            overflow: hidden;
            position: relative;
        }

        .content1::after {
            content: '';
            display: block;
            padding-top: 100%;
            background: blue;
            overflow: hidden;
        }
        .content1-son{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            background: darkblue;
            color: #fff;
        }
       
    </style>
</head>

<body>
    <div class="box">
        <div class="content1">
            <div class="content1-son">
                这是content1-son 的内容
            </div>
        </div>

    </div>
</body>

</html>

效果图 ：
在这里插入图片描述
2.第二种方法：结合父级元素的宽度。代码如下：

<!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">
    <title>宽高相等demo</title>

    <style>
        * {
            margin: 0%;
            padding: 0%;
        }

        .box {
            width: 50%;
            height: 200px;
            margin: 200px auto;
            background: red;
        }

        .content2{
            width: 20%;
            height: 0;
            padding-bottom: 20%;
            background: darkcyan;
        }
       
    </style>
</head>

<body>
    <div class="box">
       

        <div class="content2">
            wqewqeqw
        </div>

    </div>
</body>

</html>

效果图：
在这里插入图片描述
如图可以看出，给div .content 设置width: 20%时，height: 0px; padding-bottom: 20%;只要padding- bottom与width的值相等，div .content便会坐到宽高相等。且，与父级元素高度无关，只有父级元素的宽度有关。

8. img 图片在div中自适应的水平垂直居中

.imgbox{
	width: 100%;
	height: 140px;
	overflow: hidden;
	position: relative;
}

.imgbox img{
	width: auto !important;
	max-width: 100%;
	max-height: 140px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

主要用到。position定位和margin外边距, img 要添加width: auto；使其宽度自适应。但是也要设置max-width和max-height，防止其超出父级盒子。此方法具有很好的适应性。

9.一个鼠标悬停时的边框样式

html部分

<ul>
        <li>
            <a class="facebook" href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <i class="fa fa-facebook" aria-hidden="true"></i>
            </a>
        </li>
    </ul>

css部分

body {
            margin: 0;
            padding: 0;
            background: #ebebeb;
        }

        ul {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            padding: 0;
            display: flex;
        }

        ul li {
            list-style: none;
        }

        ul li a {
            display: block;
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 40px;
            text-align: center;
            text-decoration: none;
            color: #404040;
            margin: 0 30px;
            transition: .5s;
            padding-top: 50px;
        }

        ul li a span {
            position: absolute;
            transition: transform .5s;
        }

        ul li a span:nth-child(1),
        ul li a span:nth-child(3) {
            width: 100%;
            height: 3px;
            background: #404040;
        }

        ul li a span:nth-child(1) {
            top: 0;
            left: 0;
            transform-origin: right;
        }

        ul li a:hover span:nth-child(1) {
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .5s;
        }

        ul li a span:nth-child(3) {
            bottom: 0;
            left: 0;
            transform-origin: left;
        }

        ul li a:hover span:nth-child(3) {
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .5s;
        }

        ul li a span:nth-child(2),
        ul li a span:nth-child(4) {
            width: 3px;
            height: 100%;
            background: #404040;
        }

        ul li a span:nth-child(2) {
            top: 0;
            left: 0;
            transform: scale(0);
            transform-origin: bottom;
        }

        ul li a:hover span:nth-child(2) {
            transform: scale(1);
            transform-origin: top;
            transition: transform .5s;
        }

        ul li a span:nth-child(4) {
            top: 0;
            right: 0;
            transform: scale(0);
            transform-origin: top;
        }

        ul li a:hover span:nth-child(4) {
            transform: scale(1);
            transform-origin: bottom;
            transition: transform .5s;
        }

        .facebook:hover {
            color: #3b5998;
        }

        .facebook:hover span {
            background: #3b5998;
        }

效果图： 正常情况下
在这里插入图片描述

鼠标悬停时：
在这里插入图片描述

domunweb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10 种常用的CSS框架，收藏一下
Myself's CSDN
07-01 3475
文章目录 1、Bootstrap 2、 Foundation 3. Materialize CSS 4. Semantic UI 5. Bulma 6. UIKit 7. PureCSS 8. Tailwind 9. Ant Design 10.Tachyons css 框架 1、Bootstrap 作为最受欢迎的工具之一，Bootstrap在Web开发人员眼中已成为了业界领先的前端框架。为了使Web开发人员能够构建出不同的用户界面组件，Bootstrap能够将CSS、Javascript和HTML代码
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
12 个强大的现代 CSS 技术
weixin_43044226的博客
07-03 1834
每日分享前端插件干货，欢迎关注！ 现代CSS技术是美化网页设计过程的最佳方式之一。如果你一直在使用CSS，那么肯定遇到过关于布局或跨浏览器兼容性方面的问题。例如，CSS3样式不适用于旧版本的Internet Explorer。 同时，随着网络技术的发展，开发人员也在努力应对其他问题。例如，利用其他库来优化大页面网站的加载时间，或使div标签更具响应性，而无需过多依赖Bootstrap。随着时代的进步和挑战的增加，CSS也在不断发展。 本次高级CSS教程将讨论12个现代CSS技术用于克服CSS带来...
css 布局 头部底部绝对定位不动 让内容超出滚动
weixin_34129145的博客
02-08 2488
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
CSS样式
cn_luan的博客
12-20 2526
一、CSS 样式 1、内部样式表（内嵌样式表） 是写到html页面内部，是将所有css代码抽出，单独放到一个<style>标签中 <style> div { color:red; font-size:12px; } </style> style标签理论上可以放在html文档任何地方，但一般会放文档的head标签中 这种方式可以方便控制当前这个页面中的元素样式设置 代码结构清晰，但没有实现结构与样式完全分离 使用内部样式表设定css，通常也被称为嵌入式引入
css 样式面板,关于 CSS 样式面板
weixin_42363501的博客
08-03 3483
使用“CSS 样式”面板可以跟踪影响当前所选页面元素的 CSS 规则和属性(“当前”模式)，也可以跟踪文档可用的所有规则和属性(“所有”模式)。使用面板顶部的切换按钮可以在两种模式之间切换。使用“CSS 样式”面板还可以在“所有”和“当前”模式下修改 CSS 属性。有关“当前”模式和“所有”模式下“CSS 样式”面板的信息，请参阅下面两部分。当前模式下的 CSS 样式面板在“当前”模式下，“CSS...
CSS样式规则
Liyunhao_haoge的博客
10-03 6859
CSS样式规则 使用HTML时，需要遵从一定的规范。CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：选择器 {属性:属性值;属性:属性值;}如：h1 {color:red; font-size:20px;} 在上面的规则中: 1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2、属性和属性值以“键值对”的形式出现。 3...
CSS 样式书写规范,css样式书写规范
weixin_42535703的博客
08-04 4848
在工作当中css样式是非常重要的，但是咋样书写css样式更重要。一、css书写规范1、定位属性：position display float left top right bottom overflow clear z-index2、自身属性：width height padding border margin background3、文字样式：font-fami...
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - CSDN博客.html"是王...
DW在html中插入css样式方法
09-24
Dreamweaver（DW）是一款常用的网页设计工具，它提供了方便的CSS样式插入功能，帮助设计师高效地管理网页样式。下面我们将详细介绍如何在HTML中使用DW插入CSS样式。 首先，我们需要创建一个新的CSS文件。启动...
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
网页中应用CSS样式的多种形式总结
09-22
本文将详细探讨CSS样式的四种主要应用形式：内联样式、内部样式、外部样式以及导入外部样式表。 1. **内联样式**： 内联样式是最直接的方式，它将CSS代码直接放置在HTML元素的`style`属性中。这种做法适用于快速为...
Django套用现成模板，导入css，js，images等文件
UncleGen的博客
03-14 1万+
环境 windows10 pycharm2017.3.3 professional edition(必须专业版) python3.6.4 django2.0.2 参考资料 http://blog.csdn.net/qq_21182587/article/details/69936510 找了很多资料，就这个最全，使用最方便，感谢作者 方法 创建项目 参考Django...
javascript 如何添加cookie实现自动登陆
weixin_33725515的博客
11-15 201
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
CSS样式重置代码
09-25
主要介绍了CSS样式重置代码，一般保存为reset.css修改了默认的css设置，方便布局与提高浏览器兼容性
Dreamweaver深度解析：打造高效CSS样式
"Dreamweaver设计CSS样式" 在网页设计领域，Dreamweaver是一款备受推崇的集成开发环境（IDE），尤其在处理CSS样式方面表现出色。CSS（Cascading Style Sheets）是用于控制网页布局和样式的语言，它使得网页设计者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值