CSS
文章平均质量分 79
hello,是翠花呀
地势坤,君子以厚德载物
展开
-
css 实现页面区域分栏左右拉伸调整布局
想要实现如下图效果,红色可拉动的线往左边拉右边内容区域变大左边内容区域变小,往右边拉右边内容区域变小左边内容区域变大。我们先来了解一下 css 的resize属性直达w3s,resize: none|both|horizontal|vertical;可以调整元素是否可左右拖动。把 W3s 中的 resize 改为resize:horizontal;点击运行一下,就只可左右拉动。接下来我们把 w3s 里代码改为如下内容,然后点击运行<!DOCTYPE html><html>原创 2021-11-23 00:46:04 · 3181 阅读 · 1 评论 -
镂空遮罩(新手指引解决方案)
1.使用svg的方式,画个圆网上示例(遮罩图层).container { position: relative; .svg { position: absolute; } .rect1 { stroke:none; fill: #ccc; } .rect2 { stroke: none; fill: #ccc; mask: url(#mask3); }}<div class="container">原创 2020-12-29 00:54:35 · 820 阅读 · 0 评论 -
另一种画同心圆的方法
平常我们画同心圆可能是大圆套小圆,然后里面小圆居中背景颜色设为白色。今天在鼓捣某功能时,发现一个好玩的用法:使用box-shadow。先来看看box-shadow的相关属性:画的同心圆:.page-wrapper { width: 40px; height: 40px; box-shadow: rgb(243 32 32 / 60%) 0 0 0 50px; border-radius: 50%; margin-left: 100px; margin-top:原创 2020-11-26 00:54:10 · 612 阅读 · 0 评论 -
移动/PC端的一些适配方案
一.多种屏幕(响应式)响应式是一种在多种设备(比如pc端 移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段。响应式包含了移动端适配,也可以使移动端不同分辨率展现不同样式。移动端适配则相对精准,是指仅针对移动端的适配方案。1.百分数最原始我们可以使用百分数来让界面达到适配效果。*,html{ margin: 0; padding: 0;}html,body{ height: 100%; width: 100%;}header{ width: 10原创 2020-06-17 00:56:58 · 2346 阅读 · 0 评论 -
'清明时节雨纷纷' 关于web网站主题置灰
今天过清明了,全国人民为在疫情中逝去的和在火灾中以及其他各个灾难中逝世的人们默哀…国家降半旗、默哀、电视剧停播、网站和app换上了庄重的灰色。今天想要说的是关于网站变换主题。1.CSDN1)csdn首先取消了body元素的背景图片(卸下所有背景相关属性),让网页主体背景恢复为默认的白色。background: 0 0!important;2)使用了滤镜功能(这和我一开始想的做法一样)给...原创 2020-04-04 23:23:26 · 444 阅读 · 0 评论 -
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。 例如. 未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)中。原创 2017-03-10 20:20:46 · 626 阅读 · 0 评论 -
关于css3弹性布局
我们平常在对网页进行布局的手会用到一些辅助性的工具,比如bootstrap。在设计方面肯能会用到浮动(float)或者display:inline-block. 但是还有一种平常用得比较少但是性能强大的css3模型————flexbox. 今天就来探讨一下弹性布局。就拿li标签的布局来说。 先写几个li标签<ul class="flexlili"> <li class="flex-i原创 2017-04-21 22:25:48 · 677 阅读 · 0 评论 -
CSS3 设置盒子三边内阴影、双边内阴影、单边内阴影
对之前的博文进行完善。 相信对于CSS3 中box-shadow 属性大家都不陌生,但是很多新手看到参考手册估计一时半会还摸不着头脑吧,值是知道设置了,但是怎样达到自己想要的效果呢? 今天我跟大家分享关于box-shadow 相对于盒子边设置阴影的问题。 (1)(上左右内置阴影)。为了美观,加上了border -radius 属性。 阴影设置代码: box-shadow: 0原创 2017-04-25 19:44:01 · 30984 阅读 · 1 评论 -
rotate设置后position的操作
在网上看见有人需要做一个功能,将竖着接收的图片,旋转-90度或者270度,使图片与包裹它的div重合。大概意思是要将黄色部分旋转后与蓝色部分重合。初始样式:<!DOCTYPE html><html><head><style>.one{ margin:40px; width:200px; height:100p...原创 2019-09-08 16:53:17 · 1339 阅读 · 0 评论