css
XUPT-前端在逃工程师
逃
展开
-
用CSS实现三角形的制作
用CSS实现三角形的制作1.原理如下图所示,当border的宽度足够大的时候,每个边框都会呈现出一个梯形(画的太丑了别介意昂)<style>.itme { width: 50px; height: 50px; background-color: #000; border: 70px solid red; margin-bottom: 70px; }原创 2020-11-26 18:51:56 · 123 阅读 · 0 评论 -
如何用div来实现textarea文本框
如何用div来实现textarea文本框1. textarea样式1.1可以输入文本2.选中时会有黑色outline框3.大小可控可调2.用div实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-17 12:33:24 · 1282 阅读 · 0 评论 -
关于网页元素居中问题
元素居中问题通过CSS来实现元素居中问题1.margin<style> .box { width: 200px; height: 200px; border: 1px solid red; } .div { width: 100px; height: 100px; border: 1px solid原创 2020-11-17 12:19:35 · 77 阅读 · 1 评论 -
Web前端学习——CSS3属性
CSS3一.border 属性1. CSS3 盒阴影CSS3 中的 box-shadow 属性被用来添加阴影代码如下:<style>.box { width: 100px; height: 100px; /*控制盒子阴影*/ box-shadow: 10px 10px 5px #888888; }</style>box-shadow: h-shadow原创 2020-11-09 19:10:17 · 405 阅读 · 0 评论 -
CSS3中的多列布局
CSS3 多列布局使用 column 属性将文本内容设计成像报纸一样的多列布局1.CSS3 创建多列column-count 属性指定了需要分割的列数。column-count: number;css代码如下<style> .box{ width: 500px; height: auto; column-count: 2; border: 1px solid #999原创 2020-11-18 20:44:14 · 702 阅读 · 0 评论 -
CSS3中的弹性盒子(Flex Box)和弹性布局
CSS3 弹性盒子(Flex Box)一. 介绍弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。display:flex | inline-flex;弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设原创 2020-11-18 19:58:30 · 1939 阅读 · 0 评论 -
CSS页面布局整体问题
CSS页面布局2一. 网页布局的三个基本布局浮动布局 float定位布局 postion多列布局 table grid二.制作网站的大布局1.自适应布局根据使用的显示选项的类型,分配不同的样式、布局和比例系数代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt原创 2020-10-31 22:35:49 · 259 阅读 · 0 评论 -
CSS页面布局细节问题
CSS页面布局11.盒模型塌陷问题1.1塌陷原因如下图所示,当父元素中的子元素box2设置外间距时,会连带父元素向下,这种情况我们一般称为盒模型塌陷。1.2解决方法a.给父元素加边框<style>.box1 { background-color: blue; width: 400px; height: 400px; /*通过给父元素加边框解决塌陷问题*/ bo原创 2020-10-25 20:47:21 · 267 阅读 · 1 评论 -
Web前端学习——CSS
Web前端学习day2一、CSS的基本介绍一、CSS的基本介绍原创 2020-10-20 21:36:54 · 132 阅读 · 0 评论