1 利用border加粗方式 这是网上较为常见的方式,其原理就是对一个高度为0px的正方形的div的border-top进行增粗。HTML: <div class="d"></div> CSS: .d{ width:80px; height: 0; border-top:20px solid; 反梯形 border-left:20px
转载 2024-04-10 14:15:18
184阅读
  今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形、梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思路,在我的帮助下, 他终于用css 做出了自己的三角形、梯形。我表示很欣慰, 于是,为了帮助更多像我这个朋友一样基础的小白,我决定献丑,把我的思路,和做法写成一篇博文,分享给大家。   
转载 2024-01-02 14:54:24
488阅读
CSS实现梯形CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉。首先我们先给一个正方形设置比较宽的边框。如下。  <div ></div> <style> #test1{ width: 50px; height: 50px; background: purple; b
转载 2024-06-13 20:38:48
396阅读
    在各式各样的网页中,经常会看到形状特别的布局,比如说下面的这种排版方式:                这种视觉上的效果,体验十分好。那么他是如何来实现的呢,博主在这里整理了如下2种实现的方式。    1.通过给 div 加border的方式实现各种图形。   
转载 2023-12-02 12:52:08
231阅读
1、这是结构代码,实现两个体形盒子对称 <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> 2、这是CSS样式代码 .container { width: 400px; height: 40
CSS
原创 2024-05-27 11:09:49
455阅读
css等腰梯形
原创 11月前
60阅读
1、边框圆形:-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;2、背景透明:opacity: 0.7;3、手形:cursor: pointer;4、块状显示display: block;5、全部居中margin:0; padding:0;6、绝对定位:position: absolute;right:
原创 2023-03-06 09:17:04
194阅读
一、全局CSS样式概述  - HTML5文件类型      - BootStrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5  - 移动设备优先      - 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据元素CSS全局样式  - 为b
原创 2016-04-05 17:16:40
903阅读
CSS画三角形 我们都知道在html中,想要画出圆形,椭圆,矩形,都很简单,但是常见的三角形,梯形如何用纯css画出却较麻烦,许多时候都是直接用三角形的图片。本文将介绍如何用纯css画出三角形和梯形一、原理 授人以鱼不如授人以渔。各种方法只有掌握了原理才能真正理解,自己才能够灵活的运用。其实画三角形和梯形很简单。主要涉及到的属性就是border边框属性先给大家看一下在html中边框的表现形式
转载 2024-01-30 04:09:32
642阅读
CSS3-边框border-radiusbox-shadowborder-image【1】box-shadowbox-shadow: 50px 50px 0 20px #ffb;图:解析:参数1:X轴,图中为30,因为50-20=30; 参数2:Y轴,图中为30,因为50-20=30; 参数3:模糊距离 参数4:阴影大小,默认可省略不写时为0。 参数4:颜色。复制代码【2】border-image
CSS
转载 2021-01-21 18:30:06
296阅读
2评论
一.选择符模式模式/含义/内容描述* 匹配任意元素。(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器) E F 匹配元素 E 的任意后代元素 F 。(后代选择器) E > F 匹配元素 E 的任意子元素 F 。(子选择器) E:first-child 当元素 E 是它的
转载 精选 2009-09-27 19:52:12
537阅读
说到到css样式优先级,今天偶再来回顾下,从css样式优先级可分为两个部分:  1、从CSS代码放置的位置看权重优先级:       内联样式 > 内部嵌入样式 >外联样式  2、从样式选择器的权重优先级:       Important > 内联样式 > ID
转载 2017-04-18 16:55:29
500阅读
图片 响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。 如果 ...
转载 2021-07-28 16:17:00
405阅读
2评论
1、CSS介绍  css是英文Cascading Style Sheets 的缩写,称为层叠样式表,用于对页面进行美化。存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。  语法:style='background-color:red;height:100px'  在标签中使用 <div style='background-color
转载 精选 2015-09-24 00:44:33
316阅读
1.css选择器1.1基本格式:​      ​选择器​​ {样式内容} ,例如:​​div {​​​​backgrondcolor: blue; }​​。      可分为​标签,​类,​id选择器​ 标签 : 某标签 {     },例:​​div {​​​​backgrondcolor: blue; }
原创 2022-04-05 23:07:28
184阅读
代码层叠特性 这是第1行文本 这是第2行文本 这是第3行文本 这是第4行文本 这是第5行文本 说明:第五行中,class中的red purple顺序不是关键。style中的red purple顺序才是关键。purple排在下面,所以最终颜色为紫色。先执行p b...
原创 2021-08-05 16:41:30
180阅读
表格 基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。 < ...
转载 2021-07-27 17:26:00
364阅读
2评论
按钮 可作为按钮使用的标签或元素 为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。 <a class="btn btn-default" href="#" role="button">Link</a> <butto ...
转载 2021-07-28 15:53:00
645阅读
表单 基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最 ...
转载 2021-07-28 10:09:00
481阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
原创 2022-06-16 17:18:04
80阅读
  • 1
  • 2
  • 3
  • 4
  • 5