css边框 | 易学教程

前端学习（十三）：CSS盒子模型

阅读更多关于前端学习（十三）：CSS盒子模型

进击のpython 前端学习——CSS盒子模型在前面的时候也说过，包括分析网页结构的时候，提到了，网页就其实就是一个一个盒子叠起来的那现在就是有装饰的盒子，难度就变得深刻所以说为了能够让你更好地理解，在说盒子模型之前，我要先向你介绍一下标签对！就是html里面的那些标签标签分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素 html标签甚至有好几百个，我们之前学习大约有30个标签，你所看到的很多大型网站我们都能通过这些标签来搭建我们网站结构那么这么多标签，显然是比较没有规律的，那么我们就来对这些常用的标签进行分类，了解了每类标签的特点之后，我们才能更好的对网站进行布局块状元素 <div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form> 内联元素 <a>、<span>、<i>、<em>、<strong>、<label> 内联块元素 <input>、<img> 那么把网页中常用的标签进行分类之后，那么这三类标签分别有什么特点呢？标签类别特点块状元素 1.独自占据整一行 2.可以设置宽高内联元素 1.所有的内联元素在一行内显示 2.不可以设置宽高行内块元素 1.在一行内显示 2.可以设置宽高注意：标签分类的特点是对现有的HTML常用标签进行分类

day45-前端CSS

阅读更多关于 day45-前端CSS

1 . 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.0 CSS语法 2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 . 2 CSS注释 /*这是注释*/ 注释是代码之母。 3.0 CSS的几种引入方式 3 . 1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3. 2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3. 3 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4 . 0 CSS选择器

css绘制三角形

阅读更多关于 css绘制三角形

　　简单写一个空的div，设置款高为0，设置边框border 　　实现这个效果　　 div{ width: 0; height: 0; /* 设置边框 */ border: 100px solid; /* 边框颜色 */ border-color: #f00 #000 #0f0 #00f } 　　只要将其他边框设为透明色，单独设置一个边框的颜色，就实现了一个三角形 div { width: 0; height: 0; /* 设置边框 transparent为透明 */ border: 100px solid transparent; /* 要设置的位置 */ border-bottom: 100px solid #f00; } 来源： https://www.cnblogs.com/zhangcheng001/p/11458801.html

Web开发（三）CSS

阅读更多关于 Web开发（三）CSS

概述基本概念层叠样式表（ Cascading Style Sheets ） , 负责网页三要素的表现 , 为网页创建样式表，通过样式表对网页进行装饰层叠：将网页想象成多层的结构，高层次的覆盖低层次， CSS 为各个层次设置样式样式表：各种样式的集合，如字体，颜色，背景，定位等样式语法样式表有一个一个样式构成，一个样式包括选择器和声明块选择器{ 样式名：样式值；样式名：样式值；样式名：样式值； } 选择器　　通过选择器可以选中指定的元素，并将声明块中的样式应用到选择器对应的元素声明块　　紧跟在选择器后面，用一对 { } 括起来　　在一个声明块中可以写多个声明，声明之间用分号 ; 隔开　　样式名和样式值用冒号：连接　　实际上就是一组一组的名值对结构注释　　/* 注释内容 */ 　　css 的注释只能写在 style 标签或 css文件中　　在 style 标签（style标签是head的子标签）中只能存放css代码内联元素、块元素使用原则一般使用块元素包含内联元素，而不使用内联元素去包含块元素 a标签可以包含任何元素（除了本身） p标签不可以包含任何块元素引入方式内联样式表将样式直接编写到元素的style属性中，不用填写选择器，直接编写声明即可内联样式只对当前元素的内容起作用内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

CSS

阅读更多关于 CSS

CSS的四种引入方式：一、行内样式 <div style="background-color: blue;color: brown">cairui</div> 二、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: blue; color: darkgoldenrod; } </style> </head> <body> <p>cai</p> <div>rui</div> </body> </html> 三、写一个css文件，把内容放在里面引用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "1.css"; </style> </head> <body> <p>cai</p> <div>rui</div> </body> </html> 四： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="1.css"

CSS3 流动边框

阅读更多关于 CSS3 流动边框

CSS3 流动边框（仿王者荣耀等待效果）的三种实现方式原地址 https://www.jianshu.com/p/3c241aeae992 <!DOCTYPE html> <html> <head> <meta charset="utf8"> <style> :root { --border-anim-size: 10em; --border-anim-width: calc(var(--border-anim-size) / 20); --border-anim-width-double: calc(var(--border-anim-width)*2); --border-anim-duration: 5s; --border-anim-border-color: gray; --border-anim-hover-color: LightCoral; } body { display: flex; } .border-anim { width: var(--border-anim-size); height: var(--border-anim-size); position: relative; border: 1px solid var(--border-anim-border-color); } .border-anim::before, .border-anim:

CSS基础（十一）-- 边框及其他样式之字体加粗

阅读更多关于 CSS基础（十一）-- 边框及其他样式之字体加粗

随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。 #------------------------------------------------我是可耻的分割线------------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <div class="c1 c2" style=" border:1px solid red; width:50%; height:100px; font-size:30px; font-weight:bold; text-align:center; line-height:100px; "> nihaone</div> </body> </html> 效果： font-weight:bold;表示字体加粗来源： https://www.cnblogs.com/lirongyang/p/11303383.html

HTML学习笔记

阅读更多关于 HTML学习笔记

============================ day1 ============================= 一、相关概念 internet: 国际互联网，全球最大的网络。 WWW(web)：internet中的一类服务，如图片、新闻、视频。 URL地址：网址 http://www.taobao.com http://localhost:8080/apex 协议：网络中通信必须遵守的规范。 http协议：web服务中必须遵守的规范。域名（机器名/IP地址）：标识网络中的一台主机。网页：web服务中提供的一个数据文件。静态网页：内容固定不变。动态网页：内容自动更新、因人因时而异。 HTML：Hype Text Markup Language 超文本标记语言用于制作静态网页内容。二、基本语法 1、后缀 .html .htm 2、由三部分构成： html head body 3、由标签组成 <html> </html> 标签成对出现，允许嵌套。 <html> <head> </head> <body> </body> </html> 标签中可以有属性(定义在开始标签中)： <body 属性名="值" bgcolor="red"> 标签可以有标签体内容：<body>标签体内容</body> 其中标签体内容，可以是文字内容/图片，也可以是

盒模型--边框（一）

阅读更多关于盒模型--边框（一）

盒模型--边框（一）盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是 border 代码的缩写形式，可以分开写： div{ border-width:2px; border-style:solid; border-color:red; } 注意： 1、border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）。 2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。 3、border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用像素（px）。实例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>边框</title> <style type="text/css"> p{border:2px dotted #ccc;} <

盒模型--边框（二）

阅读更多关于盒模型--边框（二）

盒模型--边框（二）现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式： div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边(上、右、左)边框的设置： border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; 实例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>边框</title> <style type="text/css"> li{ border-bottom:1px dotted #ccc} } </style> </head> <body> <ul> <li>别让不会说话害了你</li> <li>二十七八岁就应该有的见识</li> <li>别让不好意思害了你</li> </ul> </body> </html> 来源： https://www.cnblogs.com/iBoundary/p/11433691.html

订阅 css边框