html和css[基础用法]
2024-05-13 10:42:10
html和css
- 1，html基础
- 1.1，html的作用
- 1.2，html的结构
- 1.3，html的开发软件介绍
- 2，html标签
- 2.1，基本标签
- 2.2，表单控件
- 2.3，其他标签
- 3，css
- 3.1，概述
- 3.2，css的3种使用方式
- 3.2.1，行内样式表
- 3.2.2，内部样式表
- 3.2.3，外部样式表
- 3.3，三种样式表使用的优先级
- 3.4，css的选择器
- 3.5，选择器的优先级使用
- 3.6，css属性
- 3.6.1，定位
- 3.6.2，css的盒子模型
- 3.6.3，布局
- 3.6.4，边框
1，html基础
超文本标记语言（英语：HyperText Markup Language，简称：HTML）
1.1，html的作用
就是展示信息给用户的
使用标签来解释页面上的内容
浏览器的作用：
读取html文件，以页面的形式展示其内容，但是不会显示html标签
解析html标签，把标签内的内容按照标签的定义格式进行展示。
1.2，html的结构
<!--html注释 在源码中有但是在页面看不到-->
<!--
!声明 document type 文档类型是 html (html5的声明)
-->
<!DOCTYPE html>
<!--所有的html内容都要写在html表签内部-->
<html><!--html的头信息 标题还有一些关键词 热词 其他的配置--><head><!--meta html的配置信息charset字符编码表/字符编码集:ASCll gbk gb2312 utf-8 iso8859-1--><meta charset="utf-8"><title>首页</title></head><!--我们html代码显示的内容实在body中进行显示--><body>123456</body>
</html>
1.3，html的开发软件介绍
webstrom (idea 是一家公司收费的)
Hbuilder（国产的前端开发工具）
vscode(重点推荐)现在开发的神器
SublimeText3（上一代号称前端神器）
notpad++（记事本编辑工具）
建议使用vscode，相关插件下载：
Chinese (Simplified) Language Pack for Visual Studio Code 中文简体支持
vscode-icons
HTML CSS Support
auto close tag 标签自动关闭
beautifuy
Bracket Pair Colorizer 括号带颜色
project manager
open in browser(浏览器打开的插件)
2，html标签
2.1，基本标签
- font
- img
- p
- a
- br
- hr
- h1-h6
- table
- strong
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>欢迎页</title>
</head>
<body><!-- 文字标签font 然后回车 或者按tab键都可以快速生成对应的标签 标签现在过时了 --><font size="7" color="red" face="楷体">Welcome to html index page!</font> <!-- 图片标签source 资源的路径 绝对路径: 找到文件具体在盘符的位置相对路径:根据当前文件所在路径去寻找dos命令:width 宽 height 高px 像素单位 1px 是多大? 传统的像素:像素一般指的是屏幕的分辨率分之一自适应 响应式开发中像素单位就不是固定的了。title: 标题 鼠标悬停0.5s 出现alt: 图片记载失败的时候的提示信息 --><!-- 换行 --><br><img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img><img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img><img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img><img src="../images/1.jpg" width="100px" height="100px" title="markdown" alt="图片加载失败"></img><br><!--超链接 :href 要连接到的资源路径target: 目标资源打开的方式_parent 在父级窗口打开_self 在自身的页面打开 会覆盖度原有的页面_blank 打开新的页面显示连接的内容--><a href="http://www.baidu.com" target="_blank">百度一下</a><br><!-- 标题 h1-h6 层级越越大文字越小 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h6>六级标题</h6><!-- 分割线size 设置高度:width设置宽度: 像素 百分比color设置颜色:--><hr><hr size="5" width="500px" color="red" ><hr size="5" width="40%" color="green" ><!-- 段落标签 段落之间是有间隙的strong加粗处理css 文本样式进行文字的缩进--><p style="text-indent: 24px;"><strong>你好</strong>这是第一个段落</p><p>这是第二个段落</p><!-- 表格table:thead 表头 文字是默认加粗 居中显示的tr 表行td 代表列cellspacing 取消单元格之间的间隙border 值是1 边框显示 值是0边框隐藏跨行合并:rowspan跨列合并:colspan--><table border="1" width="600px" height="400px" cellspacing="0"><thead><tr><th>hello</th><th>hello</th><th>hello</th><th>hello</th><th>hello</th></tr></thead><tbody><tr><td colspan="2">张三</td><td>张三</td><td>张三</td><td>张三</td></tr><tr><td>张三</td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr><tr><td rowspan="2">张三</td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr><tr><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr></tbody></table></body>
</html>
2.2，表单控件
- text 文本输入
- password 密码输入
- checkbox 多选框
- radio 单选框
- date 日期
- email 邮箱
- color 颜色
- submit 提交按钮
- button 按钮
- file 表单上传
- hidden 表单隐藏的元素
- reset 重置 表单已经输入的元素内容清空
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><!-- form: 表单action: 表单提交的路径method: 表单提交方式 get: 不安全的提交方式 提交的参数会在地址栏显示出来post:安全的提交方式 数据不会在地址栏进行显示表单的控件:label 元素 点击label中的文字光标会自动聚焦到我们的文本框中id 是唯一的值 不能重复占位符: 四分之一字符 圆角和半角不一样  二分之一字符 浏览器都兼容的--><form action="" method="POST"><!-- for的值是 input元素的id值 --><label for="username">用户名:</label><input type="text" name="username" id="username"><br><label for="password">密  码:</label><input type="password" name="password" id="password"><br><input type="checkbox" name="favorate" >篮球<input type="checkbox" name="favorate" >足球<input type="checkbox" name="favorate" >羽毛球<input type="checkbox" name="favorate" >乒乓球<input type="checkbox" name="favorate" >网球<input type="checkbox" name="favorate" >排球<input type="checkbox" name="favorate" >冰球<br><!-- 单选框 一定要有name值 值是一样的 --><input type="radio" name="gender" >男<input type="radio" name="gender" >女<input type="radio" name="gender" >保密<br><!-- button仅仅是一个按钮的样式 没有任何的功能 --><input type="button" value="提交"><br><!-- file:///F:/VsCodeWorkSpace/shangguanweb/html-day01/%E6%A0%87%E7%AD%BE/form.html?username=%E4%B8%94%E7%9C%8B%E9%9B%A8%E6%9D%A5&password=123&favorate=on&gender=on --><!-- submit 才会使我们的表单具有提交功能 --><input type="submit" value="登录"><br><input type="color" ><input type="date" name=""><!-- xxx@xxx.com .cn --><input type="email" name="" ><!-- 隐藏的表单元素 --><input type="hidden" name=""><br><input type="reset" value="重置"><br><input type="file" name="" ></form>
</body>
</html>
2.3，其他标签
- i 斜体文字
- u 下划线
- b 文字加粗
- del 文字删除线
- ul li 无序列表
- ol li 有序列表
- fieldset 四条线的边框
- legend 文字在边框中上下居中
- video 视频
- audio 音频
- textarea 文本域
- 下拉菜单
- select 下拉菜单
- 内联的下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>其他的标签</title><!-- style 样式 --><style>/* */ul>li{/* 流式布局:left 从左到右布局 */float: left;/*距离盒子边距的距离*/margin-left: 100px;}</style>
</head>
<body><!-- 列表 默认是垂直排列无序列表: ul li 导航栏 横向排列有序列表:ol li--><ul style="list-style: circle;"><li>html</li><li>html</li><li>html</li><li>html</li><li>html</li></ul><br><ol><li>hello</li><li>hello</li><li>hello</li><li>hello</li></ol><br><!-- 斜向的文字 加粗 下划线 删除线--><i>Hello Html</i> <b>Hello Html</b> <u>Hello Html</u> <del>Hello Html</del><br><fieldset><!-- 文字水平居中 --><legend style="text-align: center;">年季度财务报表</legend></fieldset><!-- section side aside --><!-- section 就是代表主题的内容 --><section>Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言Java可运行于多个平台，如Windows, Mac OS，及其他多种UNIX版本的系统本教程通过简单的实例将让大家更好的了解JAVA编程语言。</section>
<!-- 文本域 cols 代表文本域的每行文字的个数 rows代表默认的行数 超过就进行滚轮出现 富文本编辑器:qq邮箱 百度贴吧 都用到了富文本编辑器
--><textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 声频 和视频 autolay 自动播放 controls 空间-->
<video src="../video/1.mp4" autoplay="autolay" controls="controls"></video>
<!-- 浏览器加载到识别的格式就使用 -->
<video autoplay controls><source src="../video/1.mp4" type="video/mp4"><source src="../video/1.mp4" type="video/avi"><source src="../video/1.mp4" type="video/wpm">
</video>
<br>
<!-- 音频 -->
<audio src="../video/周杰伦 - 等你下课(with 杨瑞代).mp3" autoplay controls></audio><audio autoplay controls><source src="../video/周杰伦 - 等你下课(with 杨瑞代).mp3" type="audio/mp3">
</audio>
<!-- 代码 -->
<br>
<!-- 下拉菜单 -->
<select><option>+</option><option>-</option><option>*</option><option>/</option>
</select>
<br>
<!-- 内联的下拉菜单 -->
<input type="text" list="select">
<datalist id="select"><option>Hello</option><option>Js</option><option>Css</option><option>Html</option><option>World</option>
</datalist>
</body>
</html>
3，css
3.1，概述
CSS 指层叠样式表 (Cascading Style Sheets)
是对html进行样式修饰的语言
层叠：层层叠加覆盖，如果有不同的样式对同一个标签进行修饰
样式冲突的部分应用优先级高的，不冲突的部分共同作用。
样式表：就是css属性样式集合
3.2，css的3种使用方式
3.2.1，行内样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css的三种使用方式</title>
</head>
<body><!-- 行内样式表:开始标签的内部使用style=""来定义--><p style="color: red;font-size: 34px;">虽然我们在前面学习标签的时候学习了标签的属性，但是在正真的开发中我们在标签中很少使用样式的属性。我们把定义样式的内容专门写在了css中去控制。</p><br><img src="../images/1.jpg" style="width: 300px;" alt="">
</body>
</html>
3.2.2，内部样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css的三种使用方式</title><!-- 内部样式表:head 标签里面 title下面定义--><style>/* css选择器: */a{/* 属性:属性的值 */color: green;}</style>
</head>
<body><!-- 行内样式表:开始标签的内部使用style=""来定义--><p style="color: red;font-size: 34px;">虽然我们在前面学习标签的时候学习了标签的属性，但是在正真的开发中我们在标签中很少使用样式的属性。我们把定义样式的内容专门写在了css中去控制。</p><br><img src="../images/1.jpg" style="width: 300px;" alt=""><br><a href="http:www.baidu.com">百度一下</a>
</body>
</html>
3.2.3，外部样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css的三种使用方式</title><!-- 内部样式表:head 标签里面 title下面定义--><style>/* css选择器: */a{/* 属性:属性的值 */color: green;}</style><!-- 引入外部的css样式文件 href 引入文件的路径: 可以引入本地的css文件也可以加载网络的css文件--><link rel="stylesheet" href="../css/index.css" type="text/stysheet">
</head>
<body><!-- 行内样式表:开始标签的内部使用style=""来定义--><p style="color: red;font-size: 34px;">虽然我们在前面学习标签的时候学习了标签的属性，但是在正真的开发中我们在标签中很少使用样式的属性。我们把定义样式的内容专门写在了css中去控制。</p><br><img src="../images/1.jpg" style="width: 300px;" alt=""><br><a href="http:www.baidu.com">百度一下</a>
</body>
</html>
3.3，三种样式表使用的优先级
如果定义相同元素的样式那么行 内样式表优先级最高 > 内部样式表 >外部的样式表。
内部样式表 和外部样式表的优先级和引入文件的位置优先级有关系。
样式表可以对多个元素进行样式的定义。一般我们使用外部的定义多个页面的相同的样式。
使用内部的样式表做个别页面样式的补充。
行内样式表基本不用。因为样式定义在标签的头部，内容多了以后修改起来比较的麻烦。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css三种使用方式的优先级</title><style>p{color:green;}</style><link rel="stylesheet" href="../css/style.css">
</head>
<body><p style="color:red;font-size: 20px;font-family: Arial, Helvetica, sans-serif;font-weight: 700;">京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上...</p><p >京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上...</p>
</body>
</html>
3.4，css的选择器
- * 通配符 代表页面所有的元素
- 标签名称选择器(元素选择器)
- id选择器
- class选择器
- 父子选择器
- 包含选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
实际上表示的是一种状态
以a标签的伪元素举例
语法：选择器 : 伪元素 { 属性: 值 }
静态状态 a:link{css属性}
悬浮状态 a:hover{css属性}
点击状态 a:active{css属性}
完成状态 a:viseted{css属性}
前6种选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 通配符 代表所有的页面元素 */* {color:green;}/* 通过元素的标签名称去选择元素 */p {color:gold;} /* id选择器 根据标签的id属性的值选择id 是唯一的 值不能重复*/#p1{color: brown;}/* class选择器定义多个元素相同的样式*/.c1{color:crimson;}/* 父子选择器父元素和子元素不能分开始用*/ul>li{color: black;}/* 包含选择器 */p a {color: lightcoral;}</style>
</head>
<body><p id="p1">Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。</p><p class="c1">Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。</p><p class="c1">Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。</p><p>Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。<a href="">百度一下</a></p><hr><ul><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li></ul><a href="">百度一下</a>
</body>
</html>
其他选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>/* 不同的标签有相同的样式: 组合选择器:*/p,a{color: aqua;}#p1,div{color: red;width: 200px;height: 200px;border: 1px solid red;}/* 伪类选择器 */img:hover{width: 400px;}/* 激活的样式 鼠标点击没有离开的样式效果 */a:active {color: red;}/* 访问过以后 */a:visited{color: pink;}</style>
</head>
<body><p>所以暂时将你眼睛闭了起来 黑暗之中漂浮我的期待 平静脸孔映着缤纷色彩 让人好不疼爱 你可以随着我的步伐 轻轻柔柔的踩 将美丽的回忆慢慢重来 突然之间浪漫无法释怀</p><a href="#">所以暂时将你眼睛闭了起来</a><p id="p1">所以暂时将你眼睛闭了起来 黑暗之中漂浮我的期待 平静脸孔映着缤纷色彩 让人好不疼爱 你可以随着我的步伐 轻轻柔柔的踩 将美丽的回忆慢慢重来 突然之间浪漫无法释怀</p><div></div><br><img src="../images/bg.png" alt=""><hr><a href="http://www.baidu.com" id="a1">百度一下</a>
</body>
</html>
高级选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>高级选择器</title><style>/* 第几个当前父类中的子元素 */p:nth-child(1){color:red;}p:nth-child(2){color:green;}/* 父元素中的第一个子元素 */li:first-child{color: gold;}img:first-child{width: 300px;height: 300px;}img:last-child{width: 200px;height: 200px;}/* 在父级元素中的第几个子元素 */img:nth-of-type(2){width: 250px;height: 250px;}</style></head><body><!-- 高级的伪类选择器 --><p>所以暂时将你眼睛闭了起来 黑暗之中漂浮我的期待 平静脸孔映着缤纷色彩让人好不疼爱</p><p>所以暂时将你眼睛闭了起来 黑暗之中漂浮我的期待 平静脸孔映着缤纷色彩让人好不疼爱</p><p>所以暂时将你眼睛闭了起来 黑暗之中漂浮我的期待 平静脸孔映着缤纷色彩让人好不疼爱</p><ul><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li></ul><div><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""></div><!-- 高级的伪元素选择器 --></body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 属性选择器有四种方式:直接赋值: type="text"以什么开头:以什么结尾: 包含什么:*/input[type='text']{background: red;}/* 开头匹配 */input[type^="re"]{background: green;}/* 结尾匹配 */input[type$='t']{background: gold;}/* 包含 */input[type*='s']{background: pink;}</style>
</head>
<body><input type="text" name="name" id="name"><input type="password" name="password" id=""><input type="reset" value="reset"><input type="submit" value="submit">
</body>
</html>
3.5，选择器的优先级使用
- * 通配符设置
- 使用组合选择器设置多个元素相同的属性
- 在使用class 定义相同的样式 不同的元素或者相同的元素
- 在使用 父子 或者包含设置其中的子元素的相同的样式
- 在使用id 设置具体的 元素的样式
- 在使用高级的选择器: 伪类 伪元素去定义样式
3.6，css属性
3.6.1，定位
- position
- static（默认）： 在页面中默认的布局方式是static 遵循常规流。后边的元素挨着前面的元素占位，放置不下就换行
- 相对定位 relative ：根据上一个元素的位置进行定位 ，如果没有给定位的值还是使用的static定位。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css 属性-定位</title><style>body{margin: 0;padding: 0;}img{position: relative;/*相对定位*/}div{width: 400px;height: 400px;border: 1px solid red;margin-left: 500px;/*距离盒子左边的距离*/}</style>
</head>
<body><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><!-- div是一个透明的没有大小的元素，他就像水一样 div + css进行布局--><div><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""></div>
</body>
</html>
- 绝对定位 absolute ： 他是根据页面的左边原点进行定位(页面的左边原点在左上角),如果是子元素他就以父元素的左上角为左边原点进行绝对定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css 属性-定位</title><style>body{margin: 0;padding: 0;}img{position: absolute;}div{width: 400px;height: 400px;border: 1px solid red;margin-left: 500px;/*距离盒子左边的距离*/}</style>
</head>
<body><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><!-- div是一个透明的没有大小的元素，他就像水一样 div + css进行布局--><div><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""><img src="../images/bg.png" alt=""></div>
</body>
</html>
- top
- left
- right
- bottom
- 这4个结合使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>方向定位</title><style>div{position: absolute;width: 330px;height: 330px;background: lightcoral;/* 通过像素赋值 *//* left: 200px; *//* left: 20%; *//* 自适应 *//* left: auto; */left: 30%;top:20%;}</style>
</head>
<body><div></div>
</body>
</html>
- z-index z轴方向的下标 下标值越大越向外
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层级关系</title><style>div{position: absolute;}div:first-child{width: 200px;height: 200px;background: lightcoral;z-index: 3;}div:nth-child(2){width: 300px;height: 300px;background: lawngreen;z-index: 2;}div:last-child{width: 400px;height: 400px;background: lightblue;z-index: 1;}</style>
</head>
<body><div></div><div></div><div></div>
</body>
</html>
3.6.2，css的盒子模型
- margin （外补白）
- padding （内补白）
- 我们使用了内补白将盒子中的内容进行移动但是发现它是将盒子在这个方向上撑大了。
使用内补白的时候呢，盒子中的内容移动了以后，我们如果要保持盒子的大小不变，那就要去相对于的放向上
减去对应的距离。
3.6.3，布局
- display
- block 将行元素转换为块级元素
- none 取消元素占有的物理空间
<style>p{width: 800px;height: 100px;}p span{width: 200px;height: 200px;background: lightblue;/* 将行内元素转换为块级元素 *//* display: block; */display: none;}/* 隐藏显示的效果 */div{width: 200px;height: 200px;background: lawngreen;}div:hover{display: none;}</style>
- float
- 使用了浮动属性的元素，会失去postion 的效果。相当于元素飘在上边。
- float在绝对定位时失效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>div{width: 200px;height: 200px;background: lawngreen;border: 1px solid red;margin-left: 20px;/* 左浮动*/float: left;opacity: 0.4;}p{}</style>
</head>
<body><div></div><div></div><div></div><div></div><p>奉天承运 皇帝诏曰龙膏酒我醉一醉 把葡萄美酒夜光杯颁赐群臣品其味 金鼎烹羊记得添肉桂胡姬酒肆灯花泪 以黄金销尽一宿魅雾雨轻挠美人背 赏丝竹罗衣舞纷飞鱼玄机 还不速为朕献舞一曲</p></body>
</html>
- clear 清除盒子的浮动
<style>.parent{border: 1px solid red;}img,p{float: left;}.parent::after{content: "";clear: both;display: block;}</style>
3.6.4，边框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框</title><style>div{width: 800px;height: 200px;/* border-width:1px ;border-color: red;border-style: dashed; *//* 边框的符合属性 */border: 1px solid red;/* 边框圆角 *//* border-radius: 15px; */border-radius: 15px 20px 30px 40px ;}div:nth-child(2){width: 200px;height: 200px;background: lawngreen;border-radius: 100px;}</style>
</head>
<body><div></div><div></div>
</body>
</html>
html和css[基础用法]相关推荐
- 【CSS详解】一文掌握CSS基础用法
CSS基础 前言 一.CSS的概念 1.什么是CSS 2.CSS的发展史 3.CSS的优势 二.CSS的导入方式 1.行内样式 2.内部样式 3.外部样式 三.CSS的选择器 1.基本选择器 2.层次 ...
- 前端之css基础学习（更正版）
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
- 和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
- 两天学会css基础（一）
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
- html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- html css基础页面,一、必知HTML基础
一.必知HTML基础-CSS教程系列 在学习CSS制作知识之前,我们必须需要认识的HTML什么基础知识. 1.搞清浏览器作用 - TOP 浏览器主要作用是浏览网页作用,在DIV+CSS制作开发 ...
- CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
最新文章
- springmvc 拦截器、国际化、验证
- Learning Perl（Perl语言入门）学习笔记（3）
- Selenium之多窗口句柄的切换
- PostgreSQL 9.6.0 手册
- c语言中switch语句流程图_C语言：C语言保留字(关键字)
- 【春华秋实】.NET Core之只是多看了你一眼
- 要男女朋友有什么用?
- 在JavaScript中将字符转换为ASCII代码
- 如何选择Spark Streaming 的Reveiver和Direct模式
- Ubuntu学习日记--Lesson2：创建、重命名、删除文件及文件夹，强制清空回收站方法
- Web设计-提交前的对话框
- python 制作网页 选择题_python爬取网页电子课本图片，自己制作可打印的课本文件...
- [入门] 探索FireMonkey的StyleBook皮肤控件的使用(附示例程序)
- OTN / SONET / SDH
- 可以用api控制的电源开关_一种穿戴式系统电源控制器设计与实现
- 移动商务，还是短信商务？
- win7系统设置电脑自动开机的操作方法
- SSM毕设项目校园书蜀黍易购平台xk9g6（java+VUE+Mybatis+Maven+Mysql）
- 计算机系学天体物理,中科院南京天文光学技术研究所专业介绍：天体物理
- Alipay（支付宝）接口相关