HTML+CSS
关注
分享
扫一扫
核心：三大类元素、定位、伪类、选择器、以及CSS其他
HuiDT
yama.thdong.top
展开
-
淘宝首屏（纯静态页面）
最近应网课老师作业，写了淘宝页面的首屏，几天时间写出来了，不过期间发现许多自身问题，html+css学习中我觉得需要注意position、display、伪类选择器、盒模型、层模型、BFC、float等等，很重要，也是非常基础，以前学习写一个小demo并没有感受到这一点如下 点击测试[最近应网课老师作业，写了淘宝页面的首屏，几天时间写出来了，不过期间发现许多自身问题，html+css学习中我...原创 2019-09-20 22:39:21 · 491 阅读 · 0 评论 -
文字溢出处理、背景图片处理以及偷来的企业开发经验
文章目录单行文字溢出处理背景图片处理注意事项单行文字溢出处理p{ width: 100px; height: 20px; line-height: 20px; border: 2px solid blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}...原创 2019-09-08 18:08:12 · 206 阅读 · 0 评论 -
BFC及其作用
文章目录html<div class="wrapper"> <div class="content"> </div> </div>css*{ margin: 0; padding: 0;}.wrapper{ margin-left: 100px; margin-t...原创 2019-09-04 21:25:41 · 267 阅读 · 0 评论 -
Olympic rings
文章目录htmlcss奥运五环广告定位效果如下html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="lesson.css"> <title>奥运五环<...原创 2019-09-02 13:09:58 · 349 阅读 · 0 评论 -
CSS三大类元素
文章目录1.行级元素（inline/内联） feature: 内容决定元素所占位置 不可通过CSS改变宽高 <span></span> <strong></strong> <em></em> <a href=""&g...原创 2019-09-01 10:18:14 · 603 阅读 · 0 评论 -
css选择器
文章目录htmlcss选择器html一切尽在代码中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="lesson.css"> <!-- 页面级css --> ...原创 2019-08-31 16:29:01 · 254 阅读 · 0 评论 -
html基础（六）
文章内容太简单，不建议阅读HTML脚本HTML script 标签HTML noscript 标签JavaScript初体验HTML实体HTML URL常见的 URL SchemeURL 字符编码ISO 语言代码HTTP消息HTTP方法Px、Em 换算工具键盘快捷键HTML脚本啥叫脚本？点击查看百度解释HTML script 标签<script>标签用于定义客户端脚本，比如 J...原创 2019-08-05 22:02:29 · 166 阅读 · 0 评论 -
html基础（五）——框架
iframe通过框架可以再浏览器中显示不知一个页面，也可以将其设置为运行但不显示【例】想要给自己的网站添加一个背景音乐，怎么做？这就可以通过iframe实现，display:none即是设置了不显示页面，<!DOCTYPE html><html> <head> <meta charset="utf-8"> </hea...原创 2019-08-05 20:38:26 · 228 阅读 · 0 评论 -
html基础（四）
html表单嗯。表单挺简单，没啥好思考的点击测试表单<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> div { text-align:center; } </style&g...原创 2019-08-05 19:56:54 · 123 阅读 · 0 评论 -
html随笔
基础随笔HTML 输出- 使用提醒段落格式化HTML 输出- 使用提醒我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。点击测试例子段落除了使用<p>区分段落，还可使用&...原创 2019-08-01 14:30:18 · 219 阅读 · 0 评论 -
html5——画布
文章目录一、Canvas二、坐标三、线条四、圆形一、Canvas一般管他叫画布，因为canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，使用JavaScript控制点击测试例子<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width=...原创 2019-07-31 11:13:35 · 1440 阅读 · 0 评论 -
html5基础（一）
文章目录HTML5 中的一些有趣的新特性：HTML5视频HTML5视频/DOM本文素材来自w3schoolhtml5教程HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar...原创 2019-07-22 17:07:51 · 190 阅读 · 0 评论 -
html基础（三）
文章目录表格列表表格首先附上菜鸟教程table教程表格由 <table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<table border="3px"...原创 2019-08-03 17:14:46 · 168 阅读 · 0 评论 -
html5——SVG
文章目录啥是SVG？SVG优势实例SVG 与 Canvas两者间的区别（本文素材源于菜鸟和W3school教程）啥是SVG？一种图像格式SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG优...原创 2019-08-03 10:50:51 · 343 阅读 · 0 评论 -
html5基础（二）
文章目录html5拖放html5拖放单个拖放单个拖放<!DOCTYPE HTML><html> <head> <style type="text/css"> #div1 { width:600px; height:400px; ...原创 2019-07-25 18:48:10 · 125 阅读 · 0 评论 -
优快云博客图片设置大小、居中
但凡对html5标签语言有一点了解就应该知道这个方法<div align=center> //设置居中，可改为left、right<img src="https:.........." width="50%" height="%50"> 用width、height设置大小，"https:…"处换为你的图片链接...原创 2019-07-16 11:07:07 · 121 阅读 · 0 评论 -
CSS揭秘——毛玻璃效果
为了方便把CSS写在一起了；点击测试例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; mar...原创 2019-09-26 20:30:42 · 260 阅读 · 0 评论