css
关注
分享
扫一扫
IT 老王
好记性，不如烂笔头！
展开
-
网页设计步骤总结
【代码】网页设计步骤总结。原创 2024-05-29 21:43:13 · 392 阅读 · 0 评论 -
给一个input元素添加border-radius 但是加完之后 边框变得很粗怎么办
【代码】给一个input元素添加border-radius 但是加完之后 边框变得很粗怎么办。原创 2022-10-01 23:04:00 · 949 阅读 · 0 评论 -
css中，打印样式和显示样式是可以分开的
css中，打印样式和显示样式是可以分开的如以下，显示时table边框是红的，打印时是蓝的<HTML><HEAD><TITLE></TITLE><style media='screen'>table{border:1px solid red;}td{border:1px solid red;}</style><style media='print'>table{border:1px soli原创 2022-03-21 17:03:05 · 303 阅读 · 2 评论 -
div设置宽度100%后再设置padding或margin超出父元素的解决办法
父级元素添加 box-sizing: border-box; 即可解决在设置了元素宽度后再加上margin和padding，子元素会超出父元素宽度，肯定有时候是不需要这样的，解决方案：添加 box-sizing属性即可；box-sizing的属性对应有三个值box-sizing: content-box|border-box|inherit;1.content-box这应该就是属于默认的，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。2.bord..转载 2020-11-03 10:49:18 · 2269 阅读 · 0 评论 -
媒体查询介绍
媒体查询@media参数：针对屏幕的宽度：min-width max-width heigth针对设备的宽度：min-device-width max-device-width device-heigth针对设备的手持方向：orientation:landscape orientation:portrait…一、内嵌模式//针对媒体屏幕的查询@media screen and ( max-width:1000px) and (min-width:640px){}二、文件引入模式原创 2020-10-02 23:47:18 · 1015 阅读 · 0 评论 -
CSS选取第n个标签元素
CSS选取第n个标签元素最近做一个项目，碰到这样的需求，需要选取某个元素的倒数第几个标签元素，想让他显示不同的样式1、first-childfirst-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff}2、last-childlast-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff}3、nth-child(3)表示选择列表中的第3个标签，例如：li:nth-child转载 2020-08-26 17:38:44 · 923 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
核心规则，仔细体会@media (min-width: 768px){ //>=768的设备 }@media (min-width: 992px){ //>=992的设备 }@media (min-width: 1200){ //>=1200的设备 }注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，@media (min-width: 1200){ //>=1200的设备 }@media (min-width: 99转载 2020-08-26 10:54:42 · 783 阅读 · 0 评论 -
css选择器选择没有href属性的a标签
制定一个规则，定位省略属性？例如，定位缺少href的元素或不指定类型的元素吗？模式： a：not（[href]） input：not（[type]）属性选择器用于选择具有指定属性的元素。：not支持所有现代浏览器和IE9 +，如果您需要IE8或更低的支持， 。...原创 2020-01-18 00:47:57 · 1475 阅读 · 0 评论 -
css初始化样式表
css初始化样式表@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }fieldset, img,input,button { border:none...原创 2019-11-03 13:50:31 · 410 阅读 · 0 评论 -
CSS：display:flex详解
2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。flex浏览器支持一、Flex布局是什么？Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: -webkit-f...转载 2019-11-03 12:25:35 · 1502 阅读 · 0 评论 -
css3图片过渡变化
<!doctype html><html lang="en"><head><title>hangge.com</title><style>img {position:absolute;transition: opacity 5s;-webkit-transition...原创 2019-10-25 15:19:22 · 3058 阅读 · 0 评论 -
2018-11-06 发布 在一个元素上:hover，改变另一个元素的css属性
如果二者是父子关系，可以写成这种： .face:hover .eye-bottom { margin-top: 30px; }如果是兄弟关系：.face:hover+.ear-wrap { transform: rotate(-30deg); } ...转载 2019-10-17 14:21:16 · 141 阅读 · 0 评论 -
css关于background的那些属性
这一行代码其实是背景图定义形式的简写完整形式是：background-image:url(图片);background-repeat:no-repeat;background-position:right centerright center是设置图片的初始位置，right是在水平方向上贴容器或浏览器页面的右侧，center是在垂直方向上居中，这两个的顺序是先定义水平位置，再定义垂...原创 2019-09-09 17:47:28 · 242 阅读 · 0 评论 -
css定位方式介绍
css定位主要有三种：相对定位、绝对定位和固定定位。其中静态定位这个是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。我们这里主要介绍后边的这三个定位。1）相对定位如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、...原创 2019-08-26 19:32:45 · 245 阅读 · 0 评论 -
css3新发现height:100vh;
vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小，即window.innerWidth/...转载 2019-07-06 17:03:23 · 32894 阅读 · 1 评论 -
CSS中强大的EM
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用...转载 2019-01-18 15:26:16 · 180 阅读 · 0 评论 -
px,em,rem的区别
它们都是用于设置字体的大小以及盒子的宽高，但是px不会因为浏览器尺寸的改变而改变，而em和rem会因为浏览器尺寸的变化而变化 在我们写代码的过程中，经常在CSS中定义字体的大小或者元素的宽高值时会使用到尺寸大小的单位，今天将要为大家详细介绍在CSS中常见的尺寸单位名称及其用法，具有一定的参考价值，希望对大家有所帮助。【推荐课程：CSS教程】pxpx 是 pixel 的缩写，...转载 2019-01-18 14:04:18 · 2719 阅读 · 1 评论 -
只用css可以hover一个元素的时候改变另一个元素的位置
可以是可以，就是你在写html结构的时候，一定要把另一个元素写在你hover的元素里面，即要求hover的元素是父元素，移动的元素是子元素，然后写css的时候可以 div.hover a {...;}转载 2017-01-21 11:23:49 · 1859 阅读 · 0 评论 -
mce:style或者mcs:script是什么意思
这个应该是自定义的标签，功能就相当于 和 。因为有个在线编辑器叫tiny_mce,当使用这个编辑器的时候，为了区分其他部分的脚本和代码，就把script和style前面加了个mce:了。当然也可以不自定义这个标签吧，只是为了区分而已转载 2016-11-25 11:16:20 · 3210 阅读 · 0 评论